AngularJS 动画+依赖注入+路由+应用

作者: hx永恒之恋 | 来源:发表于2016-12-15 15:53 被阅读481次

AngularJS 动画

AngularJS 提供了动画效果，可以配合 CSS 使用。
AngularJS 使用动画需要引入 angular-animate.min.js 库。

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

还需在应用中使用模型 ngAnimate：

<body ng-app="ngAnimate">

什么是动画？

动画是通过改变 HTML 元素产生的动态变化效果。
实例
勾选复选框隐藏 DIV:

<body ng-app="ngAnimate">
  隐藏 DIV: <input type="checkbox" ng-model="myCheck">
  <div ng-hide="myCheck"></div>
</body>

尝试一下 »

应用中动画不宜太多，但合适的使用动画可以增加页面的丰富性，也可以更易让用户理解。

如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中：
实例

<body ng-app="myApp">
  <h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
  <div ng-hide="myCheck"></div>
  <script>
    var app = angular.module('myApp', ['ngAnimate']);
  </script>

尝试一下 »

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 (如果元素将显示)

使用 CSS 动画

我们可以使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果，该部分内容你可以参阅我们的 CSS 过渡教程， CSS 动画教程。

CSS 过渡

CSS 过渡可以让我们平滑的将一个 CSS 属性值修改为另外一个：
实例
在 DIV 元素设置了 .ng-hide 类时，过渡需要花费 0.5 秒，高度从 100px 变为 0:

<style>
  div {    
      transition: all linear 0.5s;    
      background-color: lightblue;    
      height: 100px;
  }
  .ng-hide {    
      height: 0;
  }
</style>

尝试一下 »

CSS 动画

CSS 动画允许你平滑的修改 CSS 属性值:
实例
在 DIV 元素设置了 .ng-hide 类时, myChange 动画将执行，它会平滑的将高度从 100px 变为 0:

<style>
  @keyframes myChange {    
      from {        
          height: 100px;    
      } to {        
          height: 0;    
      }
  }
  div {    
      height: 100px;    
      background-color: lightblue;
  }
  div.ng-hide {    
      animation: 0.5s myChange;
  }
</style>

尝试一下 »

AngularJS 依赖注入

什么是依赖注入

wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖
一句话 --- 没事你不要来找我，有事我会去找你。

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

value
factory
service
provider
constant

value

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); 
  }
});

factory

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); 
  }
});
...

provider

AngularJS 中通过 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; 
    }; 
  });
});

constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

mainApp.constant("configParam", "constant value");

实例
以下实例提供了以上几个依赖注入机制的演示。

<html> 

  <head> 
    <meta charset="utf-8"> 
    <title>AngularJS 依赖注入</title> 
  </head> 

  <body> 
    <h2>AngularJS 简单应用</h2> 

    <div ng-app = "mainApp" ng-controller = "CalcController"> 
      <p>输入一个数字: <input type = "number" ng-model = "number" /></p> 
      <button ng-click = "square()">X<sup>2</sup></button> 
      <p>结果: {{result}}</p> 
    </div> 

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 

    <script> 
      var mainApp = angular.module("mainApp", []); 

      mainApp.config(function($provide) { 
        $provide.provider('MathService', function() { 
          this.$get = function() { 
            var factory = {}; 

            factory.multiply = function(a, b) { 
              return a * b; 
            } 
            return factory; 
          }; 
        }); 
      }); 

      mainApp.value("defaultInput", 5); 

      mainApp.factory('MathService', function() { 
        var factory = {}; 

        factory.multiply = function(a, b) { 
          return a * b; 
        } 
        return factory; 
      }); 

      mainApp.service('CalcService', function(MathService){ 
        this.square = function(a) { 
          return MathService.multiply(a,a); 
        } 
      }); 

      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); 
        } 
      }); 
    </script> 
  </body>
</html>

尝试一下 »

AngularJS 路由

本章节我们将为大家介绍 AngularJS 路由。
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third

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

在以上图形中，我们可以看到创建了两个 URL： /ShowOrders 和 /AddNewOrder。每个 URL 都有对应的视图和控制器。
接下来我们来看一个简单的实例：

