Angular JS（2）

2017-07-22 本文已影响0人 LorenaLu

关于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 ：父级方法传递
当只有单个字符时，要求键名与标签的属性名相同，如果标签属性有横线，键名要使用驼峰命名式：如：<h1 p-msg = " "></h1> === pMsg:"@"
}

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./angular.min.js" charset="utf-8"></script>
    </head>
    <body ng-controller="mainController">
        原父级内容pmsg： {{pmsg}}
        <input type="text" ng-model="pmsg">
        <my-directive msg1="abc" a="def" per-msg="ghi" b={{pmsg}} c="pmsg" d="pEvent(m)"> </my-directive>
    </body>
    <script type="text/javascript">
        angular.module("myApp",[])
        .controller("mainController",["$scope",function($scope){
            $scope.pmsg = "父级内容";
            $scope.pEvent = function(m){
                console.log("事件被执行",m);
                return "a";
            }
        }])
        .directive("myDirective",function(){
            return {
                scope:{
                    msg1:"@",
                    msg2:"@a",
                    perMsg : "@",
                    pmsg :"@b",
                    c : "=",
                    d : "&"
                }
                ,template : `
                    <div>
                        <h2>自定义指令</h2>
                        使用父级的消息： {{pmsg}}
                        <input type="text" ng-model="pmsg"/>
                        <h3 style="background:red;">{{msg1}}</h3>
                        <h3>{{msg2}}</h3>
                        <h3>{{perMsg}}</h3>
                        <input type="text" ng-model = "c">
                        <h3>{{d({m:"此消息来自子级"})}}</h3>
                    </div>
                `
                ,link:function(scope,el,attrs){
                    // console.log(scope,el,attrs)
                    //angular 内置轻量级的jQuery  名字叫jqLite
                    //link 阶段操作DOM是安全的，常用于事件添加或样式后修改
                    angular.element(el).find("h3").css("background","pink")
                }
                ,controller : "myController"
            }
        })
        .controller("myController",["$scope",function($scope){
            $scope.cmsg = "指令变量 cmsg 内容"
        }])
    </script>
</html>

绑定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

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./angular.min.js"></script>
</head>
<body ng-controller="myController">
    {{name}}
    <input type="text" ng-model="a">
</body>
<script>
    angular.module("myApp",[])
    .controller("myController",["$scope","$timeout",function($scope){
        $scope.name="sun";
        setTimeout(function(){
            $scope.name="new name";
            console.log($scope.name);
        },1000);
        $scope.$watch("name",function(){
            console.log(arguments)
        })
        // setTimeout(function(){
        //     $scope.name="new name";
        //     console.log($scope.name);
        //     $scope.$apply();
        // },1000)
    }])
</script>
</html>

$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是不会互相调用的，控制器之间的交互是通过事件进行的。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./angular.min.js"></script>
</head>
<body ng-controller="myController"></body>
<script>
    var app = angular.module("myApp",[]);
    app.config(function(z5Provider){
        
    });
    app.controller("myController",[
        "$scope","z1","z2","z3","z4","z5"
        ,function($scope,z1,z2,z3,z4,z5){
            z1();
            z2.say();
            console.log(z2);
            console.log(z3())
            console.log(z4)
            console.log(z5)
     }])
    app.factory("z1",function(){
        return function(){
            console.log("这是z1-factory")
        }
    })
    app.service("z2",function(){
        this.name="abc",
        this.say = function(){
            console.log("这是z2-service",this.name)
        }
    })
    app.value("z3",function(){
        return "这是z3-value"
    })
    app.constant("z4","3.14");
    app.provider("z5",function(){
        this.$get = function(){
            return "这是z5-provider"
        }
    })
</script>
</html>

路由配置文件

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

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