Angular常用概念

1.模块与装饰器

Angular设计目标就是适应大型应用的开发&＃xff0c;模块的概念就是来组织不同的组件及服务。一个大型应用的最终形态就是各种不同的模块的组合

import { NgModule } from &＃39;&＃64;angular/core&＃39;;
import { BrowserModule } from &＃39;&＃64;angular/platform-browser&＃39;;
import { AppComponent } from &＃39;./app.component&＃39;;
import { HeroService } from &＃39;./hero.service&＃39;;//NgModule装饰器将AppModule类标记为Angular组件
&＃64;NgModule({ //装饰器就是一个函数&＃xff0c;作用是将元数据添加到紧跟在后面的类、类成员&＃xff08;属性、方法&＃xff09;和函数参数imports: [ BrowserModule ], //导入本模块中所需要的其他非自定义的模块providers: [ HeroService ], //服务模块&＃xff0c;并自动加入到全局的服务列表中declarations: [ AppComponent ], //声明本模块中的组件&＃xff0c;指令和管道bootstrap: [ AppComponent ] //根组件&＃xff0c;
})
export class AppModule { } //导出的根模块

2.组件、指令、管道

组件在Angular中处于中心地位&＃xff0c;但也是指令的一种&＃xff0c;我把组件看做是含有模板的指令&＃xff0c;管道就是anuglarjs中的过滤器&＃xff0c;具体有哪几种&＃xff0c;可以参考Anugular的官方API Angular内置管道
自定义组件

import { Component } from &＃39;&＃64;angular/core&＃39;;&＃64;Component({ //&＃64;Component装饰器将HeroDetailComponent类标记为Angular组件//内部的数据称为元数据&＃xff0c;其它元数据装饰器用类似的方式来指导 Angular 的行为。 //例如&＃64;Injectable、&＃64;Input、&＃64;Output等selector: &＃39;hero-detail&＃39;,templateUrl: &＃39;../somewhere.html&＃39;,styleUrls: [&＃39;./any.css&＃39;]
})export class HeroDetailComponent {//仅仅是一个类&＃xff0c;看不到Anugular框架的影子
}

自定义指令

//指令有属性型指令和结构型指令 和组件
import { Directive, ElementRef, Input } from &＃39;&＃64;angular/core&＃39;;//ElementRef注入到构造函数中&＃xff0c;这样指令才能访问DOM
//Input 将数据传入指令中
&＃64;Directive({ selector: &＃39;[appHighlight]&＃39; })
export class HighlightDirective {constructor(el: ElementRef) {el.nativeElement.style.backgroundColor &＃61; &＃39;yellow&＃39;;}
}

自定义管道

The hero&＃39;s birthday is {{ birthday | date&＃xff1a;&＃39;yyyy.MM.dd&＃39; }}

The current pipe {{ somevalue | paramStrength&＃xff1a;&＃39;number&＃39; }}

3.服务

服务可以为对数据的获取和各种处理&＃xff0c;组件就是服务的消费者&＃xff0c;通过依赖注入在组件中使用服务

import { Injectable } from &＃39;&＃64;angular/core&＃39;;
import { Logger } from &＃39;../logger.service&＃39;;&＃64;Injectable({})
export class HeroService {//服务里面注入其他的服务&＃xff0c;通过依赖注入&＃xff0c;相当于执行了new的操作&＃xff0c;又没有副作用constructor(private logger: Logger){}
}

4.生命周期

就是被Anuglar管理的组件的生命周期钩子&＃xff0c;对应的有钩子里面的方法

import { OnInit, OnDestroy } from &＃39;&＃64;angular/core&＃39;;//OnInit接口里面的ngOnInit方法
export class PeekABoo implements OnInit, OnDestroy {constructor() { }// implement OnInit&＃39;s &＃96;ngOnInit&＃96; methodngOnInit() { console.log("组件初始化");}ngOnDestroy(){console.log("组件退出时实现的方法");}
}