zoukankan      html  css  js  c++  java
  • angularjs学习笔记--1.入门

    AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

    AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:<script src="angular.js"></script>

    AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML。

    AngularJS 扩展了 HTML

    AngularJS 通过 ng-directives 扩展了 HTML。

    ng-app 指令定义一个 AngularJS 应用程序。

    ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

    ng-bind 指令把应用程序数据绑定到 HTML 视图。

    angularjs实例:

    <!DOCTYPE html>
    <html>
    <body>
    
        <div ng-app="">
          <p>在输入框中尝试输入:</p>
          <p>姓名:<input type="text" ng-model="name"></p>
          <p ng-bind="name"></p>
        </div>
    
        <script src="angular.js"></script>
    
    </body>
    </html>

    实例讲解:

    当网页加载完毕,AngularJS 自动开启。

    ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

    ng-model 指令把输入域的值绑定到应用程序变量 name

    ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

    angularjs 1.3完整示例:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Example - example-example10</title>
      
    
      <script src="../../../angular.min.js"></script>
      <script src="script.js"></script>
      
    
      
    </head>
    <body ng-app="docsSimpleDirective">
      <div ng-controller="Controller">
      <div my-customer></div>
    </div>
    </body>
    </html>

    script.js: 

    (function(angular) {
      'use strict';
    angular.module('docsSimpleDirective', [])
      .controller('Controller', ['$scope', function($scope) {
        $scope.customer = {
          name: 'Naomi',
          address: '1600 Amphitheatre'
        };
      }])
      .directive('myCustomer', function() {
        return {
          template: 'Name: {{customer.name}} Address: {{customer.address}}'
        };
      });
    })(window.angular);

    angularjs 参考:

    AngularJS 指令

    指令 描述
    ng-app 定义应用程序的根元素。
    ng-bind 绑定 HTML 元素到应用程序数据。
    ng-click 定义元素被单击时的行为。
    ng-controller 为应用程序定义控制器对象。
    ng-disabled 绑定应用程序数据到 HTML 的 disabled 属性。
    ng-init 为应用程序定义初始值。
    ng-model 绑定应用程序数据到 HTML 元素。
    ng-repeat 为控制器中的每个数据定义一个模板。
    ng-show、ng-hide 显示或隐藏 HTML 元素。

     

    AngularJS 过滤器

    过滤器 描述
    currency 格式化数字为货币格式。
    filter 从数组项中选择一个子集。
    lowercase 格式化字符串为小写。
    uppercase 格式化字符串为大写。
    orderBy 根据某个表达式排列数组。

     

     

     

     

     

  • 相关阅读:
    2016/11/17 周四 <javascript的封装简单示例>
    JavaScript资源大全中文版(Awesome最新版转载自张果老师博客)
    <web Font的使用>
    博客园首页飘彩色雪花代码
    C#多线程
    SQL Server数据库优化措施:索引优化(转)
    HOWTO: InstallShield中如何实现MSI包的权限提升(转)
    C# 获取操作系统版本信息
    installshield msi程序安装问题
    bat和VBS
  • 原文地址:https://www.cnblogs.com/mrxia/p/4196143.html
Copyright © 2011-2022 走看看