非常教程

AngularJS参考手册

引导启动

启动过程

前提条件

对下列知识有基本的了解:

  • JavaScript 模块与 NgModules。

NgModule 用于描述应用的各个部分如何组织在一起。 每个应用又至少一个 Angular 模块,模块就是你用来启动此应用的模块。 按照惯例,它通常命名为 AppModule

如果你使用 CLI 来生成一个应用,其默认的 AppModule 是这样的:

content_copy/* JavaScript imports */import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; /* the AppModule class with the @NgModule decorator */@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    FormsModule,    HttpModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

import 语句之后,是一个带有 @NgModule 装饰器的类。

@NgModule 装饰器表明 AppModule 是一个 NgModule 类。 @NgModule 获取一个元数据对象,它会告诉 Angular 如何编译和启动本应用。

  • declarations —— 该应用所拥有的组件。
  • imports —— 导入 BrowserModule 以获取浏览器特有的服务,比如 DOM 渲染、无害化处理和位置(location)。
  • providers —— 各种服务提供商。
  • bootstrap —— 组件,Angular 创建它并插入 index.html 宿主页面。

默认的 CLI 应用只有一个组件 AppComponent,所以它会同时出现在 declarationsbootstrap 数组中。

declarations 数组

该模块的 declarations 数组告诉 Angular 哪些组件属于该模块。 当你创建更多组件时,也要把它们添加到 declarations 中。

每个组件都应该(且只能)声明(declare)在一个 NgModule 类中。 如果你使用了未声明过的组件,Angular 就会报错。

declarations 数组只能接受可声明对象。可声明对象包括组件、指令和管道。 一个模块的所有可声明对象都必须放在 declarations 数组中。 可声明对象必须只能属于一个模块,如果同一个类被声明在了多个模块中,编译器就会报错。

这些可声明的类在当前模块中是可见的,但是对其它模块中的组件是不可见的 —— 除非把它们从当前模块导出, 并让对方模块导入本模块。

下面是哪些类可以添加到 declarations 数组中的例子:

content_copydeclarations: [
  YourComponent,
  YourPipe,
  YourDirective
],

每个可声明对象都只能属于一个模块,所以只能把它声明在一个 @NgModule 中。当你需要在其它模块中使用它时,就要在那里导入包含这个可声明对象的模块。

只有 @NgModule 可以出现在 imports 数组中。

通过 @NgModule 使用指令

使用 declarations 数组声明指令。在模块中使用指令、组件或管道的步骤如下:

  1. 从你编写它的文件中导出它。
  2. 把它导入到适当的模块中。
  3. @NgModuledeclarations 数组中声明它。

这三步的结果如下所示。在你创建指令的文件中导出它。 下面的例子中,item.directive.ts 中的 ItemDirective 是 CLI 自动生成的默认指令结构。

src/app/item.directive.ts

content_copyimport { Directive } from '@angular/core';

@Directive({
  selector: '[appItem]'
})
export class ItemDirective {
// code goes here
  constructor() { }

}

重点在于你要先在这里导出它才能在别处导入它。接下来,使用 JavaScript 的 import 语句把它导入到 NgModule 中(这里是 app.module.ts)。

src/app/app.module.ts

content_copyimport { ItemDirective } from './item.directive';

同样在这个文件中,把它添加到 @NgModuledeclarations 数组中:

src/app/app.module.ts

content_copydeclarations: [
  AppComponent,
  ItemDirective
],

现在,你就可以在组件中使用 ItemDirective 了。这个例子中使用的是 AppModule,但是在特性模块中你也可以这么做。 要进一步了解指令,参见属性型指令和结构型指令。 这些也同样适用于管道和组件。

记住:组件、指令和管道都只能属于一个模块。你在应用中也只需要声明它们一次,因为你还可以通过导入必要的模块来使用它们。这能节省你的时间,并且帮助你的应用保持精简。

imports 数组

模块的 imports 数组只会出现在 @NgModule 元数据对象中。 它告诉 Angular 该模块想要正常工作,还需要哪些模块。

列表中的模块导出了本模块中的各个组件模板中所引用的各个组件、指令或管道。在这个例子中,当前组件是 AppComponent,它引用了导出自 BrowserModuleFormsModuleHttpModule 的组件、指令或管道。 总之,组件的模板中可以引用在当前模块中声明的或从其它模块中导入的组件、指令、管道。