<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>AngularJS 路由实例 - 菜鸟教程</title> 
    </head> 
    <body ng-app='routingDemoApp'> 

        <h2>AngularJS 路由应用</h2> 
        <ul> 
            <li><a href="#/">首页</a></li> 
            <li><a href="#/computers">电脑</a></li> 
            <li><a href="#/printers">打印机</a></li> 
            <li><a href="#/blabla">其他</a></li> 
        </ul> 

        <div ng-view></div> 
        <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> 
            angular.module('routingDemoApp',['ngRoute']) 
            .config(['$routeProvider', function($routeProvider){ 
                $routeProvider 
                .when('/',{template:'这是首页页面'}) 
                .when('/computers',{template:'这是电脑分类页面'}) 
                .when('/printers',{template:'这是打印机页面'}) 
                .otherwise({redirectTo:'/'}); 
            }]); 
        </script> 

    </body>
</html>

尝试一下 »
实例解析：

1、载入了实现路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
```
angular.module('routingDemoApp',['ngRoute'])
```
3、使用 ngView 指令。
```
<div ng-view></div>
```

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

4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}
]);

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>
});

参数说明：

template:
如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：
```
.when('/computers',{template:'这是电脑分类页面'})
```
templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
```
$routeProvider.when('/computers', { 
    templateUrl: 'views/computers.html',
});
```

以上代码会从服务端获取 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, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $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>

尝试一下 »

AngularJS 应用

现在是时候创建一个真正的 AngularJS 单页 Web 应用（single page web application，SPA）了。

AngularJS 应用实例

您已经学习了足够多关于 AngularJS 的知识，现在可以开始创建您的第一个 AngularJS 应用程序：

[**我的笔记**点击测试可操作版](http://www.runoob.com/angularjs/angularjs-application.html)

应用程序讲解

AngularJS 实例

<html ng-app="myNoteApp">
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-controller="myNoteCtrl">

<h2>我的笔记</h2>

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>

<p>Number of characters left: <span ng-bind="left()"></span></p>

</div>

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

</body>
</html>

尝试一下 »
应用程序文件 "myNoteApp.js":

var app = angular.module("myNoteApp", []);

控制器文件 "myNoteCtrl.js":

app.controller("myNoteCtrl", function($scope) {    
    $scope.message = "";    
    $scope.left  = function() {return 100 - $scope.message.length;};    
    $scope.clear = function() {$scope.message = "";};    
    $scope.save  = function() {alert("Note Saved");};
});

<html> 元素是 AngularJS 应用: ng-app="myNoteApp" 的容器:

<html ng-app="myNoteApp">

<div> 是 HTML 页面中控制器: ng-controller="myNoteCtrl" 的作用域:

<div ng-controller="myNoteCtrl">

ng-model 指令绑定了 <textarea> 到控制器变量 message:

<textarea ng-model="message" cols="40" rows="10"></textarea>

两个 ng-click 事件调用了控制器函数 clear() 和 save():

<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>

ng-bind 指令绑定控制器函数 left() 到 ，用于显示剩余字符:

Number of characters left: <span ng-bind="left()"></span>

应用库文件需要在 AngularJs 加载后才能执行：

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

AngularJS 应用架构

以上实例是一个完整的 AngularJS 单页Web应用（single page web application，SPA）。
<html> 元素包含了 AngularJS 应用 (ng-app=)。
<div> 元素定义了 AngularJS 控制器的作用域 (ng-controller=)。
在一个应用可以由很多控制器。
应用文件(my...App.js) 定义了应用模型代码。
一个或多个控制器文件 (my...Ctrl.js) 定义了控制器代码。

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

ng-app 指令位于应用的根元素下。
对于单页Web应用（single page web application，SPA），应用的根通常为 <html> 元素。
一个或多个 ng-controller 指令定义了应用的控制器。每个控制器有他自己的作用域：: 定义的 HTML 元素。
AngularJS 在 HTML DOMContentLoaded 事件中自动开始。如果找到 ng-app 指令， AngularJS 载入指令中的模块，并将 ng-app 作为应用的根进行编译。
应用的根可以是整个页面，或者页面的一小部分，如果是一小部分会更快编译和执行。

AngularJS 动画+依赖注入+路由+应用