1.x系列的angular

概念

• dom解耦
• 使用typescript
• 双向数据绑定
• 依赖注入 dependency injector 注入器injector

---

常见的使用方式

• ng-App xmlns:ng="" id="ng-app" ng-init ng-model
• 模板文件template -> 编译器compiler(标记)) -> 视图（view）
• 标记 directive 为页面添加特定行为 {{ expression|filter }}
• 作用域scope 模块module 模型model 控制器controller函数 ng-controller ng-repeat ng-click

    对应的js文件处理对应页面的数据和逻辑
    angular.module(xxx,[])
        .controller(xx,function() {
            this.xx = xx;
            this.fnName = function fnName(){
                <!--  -->
            };
        })

• 与视图无关的业务逻辑 service

    注入器根据依赖关系创建对象传递给对象工厂
    angular.module(xx1,[xx2])
     .controller(xxx1,[xx2,function(xx2) {
         <!--  -->
     }])
     angular.module(xx2)
     .factory(xx2,function() {
         return {
             <!--  -->
         }
     })

• 控制器controller 创建子级作用域 $scope

    var myApp = angular.module('xx',[])
    myApp.controller('xxx',['$scope',function($scope) {
        $scope.xx =xx;
        <!--  -->
    }])
    scope继承上一级，可以使用上一级scope的内容

作用域scope

• 存储数据模型的对象
• 使用$watch监听表达式的变化(脏值检查)
• 层级结构 对应dom结构 $rootScope
• 基于作用域的事件传播 emit向上 apply设置重回angular的上下文 $digest

---

生命周期

• 创建期 $injector scope
• 模板链接阶段创建 $watch
• 在scope.$apply()中数据模型变化
• 数据模型变化监测 在$digest之后
• 销毁作用域 $destroy

与浏览器事件轮询整合

• 隐式或者显式进入angular上下文 通过scope.evalAsync 异步任务队列

依赖注入 DI(dependency injection)

• injector 依赖注入器 $inject

    xxmodule.factory(xxx,['xx',function(renameXX) {
        //
    }])

模板 template

• 指令、过滤器、表达式

angular使用css类

• ng-scope ng-binding ...

过滤器（filters）

• {{表达式 | filters...}} {{124 | number:2}}
• 控制器和服务中使用过滤器
• 自定义过滤器
  .filter(xx,function(){ return function(xx,xx) { // } })

表单 Forms

• 控件 验证 ng-model ng-valid ng-invalid ng-dirty ng-pristine

指令 Directives 组件components component router Animations 动画

• 自定义动画 $animate

---

供应者 Providers

• value
• factory图纸
• service图纸

$location

2.x以上angular

使用

• .html .css .ts
• *ngFor [属性] *ngIf (事件名) @input xx;
• @Output EventEmitter emit()
• RouterModule ActivatedRoute [routerLink] = "['xx',xx]"

    this.route.paramMap.subscribe(params => {
        params.get(xx)
    })