一、核心模块功能概览
完整的Angular2应用主要由6部分组成,分别是组件、模板、指令、服务、依赖注入、路由。
1.1 组件
组件包括：模板和组件类。
模板：与用户直接交互
组件类：维护组件的数据模型和功能逻辑。
1.2 路由
功能：控制组件的创建和销毁,从而驱使应用界面跳转切换。
1.3 指令
指令与模板相互关联,最重要的作用是增强模板特性,间接扩展了模板的语法。
1.4 服务
封装了若干功能逻辑的单元，可以通过依赖注入机制引入到组件内部,作为组件功能的扩展。
二、组件
2.1 组件的组成
1)组件装饰器,@Component修饰的组件类成为组件
2)组件元数据：selector、template
3)模板,每个组件关联一个模板,这个模板最终渲染到页面上。页面上的元素就是此组件实例的宿主元素。
4)组件类，组件实际也是一个普通的类,组件的逻辑都在组件类里定义并实现。
import {Component} from "@angular/core";
@Component({
selector: "contact-app",
templateUrl: "app/app.component.html",
styleUrls: ["app/app.component.css"]
})
export class AppComponent {
constructor() {}
}
2.2 组件装饰器
@Component是TypeScript语法。
2.3 组件元数据
1)selector，用于定义组件在HTML代码中匹配的标签,它将成为组件的命名标记。
2)template，为组件指定一个内敛模板。templateUrl，为组件指定一个外部模板。
3)stsles/templateUrl,模板的样式。
2.4 组件模板
组件内容最终渲染到模板的DOM元素上,DOM元素也成宿主元素。组件与宿主元素可以进行交互，交互的形式包括：显示数据、双向数据绑定、监听事件。
2.4.1 显示数据
可以使用插值语法 {{}} 来显示组件的数据。数据由组件类的成员变量替代。
2.4.2 双向数据绑定
<input [(ngModel)]="contact.birthday" >
[]实现了数据流从组件类到模板。
()实现了数据流从模板到组件
2.4.3 监听绑定
<a class = "edit" (click)="editContact()">编辑</a>
发生点击事件,就会调用组件的editContact()方法。
2.4.3 输入和输出属性
=左边：数据绑定目标
=右边：数据绑定的源
<list-item [contact]="contact" (routerNavigate)="routerNavigate($event)"></list-item>
- contact和routerNavigate都是数据绑定的目标。
- contact是属性绑定的目标,数据通过模板表达式流向目标属性contact。
- routerNavigate是事件绑定的目标。
Angular提供了输入(@Input)和输出(@Output)语法来除了组件数据的流入和流出。
export class ListItemComponent implements OnInit {
@Input() contact:any = {};
@Output() routerNavigate = new EventEmitter<number>();
constructor() {}
ngOnInit() {
}
goDetail(num: number) {
this.routerNavigate.emit(num);
}
}
三、指令
与模板关系密切,可以与DOM进行灵活交互,可以改变样式或布局。指令分为2种:结构指令和属性指令。
四、模块
4.1 模块概览
每个Angular应用至少有一个模块,作为应用的入口,这个模块称为根模块(Root Module)。通过引导运行根模块来启动Angular应用。除了跟模块,还有封装完整功能的特性模块(Feature Module)、封装一些公共构件的共享模块(Shared Module)、应用级别核心构件的核心模块(Core Module)。
4.2 引导启动
Angular通过引导运行根模块来启动应用。引导方式有两种，动态引导和静态引导。
Angular在运行之前，都需要经过编译器对模块组件等进行编译,编译之后开始启动应用渲染界面。动态引导和静态引导的区别就在编译的时机不同。
- 动态引导,将所有代码加载到浏览器,在浏览器中进行编译。
- 静态引导,编译过程前置到开发时的工程打包阶段,加载浏览器是编译之后的代码。
//动态启动
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
尾部：
至此,一个简单的Angular2的工程就可以进行渲染了。将会理解组件、模块的使用方式。接下来是路由的学习。
<全文结束>
