Angular.js

简介：Angular 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript 的语言（例如 Dart 或者 TypeScript ），来构建客户端应用的框架

angular目录结构

app/app.component.ts:根组件，随着应用的演变，它将变成一颗嵌套组件树
app/app.module.ts:定义AppModule，根模块为 Angular 描述如何组装应用
main.ts:使即时 (JiT) 编译器用编译应用并且在浏览器中启动并运行应用

我们是这样写 Angular 应用的：用 Angular 扩展语法编写 HTML 模板， 用组件类管理这些模板，用服务添加应用逻辑， 用模块打包发布组件与服务；然后，我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互；

anguelar架构

Angular 应用程序的八个主要构造块的基础知识: 模块 (module)，
组件 (component)， 模板 (template)， 元数据 (metadata)， 数据绑定 (data binding)， 指令 (directive)， 服务 (service) ，依赖注入 (dependency injection)

模块：

//app.module.ts
//模块库
//每个 Angular 库的名字都带有@angular前缀
//例子：import { Component } from '@angular/core';从@angular/core库中导入Component装饰器
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';
//Angular 模块（一个用@NgModule装饰的类）是 Angular 的基础特性。其余的为Javascript模块系统，用来管理JavaScript对象
import { AppRoutingModule } from './app-routing.module';

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

import { AppComponent }         from './app.component';
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService }          from './hero.service';
import { HeroSearchComponent }  from './hero-search.component';

//Angular 模块是一个由@NgModule装饰器提供元数据的类，元数据包括：
//声明哪些组件、指令、管道属于该模块。
//公开某些类，以便其它的组件模板可以使用它们。
//导入其它模块，从其它模块中获得本模块所需的组件、指令和管道。
//在应用程序级提供服务，以便应用中的任何组件都能使用它。


//@NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：
// declarations - 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。
// exports - declarations 的子集，可用于其它模块的组件模板。
// imports - 本模块声明的组件模板需要的类所在的其它模块。
// providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
// bootstrap - 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent,
    HeroSearchComponent
  ],
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
})
//import导入模块
//export导出模块接口  AppMoudle根模块
export class AppModule { }

//main.ts
//导入浏览器相关
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
//导入根模块
import { AppModule } from './app/app.module';
//引导AppModule来启动应用
platformBrowserDynamic().bootstrapModule(AppModule);

组件,元数据

import 'rxjs/add/operator/switchMap';
import { Component, OnInit }      from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location }               from '@angular/common';

import { Hero }        from './hero';
//引入服务
import { HeroService } from './hero.service';

//TypeScript中，我们用装饰器 (decorator) 来附加元数据
@Component({
  //下面三个为元数据(Metadata);告诉 Angular 如何处理一个类
  selector: 'hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: [ './hero-detail.component.css' ]
})
export class HeroDetailComponent implements OnInit {
  //HeroDetailComponent中hero属性
  hero: Hero;
  //定义这个属性的内容
  constructor(
    private heroService: HeroService,
    private route: ActivatedRoute,
    private location: Location
  ) {}
  //下面为三个方法定义这些内容的具体实现
  ngOnInit(): void {
    this.route.params
      .switchMap((params: Params) => this.heroService.getHero(+params['id']))
      .subscribe(hero => this.hero = hero);
  }

  save(): void {
    this.heroService.update(this.hero)
      .then(() => this.goBack());
  }

  goBack(): void {
    this.location.back();
  }
}

模板