AngularJS中文手册后半部分学习

AngularJS

简介

AngularJS的中文参考手册

AngularJS 表格

• 结合ng-repeat命令

  <div ng-app="myApp" ng-controller="customersCtrl">
      <table>
        <tr ng-repeat="x in names">
          <td>{{ x.Name }}</td>
          <td>{{ x.Country }}</td>
        </tr>
      </table>
    </div>
  1
  2
  3
  4
  5
  6
  7
  8

• 使用 orderBy 过滤器

  <table>
    <tr ng-repeat="x in names | orderBy : 'Country'">
      <td>{{ x.Name }}</td>
      <td>{{ x.Country }}</td>
    </tr>
  </table>
  1
  2
  3
  4
  5
  6

• 使用 uppercase 过滤器

  <table>
    <tr ng-repeat="x in names">
      <td>{{ x.Name }}</td>
      <td>{{ x.Country | uppercase }}</td>
    </tr>
  </table>
  1
  2
  3
  4
  5
  6

• 显示序号 ($index)

  <table>
    <tr ng-repeat="x in names">
      <td>{{ $index + 1 }}</td>
      <td>{{ x.Name }}</td>
      <td>{{ x.Country }}</td>
    </tr>
  </table>
  1
  2
  3
  4
  5
  6
  7

AngularJS HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

• ng-disabled 指令

  <button ng-disabled="mySwitch">点我!</button>

  ng-disabled 指令绑定应用程序数据 “mySwitch” 到 HTML 的 disabled 属性。

  ng-model 指令绑定 “mySwitch” 到 HTML input checkbox 元素的内容（value）。

  如果 mySwitch 为true, 按钮将不可用,如果 mySwitch 为false, 按钮则可用

• ng-show 指令
  根据 value 的值来显示（隐藏）HTML 元素。

  <p ng-show="true">我是可见的。</p>

  <p ng-show="false">我是不可见的。</p>

  可以使用表达式来计算布尔值

  <div ng-app="" ng-init="hour=13">
    <p ng-show="hour > 12">我是可见的。</p>
  </div>
  1
  2
  3

• ng-hide指令：与ng-show用法相似

AngularJS 事件

1. ng-click 指令: 定义了 AngularJS 点击事件

   <button ng-click="count = count + 1">点我！</button>

2. 隐藏 HTML 元素 ng-hide

3. 显示 HTML 元素 ng-show

AngularJS模块

模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块。

1. 通过 AngularJS 的 angular.module 函数来创建模块：

   <div ng-app="myApp">...</div>
   
   <script>
   
     var app = angular.module("myApp", []);
   
   </script>
   1
   2
   3
   4
   5
   6
   7

   “myApp” 参数对应执行应用的 HTML 元素。

   在模块定义中 [] 参数用于定义模块的依赖关系。
   中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

2. 使用 ng-controller 指令来添加应用的控制器

   <script>
     var app = angular.module("myApp", []);
     app.controller("myCtrl", function($scope) {
         $scope.firstName = "John";
         $scope.lastName = "Doe";
     });
   </script>
   1
   2
   3
   4
   5
   6
   7

3. 添加指令

```js
app.directive("phpDirective", function() {
  return {
      template : "我在指令构造器中创建!"
  };
});
```
1
2
3
4
5
6
7

函数会影响到全局命名空间

JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。

AngularJS表单

AngularJS 表单是输入控件的集合

HTML 控件
以下 HTML input 元素被称为 HTML 控件:

- input 元素

- select 元素

- button 元素

- textarea 元素
1
2
3
4
5
6
7

  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
1
2
3
4
5
6
7
8

novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。

输入验证

<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
1
2
3
4
5
6
7

实例解析
AngularJS ng-model 指令用于绑定输入元素到模型中。

模型对象有属性email

使用了 ng-show指令， color:red 在邮件是 $dirty 并且 $invalid 时才显示。

属性 描述
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录

AngularJS API

AngularJS 全局 API用于执行常见任务的 JavaScript 函数集合，如：

比较对象

迭代对象

转换对象

通用API
angular.lowercase() 转换字符串为小写

angular.uppercase() 转换字符串为大写

angular.isString() 判断给定的对象是否为字符串，如果是返回 true。

angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。

AngularJS Bootstrap

引入 Twitter Bootstrap
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">//国内用百度的

Bootstrap 类解析
元素----Bootstrap类—定义

AngularJS 包含

在 AngularJS 中，可以在 HTML 中包含 HTML 文件。

客户端包含

通过 JavaScript 有很多种方式可以在 HTML 中包含 HTML 文件。

通常我们使用 http 请求 (AJAX) 从服务端获取数据，返回的数据我们可以通过 使用 innerHTML 写入到 HTML 元素中。

AngularJS包含

使用 AngularJS, 可以使用 ng-include 指令来包含 HTML 内容:
<div ng-include="'myUsers_List.html'"></div>

AngularJS 动画

用法

1. 需要引入 angular-animate.min.js 库
   <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

2. 需在应用中使用模型 ngAnimate
   <body ng-app="ngAnimate">

