详解Angular的8个主要构造块
转载 & & 作者：Keriy
Angular 主要分为八大构造块（也就是八个核心概念）：模块、组件、模板、元数据、数据绑定、指令、服务、依赖注入。有兴趣的可以了解一下
Angular 主要分为八大构造块（也就是八个核心概念）：模块 (module)、组件 (component)、模板 (template)、元数据 (metadata)、数据绑定 (data binding)、指令 (directive)、服务 (service)、依赖注入 (dependency injection)。其中，最核心的一个概念就就组件。
1. 模块 (module)
Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 Angular 模块或 NgModules。
每个Angular应用至少有一个模块（根模块），习惯上命名为AppModule。
根模块在一些小型应用中可能是唯一的模块，大多数应用会有很多特性模块，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
Angular 模块（无论是根模块还是特性模块）都是一个带有@NgModule装饰器的类。
下面是一个简单的根模块：
// src/app/app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
[ BrowserModule ],
providers:
[ Logger ],
declarations: [ AppComponent ],
[ AppComponent ],
bootstrap:
[ AppComponent ]
export class AppModule { }
其中重要的属性是：
declarations - 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令、管道；
exports - declarations 的子集，可用于其它模块的组件;
imports - 本模块声明的组件模板需要的类所在的其它模块。用来导入其他自定义模块，第三方插件模块；
providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分；
bootstrap - 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。通常在main.ts中引导AppModule，这样platformBrowserDynamic().bootstrapModule(AppModule)
2. 组件 (component)
组件负责控制屏幕上的一小块区域，我们称之为视图。
下面是一个组件的简单例子：
// src/app/hero-list.component.ts
export class HeroListComponent implements OnInit {
heroes: Hero[];
selectedHero: H
constructor(private service: HeroService) { }
ngOnInit() {
this.heroes = this.service.getHeroes();
selectHero(hero: Hero) { this.selectedHero = }
3. 模板 (template)
模板就是HTML文件，但是不是标准的HTML文件，它使用了一些模板语法，模板语法使模板有了自己的逻辑关系，并能够实现和组件的简单数据交互。
下面是一个简单的模板：
// src/app/hero-list.component.html
&h2&Hero List&/h2&
&p&&i&Pick a hero from the list&/i&&/p&
&li *ngFor="let hero of heroes" (click)="selectHero(hero)"&
{{hero.name}}
&hero-detail *ngIf="selectedHero" [hero]="selectedHero"&&/hero-detail&
通常使用ng g component my-comoponent命令产生一个组件包含四个文件：
my-comoponent.css
// 样式文件
my-comoponent.thml
my-comoponent.spec.ts
// 测试文件
my-comoponent.ts
// 这是组件？ 通常我们认为这四个文件组成一个组件
4. 元数据 (metadata)
元数据告诉你如何处理一个类。
其实，在Angular中每个组件只是一个类，但是我们可以通过装饰器来附加元数据告诉Angular这是一个组件。
下面就是HeroListComponent的一些元数据。
// src/app/hero-list.component.ts (metadata)
@Component({
// @Component 将后面的 HeroListComponent 类标记为一个组件
'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
export class HeroListComponent implements OnInit {
/* . . . */
@Component装饰器能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。
@Component的配置项包括：
selector： CSS选择器，它告诉Angular在父级HTML中查找&hero-list&标签，创建并插入该组件。 例如，如果应用的HTML 包含&hero-list&&/hero-list&， Angular就会把HeroListComponent的一个实例插入到这个标签中；
templateUrl：组件HTML 模板的模块相对地址；
providers - 组件所需服务的依赖注入提供商数组。 这是在告诉 Angular：该组件的构造函数需要一个HeroService服务，这样组件就可以从服务中获得英雄数据。
到这里你应该可以明白：模板、元数据和组件共同描绘出这个视图。
5. 数据绑定 (databinding)
数据绑定是Angular中最常用的数据处理模式。数据绑定在模板与对应组件的交互中扮演了重要的角色，在父组件与子组件的通讯中也同样重要。
下面是一个简单的例子：
// src/app/hero-list.component.html
&li&{{hero.name}}&/li&
&hero-detail [hero]="selectedHero"&&/hero-detail&
&li (click)="selectHero(hero)"&&/li&
{{hero.name}}插值表达式在&li&标签中显示组件的hero.name属性的值；
[hero]属性绑定把父组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中；
(click) 事件绑定在用户点击英雄的名字时调用组件的selectHero方法。
Angular默认没有双向绑定，但是，官方推荐这样来实现双向绑定：
&input [(ngModel)]="hero.name"&
Angular 在每个 JavaScript 事件循环中处理所有的数据绑定，它会从组件树的根部开始，递归处理全部子组件。
6. 指令 (directive)
由于Angular模板是动态的，所以你需要通过指令实现对DOM的转换。（组件是一个带模板的指令；@Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模板的特性。 ）
指令分为两种：结构指令、属性指令。
a. 结构指令: 通过在 DOM 中添加、移除和替换元素来修改布局。
下面是一个简单的内置结构指令的例子：
&!-- src/app/hero-list.component.html (structural) --&
&li *ngFor="let hero of heroes"&&/li&
&hero-detail *ngIf="selectedHero"&&/hero-detail&
*ngFor告诉 Angular 为heroes列表中的每个英雄生成一个&li&标签。
*ngIf表示只有在选择的英雄存在时，才会包含HeroDetail组件。
b. 属性指令：修改一个现有元素的外观或行为。
&!-- src/app/hero-detail.component.html --&
&input [(ngModel)]="hero.name"&
7. 服务 (service)
服务是一个广义范畴，包括：值、函数，或应用所需的特性。几乎任何东西都可以是一个服务。 典型的服务是一个类，具有专注的、明确的用途。它应该做一件特定的事情，并把它做好。
税款计算器
应用程序配置
组件类应保持精简。组件本身不从服务器获得数据、不进行验证输入，也不直接往控制台写日志。 它们把这些任务委托给服务。所以说服务是跑腿的，服务一般用来处理业务逻辑，被注入在组件当中，服务是全局单例的。也就是说注入到所有组件中的服务是同一个。
一个简单的例子：
// src/app/hero.service.ts
export class HeroService {
private heroes: Hero[] = [];
constructor(
private backend: BackendService,
private logger: Logger) { }
getHeroes() {
this.backend.getAll(Hero).then( (heroes: Hero[]) =& {
this.logger.log(`Fetched ${heroes.length} heroes.`);
this.heroes.push(...heroes); // fill cache
return this.
8. 依赖注入 (denpendency injection)
“依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。
来看注入方式:
// src/app/hero-list.component.ts
constructor(private service: HeroService) { }
注入器维护了一个服务实例的容器，存放着以前创建的实例。 如果所请求的服务实例不在容器中，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular。 当所有请求的服务都被解析完并返回时，Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。
通常我们将服务声明在根模块，以便在整个应用中使用这个服务。
// src/app/app.module.ts
providers: [
BackendService,
HeroService,
也可以在其他组件中声明服务，那么这个服务只能用于当前组件。把它注册在组件级表示该组件的每一个新实例都会有一个服务的新实例。
// src/app/hero-list.component.ts
@Component({
'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具> 博客详情
摘要: AngularDart4.0 基础语法
码云项目页：
本教程的宏伟计划是构建一个应用程序，帮助人力资源管理其稳定的英雄。
英雄之旅应用程序涵盖了Angular的核心基础。您将构建一个具有许多功能的基本应用程序，您可以在完整的数据驱动应用程序中找到许多功能：获取和显示英雄列表，编辑所选英雄的细节，以及浏览不同视图英雄数据。您将学习以下内容：
使用内置指令来显示和隐藏元素并显示英雄数据列表。
创建组件以显示英雄细节并显示一系列英雄。
对只读数据使用单向数据绑定。
添加可编辑字段以更新具有双向数据绑定的模型。
将组件方法绑定到用户事件，如按键和点击。
允许用户从主列表中选择一个英雄，并在详细信息视图中编辑该英雄。
用管道格式化数据。
创建一个共享服务来组合英雄。
使用路由在不同视图及其组件之间导航。
& 你会学到Angular的核心来开始，并获得信心，Angular可以做任何你需要做的事情。 您将在介绍性层面介绍很多方面，您会发现许多链接到更深入的页面。
完成本教程之后，该应用程序将看起来像这个（查看）。
本教程提供了一个可视化的想法，以仪表盘和众多英勇的英雄开始。
你可以单击面板上边的两个链接在“Dashboard”和“Heroes”间切换。
当你单击面板上的英雄“Magneta”，路由将打开英雄“Magneta”的视图，并且你可以修改名字。
点击"Back"将返回到面板，顶部的链接带你进入不同的主视图，单击“Heroes”,应用将显示“Heroes”主列表视图。
当您单击不同的英雄名称时，列表下面的只读迷你细节反映了新的选择。
您可以单击“查看详细信息”按钮，获取所选英雄的可编辑详细信息。
下图捕获所有导航选项。
接下来 您将一步一步地构建“英雄之旅”应用程序。 每一步都有一个要求，你可能会遇到许多应用程序。 一切都是有根据的，一路上，您将会熟悉Angular的许多核心基础知识。
& & & & & & & & & & &&Angular2Demo
说明：&&Angular2英雄demo，直接可以运行，我们已经测试过了。(Angular2 hero demo can run directly, we have tested it.)
文件列表：
Angular2Demo\.editorconfig
Angular2Demo\.idea\Angular2Demo.iml
Angular2Demo\.idea\modules.xml
Angular2Demo\.idea\workspace.xml
Angular2Demo\bs-config.json
Angular2Demo\node_modules\.bin\acorn
Angular2Demo\node_modules\.bin\acorn.cmd
Angular2Demo\node_modules\.bin\browser-sync
Angular2Demo\node_modules\.bin\browser-sync.cmd
Angular2Demo\node_modules\.bin\buble
Angular2Demo\node_modules\.bin\buble.cmd
Angular2Demo\node_modules\.bin\concurrent
Angular2Demo\node_modules\.bin\concurrent.cmd
Angular2Demo\node_modules\.bin\concurrently
Angular2Demo\node_modules\.bin\concurrently.cmd
Angular2Demo\node_modules\.bin\dev-ip
Angular2Demo\node_modules\.bin\dev-ip.cmd
Angular2Demo\node_modules\.bin\express
Angular2Demo\node_modules\.bin\express.cmd
Angular2Demo\node_modules\.bin\har-validator
Angular2Demo\node_modules\.bin\har-validator.cmd
Angular2Demo\node_modules\.bin\has-ansi
Angular2Demo\node_modules\.bin\has-ansi.cmd
Angular2Demo\node_modules\.bin\jasmine
Angular2Demo\node_modules\.bin\jasmine.cmd
Angular2Demo\node_modules\.bin\karma
Angular2Demo\node_modules\.bin\karma.cmd
Angular2Demo\node_modules\.bin\lite-server
Angular2Demo\node_modules\.bin\lite-server.cmd
Angular2Demo\node_modules\.bin\lt
Angular2Demo\node_modules\.bin\lt.cmd
Angular2Demo\node_modules\.bin\mime
Angular2Demo\node_modules\.bin\mime.cmd
Angular2Demo\node_modules\.bin\nopt
Angular2Demo\node_modules\.bin\nopt.cmd
Angular2Demo\node_modules\.bin\protractor
Angular2Demo\node_modules\.bin\protractor.cmd
Angular2Demo\node_modules\.bin\rimraf
Angular2Demo\node_modules\.bin\rimraf.cmd
Angular2Demo\node_modules\.bin\semver
Angular2Demo\node_modules\.bin\semver.cmd
Angular2Demo\node_modules\.bin\sshpk-conv
Angular2Demo\node_modules\.bin\sshpk-conv.cmd
Angular2Demo\node_modules\.bin\sshpk-sign
Angular2Demo\node_modules\.bin\sshpk-sign.cmd
Angular2Demo\node_modules\.bin\sshpk-verify
Angular2Demo\node_modules\.bin\sshpk-verify.cmd
Angular2Demo\node_modules\.bin\strip-ansi
Angular2Demo\node_modules\.bin\strip-ansi.cmd
Angular2Demo\node_modules\.bin\throttleproxy
Angular2Demo\node_modules\.bin\throttleproxy.cmd
Angular2Demo\node_modules\.bin\tree-kill
Angular2Demo\node_modules\.bin\tree-kill.cmd
Angular2Demo\node_modules\.bin\tsc
Angular2Demo\node_modules\.bin\tsc.cmd
Angular2Demo\node_modules\.bin\tslint
Angular2Demo\node_modules\.bin\tslint.cmd
Angular2Demo\node_modules\.bin\tsserver
Angular2Demo\node_modules\.bin\tsserver.cmd
Angular2Demo\node_modules\.bin\uuid
Angular2Demo\node_modules\.bin\uuid.cmd
Angular2Demo\node_modules\.bin\webdriver-manager
Angular2Demo\node_modules\.bin\webdriver-manager.cmd
Angular2Demo\node_modules\.bin\weinre
Angular2Demo\node_modules\.bin\weinre.cmd
Angular2Demo\node_modules\.bin\which
Angular2Demo\node_modules\.bin\which.cmd
Angular2Demo\node_modules\.bin\window-size
Angular2Demo\node_modules\.bin\window-size.cmd
Angular2Demo\node_modules\@angular\common\@angular\common\testing.es5.js
Angular2Demo\node_modules\@angular\common\@angular\common\testing.es5.js.map
Angular2Demo\node_modules\@angular\common\@angular\common\testing.js
Angular2Demo\node_modules\@angular\common\@angular\common\testing.js.map
Angular2Demo\node_modules\@angular\common\@angular\common.es5.js
Angular2Demo\node_modules\@angular\common\@angular\common.es5.js.map
Angular2Demo\node_modules\@angular\common\@angular\common.js
Angular2Demo\node_modules\@angular\common\@angular\common.js.map
Angular2Demo\node_modules\@angular\common\bundles\common-testing.umd.js
Angular2Demo\node_modules\@angular\common\bundles\common-testing.umd.js.map
Angular2Demo\node_modules\@angular\common\bundles\common-testing.umd.min.js
Angular2Demo\node_modules\@angular\common\bundles\common-testing.umd.min.js.map
Angular2Demo\node_modules\@angular\common\bundles\common.umd.js
Angular2Demo\node_modules\@angular\common\bundles\common.umd.js.map
Angular2Demo\node_modules\@angular\common\bundles\common.umd.min.js
Angular2Demo\node_modules\@angular\common\bundles\common.umd.min.js.map
Angular2Demo\node_modules\@angular\common\common.d.ts
Angular2Demo\node_modules\@angular\common\common.metadata.json
Angular2Demo\node_modules\@angular\common\package.json
Angular2Demo\node_modules\@angular\common\public_api.d.ts
Angular2Demo\node_modules\@angular\common\README.md
Angular2Demo\node_modules\@angular\common\src\common.d.ts
Angular2Demo\node_modules\@angular\common\src\common_module.d.ts
Angular2Demo\node_modules\@angular\common\src\directives\index.d.ts
Angular2Demo\node_modules\@angular\common\src\directives\ng_class.d.ts
Angular2Demo\node_modules\@angular\common\src\directives\ng_component_outlet.d.ts
Angular2Demo\node_modules\@angular\common\src\directives\ng_for_of.d.ts
Angular2Demo\node_modules\@angular\common\src\directives\ng_if.d.ts
Angular2Demo\node_modules\@angular\common\src\directives\ng_plural.d.ts
Angular2Demo\node_modules\@angular\common\src\directives\ng_style.d.ts
Angular2Demo\node_modules\@angular\common\src\directives\ng_switch.d.ts
近期下载者：
相关文件：　　本系列在前面两篇文章，介绍了Zone.js和angular2的基础概念。而后对于ng2的学习，还是由官方的&&开始。
以下内容经过提炼和个人理解，当然也会有不正确的地方，欢迎指正。有兴趣的朋友，可以自己开始ng2之旅，再结合本篇文章一起理解。
ng2的配置比较麻烦，任意的引入包可能导致一些报错，建议直接官方下载&&。
ng2 将所有api分成7个类型，在查阅api的时候，可以多留意一下他们的类型，便于理解
&@Component
　　@Component 申明一个应用程序可重用的UI组件，可以通过bootstrap实例化，也可以通过它本身directives属性相互实例化调用。
/* app.component.ts */
import {Component} from '@angular/core';
@Component({
selector: 'app-component',
template: `&div&{{title}}&/div&`
export class AppComponent{
title = 'Tour of Heroes';
/* main.ts */
　import {bootstrap} from '@angular/platform-browser-dynamic'
　import {AppComponent} from './app.component'
　bootstrap(AppComponent)
//index.html
&app-component&&/app-component&
/* 最终页面渲染 */
　　&body&
　　　　&app-component&
　　　　　　&div&Tour of Heroes &/div&
　　　　&/app-component&
　　&/body&
　　@Component 会为组件创建一个shadow DOM，将选中的模板加载到shadow&DOM，创建所有配置的注入对象。
bootstrap 引导运行@Component时，会先根据@Component 的selector找到dom，并新建一个子注射器，通过一个新Zone实例进行变化检测，
创建一个shadow DOM并载入到dom节点汇总，实例化组件，最后初始化提供的数据。
&shadow dom：
　　在ng2的文档里，提及了shadow dom。可以参考文章：。
shadow dom能让dom和css样式做到有作用域划分，可以相互独立，样式不相互影响。而浏览器对shadow dom的支持并不好，但是ng2用其他方式，实现了类似shadow dom的功能。比如，当@Component配置了styles属性，在组件实例化的时候，style会被载入到head
　　　　　　　　
　　如上图，实际我们的style原本写的是h1选择器，ng在后面加上了属性选择器[_ngcontent-hvh-1]。在组件的根dom，ng也会加上[_ngcontent-hvh-1]此属性。　　通过一个属性选择器，ng2自动为我们隔离了style的作用域。
　　　　　　　　　　
每个组件都将会加入一个特定的属性，属性后面的数字按照载入顺序累加: [_ngcontent-hvh-1] -& [_ngcontent-hvh-2] ......
@Input&@Output:
　　使用@input绑定标签属性，创建组件通信的单向输入流。需要引入组件：import { Input } from '@angular/core';
&英雄之旅&例子:
import { Input } from '@angular/core';
@Component({
selector: 'bank-account',
template: `
Bank Name: {{bankName}}
Account Id: {{id}}
class BankAccount {
@Input() bankName:
@Input('account-id') id:
// this property is not bound, and won't be automatically updated by Angular
normalizedBankName:
@Component({ selector: 'app', template: ` &bank-account bank-name="RBC" account-id="4747"&&/bank-account&
`, directives: [BankAccount] }) class App {} bootstrap(App);
　　在一个指令组件的类里使用@Input() 对一个变量进行申明，被申明的变量可以通过指令的属性进行单向数据绑定。
@Input 有一个参数，绑定dom的属性名，如上面代码：&@Input('account-id') id: &
dom属性名account-id和类的id变量进行了绑定，&bank-account account-id="4747"&
　　未带参数的属性名默认用变量名&@Input() bankName: & &&bank-account bank-name="RBC"&
这样就实现组件之间的通信和绑定了。
在angular1中，directive中定义属性scope，达到scope作用域之间的数据绑定，和angular2中的@Input功能类似
bankName : "=",
accountId : "="
}&directive bank-name="RBC" account-id="4747"&&/directive&
@Output和@Input相反
OnInit&constructor
OnInit和 constructor都能实现初始化时候执行，constructor执行在ngOnInit之前。但他们的概念不同。
import {OnInit} from '@angular/core';
export class AppComponent implements OnInit{
constructor(){
//do something
ngOnInit(){
//do something
配置路由，需要引入 RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS 。
RouteConfig用于定义路由配置
ROUTER_DIRECTIVES提供指令( [routerLink]&router-outlet& )
ROUTER_PROVIDERS 提供路由服务
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
@Component({
selector: 'my-app',
template: `
&h1&{{title}}&/h1&
&a [routerLink]="['Heroes']"&Heroes&/a&
&router-outlet&&/router-outlet&
directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS,
HeroService
@RouteConfig([
path: '/heroes',
name: 'Heroes',
component: HeroesComponent
　　[routerLink]用于指定载入链接，会对应 @RouteConfig 的 name 属性，
找到 name 之后修改路由，并显示相应UI组件,最终载入到&router-outlet&标签下。
使用router-outlet，UI组件将会自己创建selector标签，将组件加载到router-outlet标签下。
　　　　　　
默认路由&路由传参：
@RouteConfig([
path: '/detail/:id',//可以通过此方式传参
name: 'HeroDetail',
component: ComponentA,
useAsDefault: true //设置默认路由,错误访问地址都将访问默认路由
如上代码：ComponentA 要接收参数，需要导入RouteParams
import { RouteParams } from '@angular/router-deprecated';
RouteParams是一个class，ComponentA 初始化时候，constructor(private routeParams: RouteParams)进行定义,
在constructor或者ngOnInit方法体里，使用 this.routeParams.get('id') 进行参数获取。
import { RouteParams } from '@angular/router-deprecated';
export class ComponentA{
constructor(private routeParams: RouteParams){
console.log("id:",
this.routeParams.get('id'))
通过Router手动跳转页面:
import { Router } from '@angular/router-deprecated';class xxx{　　constructor(private router:Router){}　　go(){
　　　　this.router.navigate(['HeroDetail', { id: this.id }]);//参数1路由名称，参数2参数
事件绑定：绑定一个事件流，在组件之间通信。自定义事件open，在 &组件A& 中定义一个事件 open , 通过 &组件B& 的标签属性绑定 open
， 通过 &组件B& 触发
//Component A
@component {
template: '&b (open)="open($event)"&&/b&'
open(){　　　　console.log('done');　　}}
//Conponent B
import { Component, EventEmitter, Output } from '@angular/core';
@Output() open= new EventEmitter();
this.open.emit();//emit也可以传参
(open)="open($event)"，自定义open方法里必须要带上$event，否则不会执行，至于为什么之后再研究。如果是(click) 这种绑定浏览器默认事件，(click)="open()"，就可以不用传$event。
　　在使用ng2或者说使用ts开发的ng2时，会写入更多的代码用于申明、依赖、定义类型等，比如import，@Input，@Output，在开发的时候会觉得很麻烦，
但是这种严格的规范带来的就是更高的可维护性，比如import虽然可能会写很多，但是后期维护某个组件的时候就能很清楚的知道当前组件使用了哪些模块。
编译的时候angular2遵循严格模式，能够帮助避免一些代码错误和不规范。
&　　这趟 &英雄之旅& 仅仅是一个开始，见识了angular2核心、常用的api、组织结构和代码风格。还有很多内容是需要去专研和理解。
虽然涉及不深，但是已经明显感觉到，一些angular1中的不足，在angular2中已经不存在了。
阅读(...) 评论()}