angular命令、 装饰器、 生命周期简介

1.命令

ng new projectName --style=scss //创建scss的项目

npm install yarn -g 创建yarn环境 (用yarn 代替 npm)

yarn install (按照package.json安装依赖包)

 ng serve -o （运行并打开）

ng g c componentName 创建组件

ng g m moduleName 创建模块

ng g s serviceName  创建服务

ng g d directiveName 创建指令

ng g p pipeName 创建管道

ng g e enumName 创建枚举

ng g cl className 创建class

创建路由

ng generate module app-routing --flat --module=app

创建一个在某个模块内的组件

ng g c completeName -m moduleName

ng generate service serviceName -m app.module

基本介绍

@NgModuel({
    declarations: [],   // 用到的组件，指令，管道
    providers: [],      // 依赖注入服务 
    imports: [],        // 导入需要的模块
    exports: [],        // 导出的模块，跨模块交流
    entryComponents: [] // 需提前编译好的模块
    bootstrap: []       // 设置根组件

})
export class AppModule { }

根模块 APPmoudule

• declarations 声明本模块中拥有的视图类。Angular 有三种视图类：组件 指令和管道。
• exports  declarations的子集可用于其它模块的组件模板。
• imports 本模块声明的组件模板需要的类在其它模块。
• providers  服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
• bootstrap 指定应用的主视图（根组件）它是其它视图的宿主。只有根模块才能设置bootstrap属性。

2.装饰器

• @angular/core：这里包含了很多常用的模块 

• • NgModule：模块定义装饰器
  • Component：组件定义装饰器
  • Directive：指令定义装饰器
  • Pipe ：管道定义装饰器
  • PipeTransform：管道接口
  • Injectable：服务定义装饰器
  • ElmentRef：元素引用
  • ViewChild：获取子元素
  • Render：渲染
  • Input：接受参数输入
  • Output：事件输出
  • EventEmitter：触发自定义事件
• @angular/common 

• • CommonModule：通用模块，包含内置指令ngIf，ngFor

• @angular/forms 

• • FormsModule：定义模版驱动表单
  • ReactiveFormsModule：定义响应式表单
  • FormGroup, FormArray, FormControl, FormBuilder：响应式表单元素
  • Validators：表单校验
• @angular/http 

• • HttpModule：http请求模块

• @angular/router 

• • RouterModule 路由模块
  • Routes 路由数据结构

• @angular/platform-browser 

• • platformBrowser：AoT编译
  • BrowserModule：浏览器支持，注意该模块导入了CommonModule，然后导出去，所以引用了这个模块也就引用了CommonModule

• @angular/platform-browser-dynamic 

• • platformBrowserDynamic：JIT编译

3.生命周期

• constructor：构造器函数，一般用于注入服务
• ngOnChanges：检测到输入数据变化，首次触发发生在ngOnInit前。注意对象的属性发生变化时监听不到
• ngOnInit：组件初始化，通常会设置一些初始值
• ngDoCheck：手动触发更新检查 

• • ngAfterContentInit：内容初始化到组件之后
  • ngAfterContentChecked：内容变更检测之后
  • ngAfterViewInit：视图 初始化之后
  • ngAfterViewChecked：视图发生变化检测之后，这个可以用来保证用户视图的及时更新

• ngOnDestroy：组件注销时的清理工作，通常用于移除事件监听，退订可观察对象等