import { NgModule} from '@angular/core';BrowserModule '@angular/platform-browser' @NgModule({ imports:[], providersLogger declarationsAppComponent exports bootstrap]})exportclassAppModule}

 platformBrowserDynamic  '@angular/platform-browser-dynamic' './app.module' platformBrowserDynamic().bootstrapModule(AppModule);

 './app.component';

}

Component;

在上面这个简单的 root module 例子里面，应用程序模块需要在BrowserModule里面的内容。 为了可以访问，像这样把它增加到@NgModule元数据中。

HeroListComponentimplementsOnInit heroesHero[]; selectedHero constructor(private serviceHeroService) ngOnInit()this.heroes =servicegetHeroes(); selectHero(heroselectedHero  hero}

Angular在用户在应用程序中移动时（浏览时）创建，更新和销毁组件。您的app可以就像上面生命的ngOnInit()那样，通过可选的lifecycle hooks（生命周期的挂钩）在每一个时刻进行响应。

模板

您定义一个组件视图和它相伴随的模板。一个模板是一种HTML形式，告诉Angular如何渲染组件。

一个模板看起来像常规HTML，除了一些差异。下面是针对我们的HeroListComponent的一个模板HeroListComponent：

   
   

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

    
    

   
   
<h2>Hero List</h2><p><i>Pick a hero from the list</i></p><ul> <li *ngFor="let hero of heroes" (click)="selectHero(hero)"> {{hero.name}} </li></ul><hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

虽然这个模板使用典型的HTML元素像<h2>和<p>，它也有一些不同。类似*ngFor,{{hero.name}},107); padding:0px 4px">(click),107); padding:0px 4px">[hero],和<hero-detail>的代码，使用的是 Angular'stemplate syntax（Angular 模板语法）。

在模板的最后一行时，这个<hero-detail>标签是表示一个新组件的自定义元件，HeroDetailComponent。

该HeroDetailComponent是一个不同于你一直在看的HeroListComponent的组件。该HeroDetailComponent（代码没有显示）呈现一个特定的英雄的事实，即用户从所呈现的列表HeroListComponent中选择英雄。该HeroDetailComponent是HeroListComponent的孩子。

请注意如何<hero-detail>轻松地位于原生的HTML元素中。自定义组件与原生HTML在同一布局中无缝组合。

@Component moduleIdmoduleid,100)"> selector 'hero-list' templateUrl 'hero-list.component.html'HeroService /* . . . */}

<li>{{hero.name}}</li> <hero-detail [hero]="selectedHero"></hero-detail><li (click)="selectHero(hero)"></li>

指示符

Angular模板是动态的。当Angular渲染它们的时候，它根据指示符的指导来改变DOM。

一个指示符是一个带有一个@Directive装饰器的类。一个组件是一个directive-with-a-template（指示符和一个模板）；@Component装饰器实际上是一个@Directive装饰器扩展后，带有面向模板的功能。

两个其它类型的指示符也存在：structural和attribute指示符。

它们尝试去在一个元素标签中显示（就像attributes所做），有时是通过名字，但是更常见的是作为一个分配或者绑定的目标。

Structural指示符通过增加、移除和替换在DOM中的元素来改变布局。

这个example template使用了两个内建的structural指示符：

 *ngFor="let hero of heroes"></li> *ngIf></hero-detail>

• *ngFor告诉Angular为每一个在heroes列表中的英雄生成一个<li>。
• *ngIf包含了HeroDetail组件，仅当一个选择的英雄存在的时候。

Attribute指示符修改了一个存在的元素的显示或者表现。在模板中，他们看起来像规则的HTML属性，所有有这样的名字。

ngModel指示符，实现了双向数据绑定，是一个attribute指示符的例子。ngModel通过设置它的显示值属性和对于变化事件的响应，修改了一个已经存在元素的表现 (典型的例如<input>) 。

Angular还有一些指示符或者改变了布局结构 (例如，ngSwitch) 或者修改了DOM元素或组件的一些方面(例如,ngStyle和ngClass).

当然，你也可以编写你自己的指示符。类似HeroListComponent的组件就是一种自定义指示符。

服务

服务是一个广阔的分类，包含了任意的值，函数，或者你的应用需要的功能。

几乎所有事物都可以是一个服务。一个服务典型上是一个类，带着一个狭窄的定义好的目的。它将做指定的事情并且把它做好。

例子包括：

• 日志服务
• 数据服务
• 消息总线
• 税收计算器
• 应用程序配置

Angular关于服务没有什么特别的内容。Angular没有关于服务的定义。没有服务基础类，没有地方去注册服务。

但是服务是任何Angular程序的基础。组件是服务的大的消费者。

这里有一个关于服务的类的例子，输出日志到浏览器控制台：

 logmsg any consolelog); errorerror warnwarn}

HeroService获取英雄并且把他们返回到一个解析了的Promise。这个HeroService依赖这个Logger服务，同时另外一个BackendService处理着服务器通信的工作。

在组件层面注册意味着你用那个组件的每一个新实例去获取一个新的服务的实例。

关于依赖注入需要记住的点：

• 依赖注入是装配到Angular结构上的，可以在任何地方使用。

• 这个注射器是主要的装置。

  • 一个注射器维护者一个它创建的服务实例的容器。
  • 一个注射器可以通过provider创建新的服务实例。

• 一个提供者是创建服务的秘诀。

• 使用注射器去注册提供者。

总结

你已经学到了Angular应用的八个主要构件块的基础了。

Dependency injection

那是在Angular应用中的任何东西的基础，从这里起步应该是绰绰有余了。（注：原文是and it's more than enough to get going. ）但是它不包括所有你需要知道的。

这里有一个简要的，字母排序的，重要的Angular功能和服务的列表。它们中的大多数会在本套文档中覆盖（或者即将是）。

Animations（动画）：不需要对动画技术或CSS的深度掌握的，使用Angualr动画库开发动画组件行为。

Change detection（变更检测）：变更检测文档会覆盖Angular是如何确定一个组件的属性值发生了改变，什么时候去更新屏幕，并且它是如何使用zones去插入异步活动和运行它的变更检测策略。

Events（事件）：事件文档将会覆盖如何使用组件和服务去触发事件去发布事件或者订阅事件。（注：原文是The events documentation will cover how to use components and services to raise events with mechanisms for publishing and subscribing to events.）

Forms（表单）：使用基于HTML验证和脏检查来支持复杂数据场景。

HTTP：用HTTP客户端来和一个服务器进行通信去获取数据，保存数据，调用服务端行为。

Lifecycle hooks（生命周期钩子）：通过实现生命周期钩子接口，在一个组件的生命周期的关键时刻嵌入，从构建到销毁。

Pipes（管道）：在模板中使用管道去提升用户体验，把值转换成一种显示。考虑这个currency管道表达式：

price | currency:'USD':true

它把42.33的价格显示成$42.33。

Router（路由器）：在客户端程序中的页面间导航，并且绝不会离开浏览器。

Testing（测试）：使用Angular Testing Platform在你的应用部分运行单元测试，就像它们在与Angular结构交互。