angular生命周期钩子（AngularJS 官网教程重点）

本文目录

• AngularJS 官网教程重点
• angular2 怎么跟js做通信
• angularjs指令中的controller什么时候执行
• angular中的implement怎么理解
• angular怎么添加$index

AngularJS 官网教程重点

标识在线/登录/空闲未超时
避免重复提交，可能导致重复存库

4 组织目录和文件（重构）
    目的
        1.模块化-代码复用
        2.容易跟读代码
        容易定位某个功能(features)的代码段
    做法
        按功能(features)分
            为应用的每个功能(feature/section)建立目录，盛放该功能相关的文件，如 app/phone-list
            当你发现了很多功能(part)共用的内容，就放到目录如 core shared common
        使用模块(modules) - 相当于java中的包(package)
            好处：
                代码复用，甚至是跨应用的复用
            做法
                为应用的每个部分(feature/section)声明其 module，并在其中注册相关的实体(entities)如 component
                主模块(main module)声明依赖到其它各功能模块(feature/section module)
                若要在其它app中复用模块，只需
                    1.复制模块目录
                    2.给主模块添加依赖到该模块
                    3.index.html 添加新的《script》
            注意：对于要上线的产品(production-ready)，别忘了优化js文件：拼接和最小化
            示例结构，见网页
        外部模板
            频繁的请求开销如何避免，不在本教程范围，另见参考
        测试重构

5 加些简单的东西-手机信息全文搜索
    外部模板，代码见网页
        管道，filter 函数
            ng-repeat=“phone in $ctrl.phones | filter:$ctrl.query“
            ng特性：数据绑定 - 数据模型的改变会立即体现到视图
                此章节，输入框内容的改变会立即体现为手机列表的改变
    E2E测试
        单元测试适用于：测试如 controller 这样的自编写js代码
        E2E 测试适用于：测试如 template, DOM 操作，组件间互操作性，service

6 双向绑定
    控制列表顺序

7 XHR，依赖注入
    通过controller构造方法的参数注入，如 function PhoneListController($http)
    防止js压缩时将方法参数压缩造成注入失效，[注入服务…, Controller构造]

8 模板链接，图片

9 路由，多视图
    本节，创建布局模板(layout template)，包入多个路由视图，通过使用 ngRoute 模块
    依赖
        bower.json中添加依赖
            “angular-route“:“1.5.x“
            执行 npm install
            注意：最近一次执行如上命令时，如果有新的AngularJS版本释出，会出现冲突问题
                解决：删掉 /bower_components 目录，重新执行如上命令
    注入器
        应用启动时，创建注入器
        注入器按如下步骤工作
            1. 加载自定义模块
            2. 加载所有定义在以上模块中（配制在config方法中）的供给器
            3. 被请求注入时，由供给器实例化各service及其依赖(懒加载)，作为参数注入到目标方法中
    供给器
        创建 service
        暴露 configuration API
            控制 service 的创建和运行时行为
        供给器只能注入到 config 方法中
    ng-view属性
        在布局模板中，无值，用以包入其他路由视图（串式组件名）
    locationProvider 
        $location 服务的出现，是为了给那些不支持H5 push-state 导航的浏览器提供hash前缀支持
    子模块依赖
        为了复用，尽量独自声明所依赖的模块，不要因为上级已有依赖而省略当前模块的依赖声明
10 更多模板
    本节实现手机明细视图
11 自定义过滤器
    本节，用自定义的过滤器，将手机详情页面的true和false显示为对钩\u2713和叉号\u2718(unicode字符)
    自定义“检查标记过滤器”
        这是个通用过滤器，定义在core目录下(core模块下)
            如何定义，同 component 定义，在module后调用filter方法，放在单独的文件 .filter.js 
        将core模块js和自定义过滤器js，加入到index.html
        使用过滤器，语法如 {{expression | filter}}
12 事件处理器
    AngularJS指令包含所有原生JS事件
13 REST，自定义服务
    本节，获取数据换用另一方式
        自定义（封装）一个服务，作为RESTful客户端，写更少的代码即可发送请求
            (只需调用封装体，不必操作底层的$http API,http method和URLs)
    依赖
        RESTful功能由AngularJS的ngSource模块提供，在bower.json添加如下依赖：
            “angular-resource“:“1.5.x“
            执行 npm install
            注意冲突问题，见 9 路由
    注册自定义服务到模块core.phone下
        factory方法
        具体js代码见网页：代码，相关联的依赖声明
            phone.module.js 模块声明，依赖 ngResource
            phone.service.js 
    index.html 包入如下新《script》
        angular-resource.js
        phone.module.js
        phone.service.js
    重写原来的 phone-list 和 phone-detail 模块内容
        通过调用自封装的RESTful客户端，替换原来的 $http 操作
    factory 定义和调用明细，见API
14 动画(Animations)
    本节，将在之前模板顶部添加CSS和JS动画，以改善our APP
        ngAnimate模块
        需用内置指令，自动触发目标动画的钩子
        动画被发现时，会在给定时间跟随某元素的DOM操作而执行
            (如增删节点在ngRepeat，或增删class属性在ngClass)
    依赖
        bower.json
            “angular-animate“:“1.5.x“
            “jQuery“:“3.2.x“ 用于做JS动画
    index.html
        《link》 app.animations.css 编写CSS动画
        app.animations.js 编写JS动画
        jQuery和AngularJS版本一致性说明，见网页

angular2 怎么跟js做通信

