AngularJS

简介

AngularJS的中文参考手册

AngularJS的使用

• AngularJS 是一个JS框架，通过指令(ng-directives)扩展了HTML，且通过表达式绑定数据到HTML，用于开发单一页面应用程序（SPAs：Single Page Applications）
• 可以通过script标签添加到网页中(建议把脚本放在 元素的底部。
  这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。)
  
• 各个 angular.js 版本下载： https://github.com/angular/angular.js/releases

AngularJS指令

• AngularJS 通过 ng-directives 扩展了 HTML

• AngularJS 指令是以 ng- 作为前缀的 HTML 属性

  • HTML5 允许扩展的（自制的）属性，以 data- 开头。
    AngularJS 属性以 ng- 开头，可以使用 data-ng- 来让网页对 HTML5 有效。

  • ng-app 指令定义一个 AngularJS 应用程序的根元素。

  • ng-model是把前端的数据绑定到后端的变量上，ng-bind是把后端变量的值绑定到前端，在html中显示

    • ng-model 指令把元素值（比如输入域的值）绑定到应用程序变量。
    • ng-bind 指令把应用程序数据（变量）绑定到 HTML 视图（某个标签的innerHTML）。

  • ng-init 指令初始化 AngularJS 应用程序变量

  • ng-app 指令告诉 AngularJS，

    元素是 AngularJS 应用程序 的"所有者"。
    
    一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。但是我记得之前在哪看到说只识别第一个ng-app指令

  • ng-repeat 指令会重复一个 HTML 元素

        
    
            
    使用 ng-repeat 来循环数组
            
    
                
    
                    {{ x }}
                
             
        
    1
    2
    3
    4
    5
    6
    7
    8

• 创建自定义的指令

  
  
      
          
          
      
      
          
          
      
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

• 可以使用 .directive 函数来添加自定义的指令。

• 要调用自定义指令，HTML 元素上需要添加自定义指令名。

• 使用驼峰法来命名一个指令， phpDirective, 但在使用它时需要以 - 分割, php-directive

• 可以通过以下方式来调用指令：

  • 元素名

  • 属性

    `
    `
    1

  • 类名

        `
    `  
    1

    要求：

    app.directive("phpDirective", function() {
    return {
        restrict : "C",
        template : "
    自定义指令!
    "
    };
    1
    2
    3
    4
    5

注意： 必须设置 restrict 的值为 "C" 才能通过类名来调用指令。

• 注释
  

  restrict : “M”

• 限制使用

  • 可以限制指令只能通过特定的方式来调用。

  • 通过添加 restrict 属性, 并设置只值为 “A”, 来设置指令只能通过属性的方式来调用:

• restrict 值可以是以下几种

  • E 作为元素名使用

  • A 作为属性使用

  • C 作为类名使用

  • M 作为注释使用

  • restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

• 数据绑定

  • {{ vName }} 表达式是一个 AngularJS 数据绑定表达式。
    
    AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。
    
    {{ vName }} 是通过 ng-model=“vName” 进行同步。

AngularJS表达式

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量

• AngularJS 表达式写在双大括号内：{{ expression }}。

• AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

• AngularJS 将在表达式书写的位置"输出"数据。

• AngularJS 表达式 与 JavaScript 表达式

  • 类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

  • 与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

  • 与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

  • 与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

AngularJS应用（简要）

• AngularJS 模块（Module） 定义了 AngularJS 应用。

• AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

• ng-app指令定义了应用, ng-controller 定义了控制器。

AngularJS模型

• ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值(将输入域的值与 AngularJS 创建的变量绑定)

  不是一个合法的邮箱地址
  提示信息会在 ng-show 属性返回 true 的情况下显示。

• ng-model 指令根据表单域的状态添加/移除以下类：

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

AngularJS Scope（作用域）

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}h1>

div>
1
2
3
4
5

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>
1
2
3
4
5
6

AngularJS 应用组成如下：

• View(视图), 即 HTML。

• Model(模型), 当前视图中可用的数据。

• Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型，是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

Scope 作用范围

• 根作用域

  所有的应用都有一个 $rootScope，它可以作用在 ng-app指令包含的所有 HTML 元素中。

  $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

AngularJS 控制器

AngularJS 控制器 控制 AngularJS 应用程序的数据。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器可用于转换数据：

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

表达式中添加过滤器

姓名为 {{ lastName | uppercase }}

lowercase 过滤器将字符串格式化为小写

总价 = {{ (quantity * price) | currency }}

currency 过滤器将数字格式化为货币格式

指令中添加过滤器

<li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  li>
1
2
3

orderBy 过滤器根据表达式排列数组：

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  li>
ul>
1
2
3
4
5

filter 过滤器从数组中选择一个子集

AngularJS Service

什么是服务？

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

有个 $location 服务，它可以返回当前页面的 URL 地址。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>
1
2
3
4
5
6

为什么使用服务?

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。

$http 服务

$http 是 AngularJS 应用中最常用的服务。 该服务向服务器发送请求，应用响应服务器传送过来的数据。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
      $scope.myWelcome = response.data;
  });
});
</script>
1
2
3
4
5
6
7
8

$http 服务向服务器请求信息，返回的值放入变量 “myWelcome” 中。

$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
      $scope.myHeader = "How are you today?";
  }, 2000);
});
</script>
1
2
3
4
5
6
7
8
9

$timeout 访问在规定的毫秒数后执行指定函数。

$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
      $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});
</script>
1
2
3
4
5
6
7
8
9

$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。

创建自定义服务

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
1
2
3
4
5

自定义服务，用于转换16进制数

控制器中，使用自定义服务

<script>
var app = angular.module('myApp', []);

app.service('hexafy', function() {
 this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12

过滤器中，使用自定义服务

要使用访问自定义服务，需要在定义过滤器的时候独立添加

<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
 this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

{{255 | myFormat}}