你还没有提供任何服务,但是很快就会创建一些,而且可能也会选择在这里提供它们。

providers 数组

providers 数组中列出了该应用所需的服务。当直接把服务列在这里时,它们是全应用范围的。 当你使用特性模块和惰性加载时,它们是范围化的。要了解更多,参见服务提供商。

bootstrap 数组

应用是通过引导根模块 AppModule 来启动的,根模块还引用了 entryComponent。 此外,引导过程还会创建 bootstrap 数组中列出的组件,并把它们逐个插入到浏览器的 DOM 中。

每个被引导的组件都是它自己的组件树的根。 插入一个被引导的组件通常触发一系列组件的创建并形成组件树。

虽然也可以在宿主页面中放多个组件,但是大多数应用只有一个组件树,并且只从一个根组件开始引导。

这个根组件通常叫做 AppComponent,并且位于根模块的 bootstrap 数组中。

关于 Angular 模块的更多知识

要进一步了解常见的 NgModules 知识,参见 关于模块的常见问题。

引导启动相关

AngularJS

Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身,为你解决开发方面的各种挑战。

AngularJS目录

1.快速上手 | quick start
2.语言服务
3.安全
4.环境准备与部署
5.Service Worker
6.保持最新
7.从 AngularJS 升级
8.服务端渲染
9.Visual Studio 2015 快速上手
10.风格指南
11.国际化
12.测试
13.路由与导航
14. 教程 | Tutorial
15.架构
16.组件与模板
17.表单
18.可观察对象与RxJS
19.引导启动
20.Angular 模块
21.依赖注入
22.HttpClient
23.词汇表
24.AngularJS 应用
25.AngularJS 模块
26.AngularJS 事件
27.AngularJS HTML DOM
28.AngularJS 过滤器
29.AngularJS 控制器
30.AngularJS 指令
31.AngularJS 表达式
32.AngularJS 简介
33.AngularJS 参考手册
34.AngularJS 实例
35.AngularJS 输入验证
36.AngularJS 表单
37.AngularJS SQL
38.AngularJS 表格
39.AngularJS Http
40.AngularJS 包含
41.AngularJS Bootstrap
42.AngularJS API
43.AngularJS ng-checked 指令
44.AngularJS ng-change 指令
45.AngularJS ng-blur 指令
46.AngularJS ng-bind-template 指令
47.AngularJS ng-bind-html 指令
48.AngularJS ng-bind 指令
49.AngularJS ng-app 指令
50.AngularJS Scope(作用域)
51.AngularJS ng-model 指令
52.AngularJS ng-dblclick 指令
53.AngularJS ng-cut 指令
54.AngularJS ng-csp 指令
55.AngularJS ng-copy 指令
56.AngularJS ng-controller 指令
57.AngularJS ng-cloak 指令
58.AngularJS ng-click 指令
59.AngularJS ng-class-odd 指令
60.AngularJS ng-class-even 指令
61.AngularJS ng-class 指令
62.AngularJS ng-keyup 指令
63.AngularJS ng-keypress 指令
64.AngularJS ng-keydown 指令
65.AngularJS ng-init 指令
66.AngularJS ng-include 指令
67.AngularJS ng-if 指令
68.AngularJS ng-href 指令
69.AngularJS ng-hide 指令
70.AngularJS ng-focus 指令
71.AngularJS ng-disabled 指令
72.AngularJS ng-non-bindable 指令
73.AngularJS ng-mouseup 指令
74.AngularJS ng-mouseover 指令
75.AngularJS ng-mousemove 指令
76.AngularJS ng-mouseleave 指令
77.AngularJS ng-mouseenter 指令
78.AngularJS ng-mousedown 指令
79.AngularJS ng-model-options 指令
80.AngularJS ng-model 指令
81.AngularJS ng-list 指令
82.AngularJS ng-style 指令
83.AngularJS ng-srcset 指令
84.AngularJS ng-src 指令
85.AngularJS ng-show 指令
86.AngularJS ng-selected 指令
87.AngularJS ng-repeat 指令
88.AngularJS ng-readonly 指令
89.AngularJS ng-paste 指令
90.AngularJS ng-options 指令
91.AngularJS ng-open 指令
92.AngularJS ng-value 指令
93.AngularJS ng-switch 指令
94.AngularJS ng-submit 指令
95.AngularJS 服务(Service)
96.AngularJS Select(选择框)
97.AngularJS 动画
98.AngularJS 依赖注入