慕课网angular2一小时入门笔记（一）

元素：组件，元数据，模板，数据绑定，服务，指令，模块

header

contaclist：contact，contactApp

footer

组件js +html +css

定义输入输出

全生命周期支持

constructor构造器初始化

onChanges第一次触发数据变化勾子

onInit初始化

onChanges运行期间触发数据变化勾子

onDestroy组件销毁前

@Component({//装饰器：赋予一个类更丰富的信息（元数据）

selector:'hello' ,//元数据找标签:

template:'{{greeting}}' //模板string或url路径

})

export class HelloComponet{ //组件类

privategreeting:string;

constructor(){

this.greeting='hello,Angular2!';

}

}

属性绑定：[value]

//单向

//单向

事件绑定：（keyup）

//单向

双向绑定：[(ngModel)]

//双向

组件是指令的一种：

指令：属性指令：改变模板的外观或者行为，如样式等

结构指令：改变组件模板的Dom结构，如ngif用来插件入或者移除Dom结点

@Directive({

selector:'[highlight]'

})

export class HighlightDirective{

constructor(el:ElementRef,renderer:Renderer){

render.setElementStyle(el.nativeElement,'backgroundColor','yellow')

}

}

服务：是实现专一目的的逻辑单元，如日志服务

export class LoggerService{

constructor(){}

debug(msg:string){

console.log(msg)

}

error(msg:string){

console.error(msg);

}

}

依赖注入

providers:[LoggerService]

constructor:(logger:LoggerService)

分层注入

根组件注入LoggerService（单例）子组件也有注入

在子组件重新注入：组件及子组件也是分层注入

模块：

模块有两层含义

框架代码以模块形式组织（文件模块）关注代码层面

功能单元以模块形式组织（应用模块）关注应用层面

import{Http} from "@angular/http" //导入模块

//@Component装饰器

import {Component} from "@angular/core"

// @Directive装饰器

import {Directive} from "@angular/core"

import {ElementRef,Renderer} from"@angular/core"

应用模块

模块A:组件服务指令

模块B:组件服务指令

模块C:组件服务指令