一、核心模块功能概览

完整的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的工程就可以进行渲染了。将会理解组件、模块的使用方式。接下来是路由的学习。

<全文结束>