Angular入门系列（三） Angular中的组件、模块与服务

组件

组件就是一个html+css+js的集合体，可以是一个按钮，一个输入框，一个弹层，或者一个页面，每个组件都有它自己外观和行为。

其中：

Css定义了组件的样式：比如字体大小，背景色

Ts定义了组件行为：比如单击发生什么，输入发生是么

Html定义了组件的内容：比如有标题或者文章内容

下面的这些都是组件

比如界面上的控件：

也可以是对话框

当然也可以是页面

 

由此可以看出，组件本质是页面上的一个区域，一个功能块，具有自己的外观和行为

并且可以相互嵌套

比如对话框组件由按钮组件和文本组件构成，页面组件由表格组件，按钮组件构成。

基于组件的好处是可以避免提高代码的重用型

 

 

模块

Angular 应用是模块化的，它拥有自己的模块化系统，称作 NgModule。 一个 NgModule 就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。

根据组件的概念可知， 组件才是用户可以看到的，直接操作的对象，模块就是用来组织和归类组件的一块功能。下面是一张系统模块划分图示例

app模块：整个应用的根模块，表示整个应用的功能。

订单模块：专注于订单业务和页面集合

用户模块：专注于用户模块的页面集合

重点：一个组件必须且只能属于一个模块

这里面有两层含义：

（1）组件必须属于一个模块，如果这个组件不属于任何模块，则它无法被angular加载并显示在界面上

（2）组件只能属于一个模块，比如上面的订单页面组件，属于订单模块，就不能再把他划给用户模块。

 

下面来看看ngModule的用法

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

imports:  导入其他模块，表示该模块依赖其他模块的组件

declarations: 声明哪些组件属于该模块

exports:   声明哪些组件可以被导出，其他模块引入该模块时，可以使用该模块导出组件

providers：申明该模块使用哪些service（service后面将会讲解）

bootstrap：模块的启动组件（这个一般在app根模块才会使用，后面会讲解）

 

模块起到的作用：

（1）将系统的不同功能的组件分门别类

（2）确定不同模块的依赖关系，可以实现懒加载，提高启动速度

（3）可以避免组件重名带来的问题，只要保证同一个模块名字一致就行

 

服务

服务本质上是实现一定内聚功能的代码块，它常常表现为一个class

（类似于java中service层实现类，其实这部分的和spring用的同一种思想-依赖注入）

1 先定义service

@Injectable()
export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

这个@injectable()表示这个类可以被其他组件引用

（java中相当于@Service注解）

2 在模块中声明，表示该模块使用此service

@NgModule({
  .......
  providers:    [ Logger ],
  .....

})

 

3 在需要的组件中通过constructor构造器注入

export class HelloComponent {

  constructor(
    private logger: Logger) { }

  show() {
    this.logger.warn("这是一个警告");
  }
}