Angular JS（2）

关于angularjs的特点
1.数据的双向绑定：这可能是其最激动人心的特性吧，view层的数据和model层的数据是双向绑定的，其中之一发生更改，另一方会随之变化，这不用你写任何代码！（想想jQuery方式下怎么做吧）
2.代码模块化，每个模块的代码独立拥有自己的作用域，model，controller等。
3.强大的directive可以将很多功能封装成HTML的tag,属性或者注释等，这大大美化了HTML的结构，增强了可阅读性；
4.依赖注入，将这种后端语言的设计模式赋予前端代码，这意味着前端的代码可以提高重用性和灵活性，未来的模式可能将大量操作放在客户端，服务端只提供数据来源和其他客户端无法完成的操作；
5.测试驱动开发，angularjs一开始就以此为目标，使用angular开发的应用可以很容易地进行单元测试和端对端测试，这解决了传统的js代码难以测试和维护的缺陷

1、自定义指令

可以通过自定义指令实现高度复用的模块

app.directive(directiveName,function(){
        //directiveName  建议驼峰命名
         return {
                    template : HtmlString 模板内容
                     //replace 为 true 时，必须返回唯一一个根节点
                     restrict : String 指令渲染方式
                      // E 标签  C class  M 注释  A 属性，最长使用的时E、A
                      replace : Bolean   是否替换为原节点（当渲染方式为M时  ，replace 必须为true,才能生效）   
                      controller : String | Function 指定或创建一个控制器
                       // 当为String 时，要求所指定的控制器必须被创建
                        //当为Function 时，接受 scope 形参        
          }
})

在正式的开发过程中，为了实现指令的复用，指令不应该影响父级的数据，而数据来源也不应该是直接使用父级数据，而是要由父级传入数据。
scope:{
//创建一个隔离的作用域，不是直接使用父级数据
@ | @attrName：单项数据(字符串)传递
= | =attrName : 双向数据（变量）传递
& | &attrName ：父级方法传递
当只有单个字符时，要求键名与标签的属性名相同，如果标签属性有横线，键名要使用驼峰命名式：如：

=== pMsg:"@"
}



    
        
        
        
    
    
        原父级内容pmsg： {{pmsg}}

绑定html

Sanitize 模块过滤净化 html 字符串
会将标签上的属性全部移除，只保留一个干净的标签
使用方法：引入 angular-sanitize 脚本
在模块中依赖ngSanitize
就可以直接使用 ng-bind-html了
内置$sce 服务，用来信任某html 字符串
在控制器中依赖此服务
调用$sce.trustAsHtml(htmlStr)方法，信任传入的html
返回被信任的html，可使用 ng-bind-html
使用$sce 信任html,请确保html 是安全的（风险自行承担）

脏查询

脏查询机制：$digest
$watch ==> $watcher list
$watch 监听数据变化
$apply() 手动强制触发脏查询
$timeout
$interval




    
    
    
    Document
    


    {{name}}

$http

angular-resource 用来发送网络请求的模块，依赖于ngResource ,可以发RESTful等请求

    angular.module("myApp",[])
    .controller("myController",["$scope","$http",function($scope,$http){
        $scope.items=[];
        //动态的请求数据
        //$httop.get() 返回一个promise 对象
        //success 和 error 只是语法糖，是对then()的封装
        $http.get("./data.json").success(function(res){
            console.log(res)
        });
    }])

依赖注入

angular 提供五个可被直接注入的服务，分别是：
service 单例的，调用时会自动使用new关键字，返回的是同一个实例；适用于数据持久化（共享数据或与后台通信）
factory 工厂服务（适用于通用的逻辑计算、工具类的东西）
value 创建变量
constant 创建常量,可以注入到任何地方（config阶段）
provider
注意：不要试图去复用控制器，一个控制器一般只负责一小块视图；
不要在控制器里操作DOM，这不是控制器的职责，而是指令的职责；不要在控制器里做数据格式化，ng有很好用的过滤器实现此功能；不要在控制器里面做数据过滤操作，ng有$filter服务；一般来说，controller是不会互相调用的，控制器之间的交互是通过事件进行的。




    
    
    
    Document

路由配置文件

配置路由规则需要在 config 阶段
1、引入 ui-router 脚本
2、在 app 创建时加载* ui.router* 依赖
3、在* config* 阶段，注入$stateProvider、$urlRouterProvider
4、在页面中声明ui-view 元素声明跳转链接 a * ui-sref*

http://mockjs.com/
生成随机数据，拦截 Ajax 请求