AngularJS2基本构造

2.NG2入门

2.1 基本构造

angularjs主要有8个构造快：

模块（module）

组件（component）

模板（template）

元数据（metadata）

数据绑定（data binding）

指令（directive）

服务（service）

依赖注入（dependency injection）

2.1.1 模块（module）

每个 Angular 应用至少有一个模块（根模块），习惯上命名为AppModule。Angular 模块（无论是根模块还是特性模块）都是一个带有@NgModule装饰器的类。装饰器是用来修饰 JavaScript 类的函数。

import { NgModule }      from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

@NgModule({

  imports:      [ BrowserModule ],

  providers:    [ Logger ],

  declarations: [ AppComponent ],

  exports:      [ AppComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

NgModule的主要属性如下:

imports :

导入其他module,其他module暴露出来的Component Directives Pipes等都可以在本mudole的组件被使用。比如导入CommonModule后就可以后就可以使用NgIf NgFor等指令。

declarations:

模块内部Components Directives Pipes的列表，声明一下这个模块的内部成员。

providers:

指令应用程序的根级别需要使用的service.(ng2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中)

bootstrap:固定写法，略.

exports:

用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部所暴露的公共成员。除非导入的这个module把它内部导入的module写到exports中。

2.1.2 元数据（metadata)

元数据告诉 Angular 如何处理一个类。

在TypeScript 中，我们用装饰器 (decorator) 来附加元数据。下面就是HeroListComponent的一些元数据。

@Component({

  moduleId: module.id,

  selector:    'hero-list',

  templateUrl: './hero-list.component.html',

  providers:  [ HeroService ]

})

export class HeroListComponent implements OnInit {

/* . . . */

}

@Component装饰器能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。

@Component的配置项包括：

moduleId: 为与模块相关的 URL（例如templateUrl）提供基地址。

selector: CSS 选择器，它告诉 Angular 在父级 HTML 中查找<hero-list>标签，创建并插入该组件。

templateUrl: 组件 HTML 模板的模块相对地址

providers: 组件所需服务的依赖注入提供商数组。这是在告诉 Angular：该组件的构造函数需要一个HeroService服务，这样组件就可以可以调用该服务了。

2.1.3 数据绑定（data binding)

<li>{{hero.name}}</li>

<hero-detail [hidden]="selectedHero"></hero-detail>

<li (click)="selectHero(hero)"></li>

<input [(ngModel)]="hero.name">

{{hero.name}}[插值表达式]在<li>标签中显示组件的hero.name属性的值。
[hidden][属性绑定] 把父组件的selectedHero的值传到子组件的hidden属性中。
(click) [事件绑定]在用户点击英雄的名字时调用组件的selectHero方法。

[(ngModel)] 双向数据绑定是重要的第四种绑定形式，它使用ngModel指令组合了属性绑定和事件绑定的功能。在双向绑定中，数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值。

2.1.4 依赖注入

依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。

constructor(private service: HeroService) { }

angularjs2 通过构造函数实现注入，和java里面的注入的方式之一借助构造函数实现依赖是一样的