模块
模块就是提供相对独立功能的功能块,每一块聚焦一个聚焦一个特定业务领域。
模块的主要功能是导出一系列的类,函数和值供其他模块导入。
模块文件中的基本概念:
- @NgModule装饰器
- 装饰器修饰下的元数据概念
- imports
- declarations
- exports
- providers
- bootstrap
@NgModule装饰器
用来为模块定义元数据。
imports
导入本模块中使用的其他模块
declarations
声明当前模块中使用的组件,管道和指令列表等,包括在本模块定义的和外部引入的。
exports
导出公共部分提供给其他模块使用
providers
提供了当前模块所使用的服务提供商
bootstrap
指明哪个组件为引导组件
组件
组件文件的结构如下:
impport {Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First App</h1>'
})
export class AppComponent{ }
@Component
该装饰器会把一份元数据关联到根组件类上。
selector
为代表该组件的html元素指定简单的CSS选择器。
template
指定该组件如何渲染组件视图
双向数据绑定
如果我们希望在组件内对数据进行操作后再反馈到界面怎么处理呢?Angular2提供了一个双向数据绑定的机制。这个机制是这样的,在组件中提供成员数据变量,然后在模板中引用这个数据变量。
双向绑定后,我们通过数据成员变量就可以知道用户名和密码了,不需要在传递参数了。而成员变量的引用方式是this.成员变量
。
服务
@Injectable()
当 TypeScript 看到@Injectable()
装饰器时,就会记下本服务的元数据。如果 Angular 需要往这个服务中注入其它依赖,就会使用这些元数据。
路由/导航
路由是导航的另一个名字。路由器就是从一个视图导航到另一个视图的机制。
Angular的路由器是一个可选的外部Angular NgModule,名叫RouterModule
。路由器包含了多种服务,多种指令(RouterOutlet
,RouterLink
,RouterLinkActive
)和一套配置(Routes)。