框架/库

Angular快速入门

人嘛，就是应该活到老学到老。新事物不断在出现，要是放弃学习，那么机会也会放弃你。这是一个简单的入门笔记，学习 Angular 就从这里开始吧。

核心概念

现在以 Angular2 为学习范本。

1、组件

组件包含单独的 js/html/css，可以拥有独立的功能。组件间通过输入输出接口进行交互。

组件的生命周期：

Constructor 构造器初始化，变量的初始赋值
onChanges 第一次触发数据变化钩子，接收父组件的传入数据
onInit 组件初始化
onChanges 运行期间触发数据变化钩子
onDestroy 组件销毁前

组件示例： 

//import Component
@Component({//装饰器,赋予一个类更丰富的信息，即元数据
	selector:'hello',//元数据
	template:'<p>{{greeting}}</p>'//模板，内联
	templateUrl:'path/to/hello.html'//模板，外联，内外只能2选1
})
export class HelloComponent{//组件类
	private greeting :string;
	constructor(){
		this.greeting='Hello Angular2!'
	}
}
//生成 html 页面：
<hello>
	<p>Hello Angular2!<p/>
<hello/>

数据绑定

属性绑定：

<input [value]="myData"/>

事件绑定：

<input (keyup)="handle($event)"/>

双向绑定：

<input [(ngModel)]="myData"/>

2、指令：Direction 作用于组件上的模板
（1）属性指令：改变组件模板的外观或行为，如样式等
（2）结构指令：改变组件模板的 DOM 结构，如 ngIf 用来插入或者移除DOM 节点

指令示例：

//textColor="red"
template:"<p [style.color]='textColor'>{{greeting}}<p/>"
渲染出页面：
<p style="color:red">Hello Angular2!<p/>

指令也可以自定义。

//import ElementRef,Renderer
@Directive({
	selector:'[highlight]',//选择器加方括号表示当做元素属性使用
})
export class HighlightDirective{
	constructor(el: ElementRef,renderer: Renderer){
		renderer.setElementStyle(el.nativeElement,'backgroundColor','yellow')
	}
}
template:'<p highlight>{{greeting}}<p/>'

3、服务与依赖注入：服务是实现专一目的的逻辑单元，如日志服务。用在组件内部，作为组件功能的扩展。依赖注入是组件引入外部功能（服务）的一个机制。
服务示例：

export class LoggerService{
	constructor(){}
	debug(msg:string){
		console.log(msg);
	}
	error(msg:string){
		console.log(msg);
	}
}

依赖注入：

//import LoggerService
@Component({
	selector:'Hello',
	template:'<p>{{greeting}}<p/>',
	providers:[LoggerService]//依赖注入配置
})
export class HelloComponent1{
	private greeting:string;
	constructor(logger:LoggerService){//自动传入LoggerService实例
		this.greeting='Hello Angular2';
		logger.debug('构造函数执行完毕');
	}
}

分层注入：在适当的位置重新创建一个新的实例，在对应的子组件注入服务即可。

4、模块：文件模块和应用模块

文件模块：

@angular/core 核心模块
@angular/common 通用模块
@angular/forms 表单模块
@angular/http 网络模块
...

文件模块的使用：

//网络模块
import {http} from '@angular/http'
//@Componentz 装饰器
import {Component} from '@angular/core'
//@Directive 装饰器
import {Directive} from '@angular/core'
import {ElementRef,Renderer} from '@angular/core'

应用模块：组件+指令+服务，按功能进行包装。跨模块不能直接使用，必须通过导入导出。

@NgModule({
	declarations:[//包装组件或指令等
		AppComponent,
		SomeDirective
	],
	providers:[LoggerService],//依赖注入
	imports:[OtherModule],//导入其他模块
	bootstrap:[AppComponent],//设置根组件
	exports:[SomeDirective]//导出组件或指令等
})
exports class AppModule {}