AngularJS基础(下)

1.AngularJS API

• AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如: 比较对象, 迭代对象,转换对象.
• 全局 API 函数使用 angular 对象进行访问.

API	描述
angular.lowercase()	转换字符串为小写
angular.uppercase()	转换字符串为大写
angular.isString()	判断给定的对象是否为字符串，如果是返回 true
angular.isNumber()	判断给定的对象是否为数字，如果是返回 true

   
   
   
输入的内容为: {{myInput}}
   
变成小写: {{x1}} 
   
变成大写: {{x2}} 
   

      是不是字符串:
      是
      否
      
   
   

      是不是数字:
      是
      否
     
   

AngularJS_API

2.AngularJS包含

• 在 AngularJS 中，你可以在 HTML 中使用 ng-include 指令包含 HTML 文件.
• ng-include 指令除了可以包含 HTML 文件外，还可以包含 AngularJS 代码
• 默认情况下，ng-include 指令不允许包含其他域名的文件。如果你需要包含其他域名的文件，你需要设置域名访问白名单(此外，你还需要设置服务端允许跨域访问).

   

   // 域名访问白名单 
   

3.AngularJS 动画

• AngularJS 提供了动画效果，可以配合 CSS 使用。
• AngularJS 使用动画需要引入 angular-animate.min.js 库。
• 应用中动画不宜太多，但合适的使用动画可以增加页面的丰富性，也可以更易让用户理解.

   
   
   



   
隐藏 DIV: 
   

AngularJS_动画

如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中,如下所示.

   
隐藏 DIV: 
   

   

ngAnimate模型的作用

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

支持的指令:

指令	支持动画
ng-show	add and remove (the ng-hide class value)
ng-class	add and remove
ng-view	enter and leave
ng-include	enter and leave
ng-if	enter and leave
ng-switch	enter and leave
ng-repeat	enter, leave and move
form	add and remove (dirty, pristine, valid, invalid & all other validations)
ng-model	add and remove (dirty, pristine, valid, invalid & all other validations)

那么，怎么使用呢? 本文拿ng-repeat这个指令来做个介绍，其他的一些指令使用方式几乎相同，可类推。
ng-repeat 主要是对一个list的展示，这些元素是是被创建出来加入到DOM结构中去的，那么，它的动画过程如下:

创建元素 -> .ng-enter -> .ng-enter-active -> 完成，呈默认状态
默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素

1. ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
2. 其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。
3. 当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。
4. 在动画完成后，HTML 元素的类集合将被移除。

例如： ng-hide 指令会添加以下类：

• ng-animate
• ng-hide-animate
• ng-hide-add (如果元素将被隐藏)
• ng-hide-remove (如果元素将显示)
• ng-hide-add-active (如果元素将隐藏)
• ng-hide-remove-active (如果元素将显示)

这样的效果是对所有元素同时应用，可能实际运用中需要有一个先后的渐变出现的效果，这时候可以设置ng-enter-stagger里面的transition-delay的样式时间。
具体情况还需要我们自己去实践.
参考:http://www.open-open.com/lib/view/open1437529447443.html

4.AngularJS 依赖注入

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

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

• value
• factory
• service
• provider
• constant

4.1 value

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

4.2 factory

factory 是一个函数用于返回值。在 service 和 controller 需要时创建, 通常我们使用 factory 函数来计算或返回值。

AngularJS 简单应用

   
输入一个数字: 
   X2
   
结果: {{result}}

AngularJS_依赖注入

4.3 provider

AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。
Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

/* 把上图示例中的 mainApp.factory 替换成如下代码,效果相同 */
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};
         factory.multiply = function(a, b) {
            return a * b;
         }
         return factory;
      };
   });
});

4.4 constant

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

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

5. 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 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

   
AngularJS 路由
   

      
首页
      
产品
      
新闻
      
联系我们
   
   


   
   
   

AngularJS_路由

实例解析：

• 1、载入了实现路由的 js 文件：angular-route.js。
• 2、包含了 ngRoute 模块作为主应用模块的依赖模块: angular.module('myApp',['ngRoute'])
• 3、使用 ngView 指令:
  , 该 div 内的 HTML 内容会根据路由的变化而变化。
• 4、配置 $routeProvider, 用来定义路由规则。通过使用 configAPI，我们请求把$routeProvider 注入到我们的配置函数并且使用 $routeProvider.whenAPI 来定义我们的路由规则。 $routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数: 第一个参数是 URL 或者 URL 正则规则, 第二个参数是路由配置对象。

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

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object
});

参数	说明
template	在 ng-view 中插入简单的 HTML 内容
templateUrl	在 ng-view 中插入 HTML 模板文件
controller	在当前模板上执行的controller函数，生成新的scope
controllerAs	为controller指定别名
redirectTo	重定向的地址
resolve	指定当前controller所依赖的其他模块

6.应用

一个简单的备忘录应用

   
我的备忘录
   

      
      
   

   


   

       
       
   

   删除记录

   

AngularJS_应用