Angular4核心－架构

用angular扩展语法编写HTML 模版，用 组件 类管理这些模版，用服务 添加应用逻辑，用 模块 打包发布组件和服务

NgModule

Angular模块（无论是根模块还是特性模块）都是一个带有@NgModule装饰器的类

属性

• declarations－声明模块中拥有的视图类，Angular有三种视图类：组件，指令和管道
• exports－declarations的子集，可以用于其他组件模块的模版
• imports－本模块声明的组件模版需要的类所在的其他模块
• providers－服务的创建者，并加入到全局服务列表中，可用于应用任何部分
• bootstrap－指定应用的主视图（称为根组件），它是所有其他视图的宿主，只有根模块才能设置bootstrap属性

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';

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';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent,
    HeroSearchComponent
  ],
  exports:[AppComponent],//演示作用，根模块不需要导出任何东西
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

启动应用

我们通过引导根模块来启动应用，通常在一个main.ts文件中引导AppModule

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

组件：组件负责控制屏幕上的一小块区域，称为视图
模版：html

MetaData

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

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

解析：
@Component装饰器把其后的类标记成了组件类
@Component装饰器接受一个配置对象，Angular会基于这些信息创建和展示组件及其视图
配置项包括：

• selector
• templateUrl
• providers

数据绑定

{{hero.name}}
//插值表达式
//属性绑定
// 事件绑定
//双向数据绑定

四种形式

• {{hero.name}}插值表达式 － 在
• 标签中显示组件的hero.name属性的值
• [hero]属性绑定－把父组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中
• (click)事件绑定 － 在用户点击hero的名字时调用组件的selectHero方法
• [(ngModel)]双向数据绑定－它使用ngModel指令组合了属性绑定和事件绑定，数据属性值通过属性绑定从组件流入到输入框，用户的修改通过事件绑定流回组件，把属性值设置为最新的值

指令

• 组件是一个带模版的指令
• @Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模版的特性
• 结构型指令－通过在DOM中添加，移除和替换元素来修改布局（ngFor,ngIf）
• 属性型指令－修改现有元素的外观或行为（ngModel）
• 自定义指令

服务

几乎任何东西都可以是一个服务，典型的服务是一个类，具有专注的，明确的用途，它应该做一件特定的事，并把它做好

• 日志服务
• 数据服务
• 消息总线
• 应用程序配置

组件就是最大的服务消费者

依赖注入

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

• 依赖注入被渗透在整个Angular框架中，被到处使用
• 注入器（injector）是本机制的核心
  注入器负责维护一个容器，用于存放它创建过的服务实例
  注入器能使用提供商创建一个新的服务实例

constructor(private service: HeroService) { }

• 提供商是一个用于创建服务的配方
• 把提供商注册到注入器

app.module.ts

providers: [
  HeroService,
  Logger
],

公众号：前端咖秀