Angular核心总结

2017-08-26

Angular是什么

Angular是一个用HTML和JavaScript或者一个可以编译成JavaScript的语言（如TypeScript）来构建客户端应用的框架。该框架包括一些列库，有些是核心库，有些是可选库。

AngularJS指Angular1.X版本，现已经停止更新了。Angular专指Angular2+版本。

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

Angular核心概念

Angular主要包括8个核心概念：模块、组件、模板、元数据、数据绑定、指令、服务、依赖注入。
AngularOverView

与用户交互的是模板，模板并不是独立的模块，它是组件的要素之一。另一要素是组件类，用以维护组件的数据模型及功能逻辑；
模板是通过元数据指定的，元数据还包含很多其他的重要信息，这些信息用来告诉Angular如何去解释一个普通的类，元数据结合普通类构成组件
指令是Angular里的独立构成，它与模板密切关联呢，用来增强模板特性，间接扩展了模板语法
服务也是Angular里的独立构成，它是封装单一功能逻辑的单元，通常为组件提供功能扩展
服务要能为组件所使用，是通过“依赖注入”机制把服务注入到组件内部，服务可以单独注入到某一组件，也可以注入到模块，两种注入方式使得服务的作用域不同。

Angular 模块（NgModule）

Angular模块能帮你把应用组织成多个内聚的功能块。

Angular模块是带有 @NgModule 装饰器函数的类， @NgModule 接收一个元数据对象，该对象告诉Angular如何编译和运行模块代码。它标记出该模块拥有的组件、指令和管道，并把他们的一部分公开出去（export），以便外部组件使用他们。它可以向应用的依赖注入器中添加服务提供商。

模块是组织应用和使用外部库扩展应用的最佳途径

很多Angular库都是模块，例如：FormsModule、HttpModule、RouterModule。很多第三方库也封装成了Angular模块，例如：Material Design、Ionic、AngularFire2.

Angular模块把组件、指令和管道打包成内聚的功能块，每个模块聚焦于一个特定的区域、业务领域、工作流或通用工具。

模块还能用来把服务加到应用程序中。这些服务可能是内部研发的，例如日志服务；也可能是外部资源，例如Angular路由和Http客户端。

模块可能在应用启动时主动加载，也可能由路由器进行异步惰性加载。

Angular模块是一个由 @NgModule 装饰器提供元数据的类，元数据包括：

声明哪些组件、指令、管道属于该模块（declarations）
公开某些类（组件、指令、管道等），以便其他的组件模板能够使用它们。（exports）
导入其他模块，从其他模块中获得本模块所需的组件、指令、管道。（imports）
在应用程序级提供服务，以便应用中的任何组件都能使用它。（providers）

每个Angular应用至少有一个模块类——跟模块，我们将通过引导根模块来启动应用。通常命名为 AppModule

对于组件很少的简单应用来说，只用一个根模块就足够了。随着应用规模的增长，我们逐步从跟模块中重构出一些 特性模块，来代表一组相关功能的集合。然后，我们在 根模块中导入它们。

AppModule - 应用的根模块

每个Angular应用都有一个根模块。按照约定，它的类名叫作 AppModule，放置在 app.module.ts 文件中。

例如，我们使用脚手架new一个ng 项目：

1	ng new hello-angular

src/app/app.module.ts中的AppModule是能找到的最简版本：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

@NgModule 装饰器用来定义模块的元数据。

这个元数据只导入了一个辅助模块，BrowserModule，每个运行在浏览器中的应用都必须导入它。

BrowserModule 注册了一些关键的应用服务提供商。它还包括了一些通用的指令，例如 NgIf 、NgFor ，所以这些指令在该模块的任何组件模板中都是可用的。（明白了）

declarations 列出了该应用程序中唯一的组件（根组件），它是应用的光秃秃的组件树的根。下面是该组件类（src/app/app.component.ts）

import { Component, OnInit } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "app";
}

最后， @NgModule.bootstrap 属性把这个 AppComponent标记为引导（bootstrap）组件。当Angular引导该应用时，他会在DOM中渲染AppComponent，并把结果放进 index.html 的 <app-root> 元素标记内部。

上面的最简模块只用到了 @NgModule 元数据的几个配置项，可以阅读官方文档了解其所有元数据项。

@NgModule 接收的元数据对象：

  providers?: Provider[]
  declarations?: Array<Type<any>|any[]>
  imports?: Array<Type<any>|ModuleWithProviders|any[]>
  exports?: Array<Type<any>|any[]>
  entryComponents?: Array<Type<any>|any[]>
  bootstrap?: Array<Type<any>|any[]>
  schemas?: Array<SchemaMetadata|any[]>
  id?: string
})

在main.ts中引导

在 main.ts 文件中，我们通过引导 AppModule 来启动应用。


import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/components/app.module";
import { environment } from "./environments/environment";
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);