组件之间的共享可以有好几种方式
父-》子 input 方式

import {Component,Input} from ’angular2/core’;
@Component({
selector: ’child’,
template: `
《h2》child {{content}}《/h2》
`
})
class Child {
@Input() content:string;
}

@Component({
selector: ’App’,
directives: [Child],
template: `
《h1》App《/h1》
《child [content]=“i“》《/child》
`
})
export class App {

i:number = 0;

constructor() {
setInterval(()=》 {
this.i++;
}, 1000)
}

}

子-》父 output 方式

import {Output,EventEmitter,Component} from ’angular2/core’;

@Component({
selector: ’child’,
template: `
《h2》child《/h2》
`
})
class Child {
@Output() updateNumberI:EventEmitter《number》 = new EventEmitter();
i:number = 0;

constructor() {
setInterval(()=》 {
this.updateNumberI.emit(++this.i);
}, 1000)
}
}

@Component({
selector: ’App’,
directives: [Child],
template: `
《h1》App {{i}}《/h1》
《child (updateNumberI)=“numberIChange($event)“》《/child》
`
})
export class App {

i:number = 0;

numberIChange(i:number){
this.i = i;
}

}

子获得父实例
如果不了解forwardRef用处的的可以看 #11

@Host 表示这个Injector必须是host element在这里可以理解为 parent
import {Host,Component,forwardRef} from ’angular2/core’;

@Component({
selector: ’child’,
template: `
《h2》child《/h2》
`
})
class Child {

constructor(@Host() @Inject(forwardRef(()=》 App)) app:App) {
setInterval(()=》 {
app.i++;
}, 1000);
}
}

@Component({
selector: ’App’,
directives: [Child],
template: `
《h1》App {{i}}《/h1》
《child》《/child》
`
})
export class App {
i:number = 0;
}

父获得子实例
子元素指令在父constructor时是获取不到的，所以必须在组件的ngAfterViewInit生命周期钩子后才能获取，如果对组件生命周期不了解的话，可以参考#56
import {ViewChild,Component} from ’angular2/core’;

@Component({
selector: ’child’,
template: `
《h2》child {{i}}《/h2》
`
})
class Child {
i:number = 0;
}

@Component({
selector: ’App’,
directives: [Child],
template: `
《h1》App {{i}}《/h1》
《child》《/child》
`
})
export class App {

@ViewChild(Child) child:Child;
ngAfterViewInit() {
setInterval(()=》 {
this.child.i++;
}, 1000)
}

}

service 方式
import {Component,Injectable} from ’angular2/core’;

@Injectable();
class KittencupService {
i:number = 0;
}

@Component({
selector: ’child’,
template: `
《h2》child {{service.i}}《/h2》
`
})
class Child {

constructor(public service:KittencupService){

}
}

@Component({
selector: ’App’,
directives: [Child],
providers: [KittencupService],
template: `
《h1》App {{i}}《/h1》
《child》《/child》
`
})
export class App {

constructor(service:KittencupService) {
setInterval(()=》 {
service.i++;
}, 1000)
}

}

service EventEmitter方式
import {Component,Injectable,EventEmitter} from ’angular2/core’;

@Injectable()
class KittencupService {
change: EventEmitter《number》;

constructor(){
this.change = new EventEmitter();
}
}

@Component({
selector: ’child’,
template: `
《h2》child {{i}}《/h2》
`
})
class Child {

public i:number = 0;

constructor(public service:KittencupService){

service.change.subscribe((value:number)=》{
this.i = value;
})
}
}

@Component({
selector: ’App’,
directives: [Child],
providers: [KittencupService],
template: `
《h1》App {{i}}《/h1》
《child》《/child》
`
})
export class App {

i:number = 0;

constructor(service:KittencupService) {
setInterval(()=》 {
service.change.emit(++this.i);
}, 1000)
}

}

angularjs指令中的controller什么时候执行

整个 AngularJs 的生命周期;分为两个阶段:

第一个阶段是编译阶段: 

代码实例：

输出结果：

总结：指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为，但链接函数只能在当前内部指令中定义行为，且无法在指令间复用.link函数可以将指令互相隔离开来，而controller则定义可复用的行为。

angular中的implement怎么理解

可以理解为实现接口

angular自带了封装好了若干的生命周期钩子

每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上 ng 前缀构成的。比如，OnInit 接口的钩子方法叫做 ngOnInit， Angular 在创建组件后立刻调用它，

其他生命周期钩子还有 ngOnChanges(),ngDoCheck(),ngAfterContentInit()

angular怎么添加$index

通过Angular的话可以通过下面四种方法 1、event 这里可以有两种方式，一种是$scope.$emit，然后通过监听$rootScope的事件获取参数；另一种是$rootScope.$broadcast，通过监听$scope的事件获取参数。 这两种方法在最新版本的Angular中已经没有性能区别了，主要就是事件发送的方向不同，可以按实际情况选择。 2、service 可以创建一个专用的事件Service，也可以按照业务逻辑切分，将数据存储在相应的Service中，因为已经有人提过了就不赘述了。 3、$rootScope 这个方法可能会比较dirty一点，胜在方便，也就是把数据存在$rootScope中，这样各个子$scope都可以调用，不过需要注意一下生命周期 4、直接使用$$nextSibling及类似的属性 类似的还有$scope.$parent。这个方法的缺点就更多了，官方不推荐使用任何$$开头的属性，既增加了耦合，又需要处理异步的问题，而且scope的顺序也不是固定的。不推荐