2017.09.17

Check Out

• Angular 应用的结构设计
• Angular 应用的启动过程
• Angular 应用的核心概念

New

Angular 应用的结构设计

模块、组件、指令、服务

一个angular应用由组件、服务以及指令构建的模块组成。

其中：

• 组件：是构建应用的基本块，包含必备的装饰器、模版和控制器，可选的提供器、生命周期钩子、样式表、动画、输入属性和输出属性，带有基本的功能（能够完成一些业务逻辑）。
• 服务：是可以完成一些业务逻辑功能的可复用块。
• 指令：是作用在标签或组件上的功能块。
• 模块： 是规划和构建好的用于完成相对独立功能的组成块。

// app module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  decalrations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [
    AppComponent
  ]
})
class AppModule { }

// app module
import { Component } from '@angular/core';
@Component({
  selector: 'app',
  template: '<h1> {{ title }} </h1>',
})
export class AppComponent {
  title: 'app-component'
  constructor() { }
}

Angular 应用的启动过程

• 即时编译器动态引导

// main.ts
import './polyfills.ts';
// 浏览器动态刷新功能（打包了Angular编译器）
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { enviroment } from './enviroments/enviroment';
import { AppModule } from './app/app.module';

if (enviroment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

• 预编译静态引导(小,快)

import { platformBrowser } from '@angular/platform-browser';
import { AppModule } from './app/app.module';
platformBrowser().bootstrapModuleFactory(AppModule);

Angular 应用的核心概念

• 组件
• 模版
• 数据绑定
• 服务
• 依赖注入
• 模块