angularjs与html之模块

简介

angular应用是模块化的，并且angular有自己的模块系统，它被称为_angular模块或_ngmodules。
每个angular应用至少有一个根模块，习惯上命名为AppModule。
根模块在一些小型应用中可能是唯一的模块，大多数应用会有很多特性模块，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
无论是根模块还是特性模块，都是一个带有‘@NgModule’装饰器的类。
装饰器是用来修饰JavaScript类的函数。angular有很多装饰器，它们负责把元数据附加到类上，以了解那些类的设计意图以及它们如何工作。
NgModule是一个装饰器函数，它接收一个用来描述模块属性元数据对象。其中最重要的属性是:

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

  实例

  下面是一个简单的根模块:

  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 { }

AppComponent的export语句只是用于演示如何导出的，它在这个例子中并不是必须的。 根模块不需要导出任何东西，因为其它组件不需要导入根模块。
然后我们通过引导根模块来启动应用。在开发期间，你通常在一个main.ts文件中引导AppModule，就像这样:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platfromBrowserDynamic().bootstrapModule

模块库

angular提供了一组JavaScript模块。可以把它们看做库模块。每个angular库的名字都带有@angular前缀。
用npm包管理工具安装它们，用JavaScript的import语句导入其中某些部件。
例如，像下面这样，从@angular/core库中导入component装饰器:

import { Component } from '@angular/core';

还可以使用JavaScript的导入语句从angular库中导入angular模块。

import { BrowserModule } from '@angular/platform-browser';

在上面那个简单的根模块的例子中，应用模块需要BrowserModule的某些素材。要访问这些素材，就得把它加入@NgModule元数据的imports中，像这样:

imports : [BrowserModule],

这种情况下，你同时使用了angular和JavaScript的模块化系统。