angular2 系列教程(四)Module
一. 模块Module
- 定义: 提供相对独立功能的功能块
- 特点: 每个Angular至少有一个模块类——根模块 src\app\app.module.ts(服务开启的时候先引导根模块来启动应用)
-
-
@NgModule装饰器:用来为模块定义元数据
-
declarations声明:
- 作用:引入引导性组件 AppComponent和其他创建的组件
- 特点: 声明的组件在module范围内都可以直接使用
-
imports引入:
- 作用:用来引入其他辅助模块
-
providers:
- 作用:用来列出在这个模块中注入的服务(service)
-
bootstrap:
- 作用:指出那个组件是引导性组件( 当Angular引导应用时,它会在DOM中渲染这个引导性组件,并把结果放进index.html的该组件的元素标签中)
-
declarations声明:
-
@NgModule装饰器:用来为模块定义元数据
-
引导模式
- JIT模式(即时编译器):通过在main.ts中引导AppModule来启动应用(开发调试时候默认采用这个模式)
- AOT模式(预编译器):静态引导,可以生成更小更快的应用,推荐使用,Angular编译器作为构建流程的一部分提前运行,生成一组类工厂。核心是 AppModuleNgFactory。引导预编译的AppModuleNgFactory的语法和动态引导AppModule
二. 封装独立模块
- 建立module:新建文件" src\app\xxx\xxx.module.ts"
- 注意:
- imports数组中
- BrowserModule是公开该模块所有组件,除了根模块不需要导入
- CommonModule 提供了很多应用程序中常用的指令,包括 NgIf 和 NgFor 等,除了根模块都应该导入这个
- imports数组中
-
建立独立的路由
- 将根模块中的路由复制过来,然后更改forRoot(只能用于根目录)改为forChild。
-
更改根路由
- 从指向这个组件,改为重定向为子路由的路径
-
- 建立web服务(看路由那节)