如果已经设置了应用名，可以把 ngAnimate 直接添加在模型中
<body ng-app="myApp">
var app = angular.module('myApp', ['ngAnimate']);

ngAnimate 做了什么?

ngAnimate 模型可以添加或移除 class 。

ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生, ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS 添加/移除 class 的指令:

ng-show

ng-hide

ng-class

ng-view

ng-include

ng-repeat

ng-if

ng-switch

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。

其他指令会在进入 DOM 添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。

当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。

此外， 在动画完成后，HTML 元素的类集合将被移除。例如：ng-hide 指令会添加以下类：

ng-animate

ng-hide-animate

ng-hide-add (如果元素将被隐藏)

ng-hide-remove (如果元素将显示)

ng-hide-add-active (如果元素将隐藏)

ng-hide-remove-active (如果元素将显示)

AngularJS 依赖注入

什么是依赖注入

wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。

该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

• value: 一个简单的 javascript 对象，用于向控制器传递值（配置阶段）

  // 定义一个模块
  var mainApp = angular.module("mainApp", []);
  
  // 创建 value 对象 "defaultInput" 并传递数据
  mainApp.value("defaultInput", 5);
  ...
  
  // 将 "defaultInput" 注入到控制器
  mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
    $scope.number = defaultInput;
    $scope.result = CalcService.square($scope.number);
    
    $scope.square = function() {
        $scope.result = CalcService.square($scope.number);
    }
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

• factory: 用于返回值。在 service 和 controller 需要时创建。

  通常我们使用 factory 函数来计算或返回值

  // 定义一个模块
  var mainApp = angular.module("mainApp", []);
  
  // 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
  mainApp.factory('MathService', function() {
    var factory = {};
    
    factory.multiply = function(a, b) {
        return a * b
    }
    return factory;
  }); 
  
  // 在 service 中注入 factory "MathService"
  mainApp.service('CalcService', function(MathService){
    this.square = function(a) {
        return MathService.multiply(a,a);
    }
  });
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

• service

• provider
  通过 provider 创建一个 service、factory等(配置阶段)。

  Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

  // 定义一个模块
  
  var mainApp = angular.module("mainApp", []);
  ...
  
  // 使用 provider 创建 service 定义一个方法用于计算两数乘积
  mainApp.config(function($provide) {
    $provide.provider('MathService', function() {
        this.$get = function() {
          var factory = {};  
  
          factory.multiply = function(a, b) {
              return a * b; 
          }
          return factory;
        };
    });
  });
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

• constant: 用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。
  mainApp.constant("configParam", "constant value");

AngularJS 路由

AngularJS 可以实现多视图的单页Web应用

通常我们的URL形式为 http://php.cn/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

<http://php.cn/#/first>
<http://php.cn/#/second>
<http://php.cn/#/third>
1
2
3

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://php.cn/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

1. 载入实现路由的 js 文件：angular-route.js
   <script src="//cdn.bootcss.com/angular.js/1.3.13/angular-route.js"></script>

2. 使用 ngView 指令。

<div ng-view></div>

该 div 内的 HTML 内容会根据路由的变化而变化。

3. 配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

<script>
    angular.module('routingDemoApp',['ngRoute'])
    .config(['$routeProvider', function($routeProvider){
        $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/computers',{template:'这是电脑分类页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
    }]);
</script>
1
2
3
4
5
6
7
8
9
10

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

• 第一个参数是 URL 或者 URL 正则规则。

• 第二个参数是路由配置对象。

路由设置对象

AngularJS 路由也可以通过不同的模板来实现。

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

路由配置对象语法规则如下：

  $routeProvider.when(url, {
      template: string,
      templateUrl: string,
      controller: string, function 或 array,
      controllerAs: string,
      redirectTo: string, function,
      resolve: object<key, function>
  });
1
2
3
4
5
6
7
8

参数说明：

• template:

  如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

  .when('/computers',{template:'这是电脑分类页面'})

• templateUrl:

  如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

$routeProvider.when('/computers', {
     templateUrl: 'views/computers.html',
 });
1
2
3

以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。

• controller:

  function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。

• controllerAs:

  string类型，为controller指定别名。

• redirectTo:

  重定向的地址。

• resolve:

  指定当前controller所依赖的其他模块。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope) { $scope.$route = $route;})
.controller('AboutController', function ($scope) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>

  
</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> Home </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
      <h1> About </h1>
  </script>

  <div> 
    <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>
      
    <div ng-view="">
    </div>
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

总结 - 它是如何工作的呢？

ng-app 指令位于应用的根元素下。

对于单页Web应用（single page web application，SPA），应用的根通常为 <html> 元素。

一个或多个 ng-controller 指令定义了应用的控制器。每个控制器有他自己的作用域 : : 定义的 HTML 元素。

AngularJS 在 HTML DOMContentLoaded 事件中自动开始。如果找到 ng-app 指令 ， AngularJS 载入指令中的模块，并将 ng-app 作为应用的根进行编译。

应用的根可以是整个页面，或者页面的一小部分，如果是一小部分会更快编译和执行。