angular的学习一直零零碎碎的，只会写基础。决心好好啃一下，把原理弄懂点，深入学一下。把脑子里记得起来的知识点罗列一下，方便回顾。

常用指令ng

  • ng-app 定义一个app,是angular的入口 定义了一个$rootScope,以此为根节点开始渲染dom
  • ng-init 初始化,可以初始化多个变量，用逗号分隔，赋值对象数组字符串数组都可以
  • ng-controller 定义一个控制器,产生了一个$scope
  • ng-model 绑定$scope上的值到html元素上，实现model和view的双向绑定
  • ng-repeat 迭代数组，后面加｜可以带上过滤器，比如filter:query，query也是$scope上一个属性，改变query就能过滤筛选迭代的值
  • ng-class 动态自定义dom的class
  • ng-bing 绑定一个值，在angualr解析渲染完毕后才把数据显示出来，避免了数据闪跳的现象
  • ng-click 点击触发的事件
  • ng-show 布尔值 true是显示 反之隐藏，也可以写条件
  • ng-hide 和show相反
  • ng-if 和if的道理一样
  • ng-include 包含进来公共页面，可以ng-include=”‘header.html’”(里面要加上单引号，不然会认为是个变量，应该是个表达式)

自定义指令directive

指令有两种 一种是修改template的，组件式指令替换dom,另一种是装饰性指令，是进行操作的

restrict：用来限定指令在html中出现的位置 AEMC —> 属性 元素 注释 类

replace: true的时候会把指令本身替换掉

1
2
3
4
5
6
7
angualr.module('myApp').directive('myModel',function(){
    return{
       	restrict:'AEMC',
      	replace:true,
        template:'<div></div>'
    }
})

scope：指令中作用域的绑定

  • @ 把当前属性当作字符串传递 也能以取外层scope的值
  • = 和父scope中的属性双向绑定
  • & 传递父scope中的函数以供调用

link：连接函数，实现dom操作和scope赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//html
//<body class="container" ng-controller="myCtrl">
//<input type="text" ng-model="format">
//当前时间:<span my-current="format"></span>
//</body>
//js
angular.module('myApp').directive('myCurrent',function($interval,dateFilter){
        return{
            link:function (scope,element,attrs) {
                function getdate() {
                    element.html(dateFilter(new Date(),scope[attrs['myCurrent']]))
                }
                $interval(function () {
                    getdate();
                },1000)
            }
        }
    })

controller是link中的第四个参数，要先require进来，require的指令前缀有四种：

  • ? 指令同级下查找，找不到赋予null
  • ^ 同级和上级中查找，找不到报错
  • ^? 同级和上级中查找，找不到赋予null
  • 无前缀 同级下查找，找不到报错
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
//html
//<girl kind="beautiful,clever"></girl>
//js
angular.module('myApp').directive('girl',function(){
        return{
            restrict:'E',
            scope:true,
            //控制器里的是依赖注入进来的 是写死的$...
            //link是用来将指令隔离开的,而controller是提供复用的行为的(给别的指令调用的)
            // 比如这边的话就是girl的属性要给smart和beautiful来修改
            controller:function ($scope, $element, $attrs) {
                $scope.kinds = [];
                this.add = function (ele) {
                    $scope.kinds.push(ele)
                }
            },
            template:'<h1>hi</h1>{{kinds}}',
            //link里的是形参 可以随便写
            link:function (scope,element,attrs) {
                element.bind('click',function () {
                    alert(scope.kinds);
                })
            }
        }
    })
    //上面在controller里面定义的就可以在link的第四个参数里面调用这个控制器(要先require进来)
    angular.module('myApp').directive('kind',function () {
        return{
            require:'girl',
            link:function (scope, element, attrs, girlCtrl) {
                girlCtrl.add(attrs.kind)
            }
        }
    })

transclude，描述是否嵌入指令内部的dom。指令中的transclude属性有三种值，true、false、object，object是定义多个嵌入点的的。

下面的例子中，页面渲染后ng-transclude中的是<div>这是原来的内容</div> 

1
2
3
4
5
6
7
8
9
10
11
12
//html部分
//<my-student>
//    <div>这是原来的内容</div>
//</my-student>
//js
angular.module('myApp').directive('myStudent',function(){
    return{
        transclude:true,
        replace:true,
        template:'<div>我是template<ng-transclude></ng-transclude></div>'
    }
})

注意点：

  • 在html用指令的时候，要讲单词用-分开，并且首字母小写,例如 my-model
  • 而在定义的时候要遵循驼峰命名法，例如 myModel
  • directive中的scope是参数，$加不加无所谓的
  • scope,element,attrs 分别是作用域、当前dom的jq对象（内置jqlite）、属性的对象（集合）

服务

angular里内置的服务都是以$开头的

$http

封装了jq的$ajax对象,get post delete

$timeout

延时器的封装，在控制器注入服务，用法和原生几乎相同

provider

1
2
3
4
5
6
7
angualr.module('myApp').provider('myService',function(){
  this.$get = function(){
    return {
      '+':function(a,b){ return a+b }
    }
  }
})

自定义服务有封装好的factory servive value constant，都是通过provider封装的

provider定义的服务，注入到控制器中，等于new一个实例，返回的是return中的内容，可以直接调用其中的方法，myService[‘+’] 、myService.add这样。

对服务进行配置的时候，config配置此服务返回的是整个myService。

用factory定义服务

1
2
3
4
5
6
7
angualr.module('myApp').factory('myService',function($http){
    return{
        add:function(data){
            return $http.get('/url')
        }
    }
})

返回一个对象 myService，以供别的组件来注入，然后调用对象里面定义的各种方法。模块化的开发，便于复用。

用service定义服务

1
2
3
4
5
angualr.module('myApp').service('myService',function($http){
  this.add = function(data){
    return $http.get('/url')
  }
})

注入的时候等于在实例化服务，调用对象的方法

value constant服务

1
2
3
4
//value
angualr.module('myApp').value('person',{name:'huk'})
//constant
angualr.module('myApp').constant('person',{name:'huk'})

Scope

scope是一个上下文对象，是双向数据绑定和mvc的基础

3个scope

  • 全局 $rootScope，在指定ng-app的时候就产生
  • 控制器 $scope，在指定ng-controller的时候产生
  • 自定义指令 scope，是自定义指令定义的第一个参数

scope内置属性

  • console.log一下$scope，没有绑定属性的$scope也不是空的，原型链上有很多属性
  • $开头的属性是可以调用的，$$开头的是禁止调用的是私有属性

生命周期

创建 -> 注册监控者 -> 模型变化 -> 检测变化 -> 销毁

  • 在定义控制器的时候创建
  • 注册监听 $watch
  • 销毁监听 $destory

$watch,$apply

注册监听，注册就添加一个$$watcher(观察者)，$apply强行进行脏值检查。