Angular 2 Architecture Overview
Module
简单来说模块(module)就是完成共同目的的代码块,export一些内容例如一个类、函数、或值变量。
component就是一个基本的Angular块,一个component类其实也是我们从模块中export出来的东西。
Angular本身也是一个有着许多称为“barrels”的库模块的集合。angular2/core 是最主要的Angular库模块。
如果引入的是Angular本身的库模块,import语句直接引用的是模块的名称;如果引入的是自己本地的模块,则需要使用相对路径,例如同一个目录下使用前缀(./)。
import {Component} from 'angular2/core'; // angular的模块
import {AppComponent} from './app.component'; // 自己写的本地模块
Component
组件(Component)控制屏幕实际使用面积的一小块(我们称之为视图的一小块)。简单来说组件完成一些事情来支撑视图(在一个类里),这个类通过属性和方法的API与视图相互作用。
export class HeroListComponent implements OnInit {
constructor(private _service: HeroService){ }
heroes:Hero[];
selectedHero: Hero;
ngOnInit(){
this.heroes = this._service.getHeroes();
}
selectHero(hero: Hero) { this.selectedHero = hero; }
}
Template
模板(Template)是用于定义组件的视图,通过HTML来告诉Angular怎样来渲染这个组件。
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</div>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>
<hero-detail>是自定义的标签,代表的是HeroDetailComponent,在写Angular模板的时候,将自定义标签和原有标签混合是很常见的。
Metadata
@Component({
selector: 'hero-list',
templateUrl: 'app/hero-list.component.html',
directives: [HeroDetailComponent],
providers: [HeroService]
})
export class HeroListComponent implements OnInit { ... }
通过将metadata附加在类上,来告诉angular:HeroListComponent是一个组件。
通过“@decorator”来添加metadata是Typescript中最简单的方式。“@decorator”是个函数,有其配置参数。
Data Binding
数据绑定是一种统筹模板和组件的机制,我们在模板HTML中增加双花括号等其他标记来告诉Angular怎样连接组件和模板两边。
<div>{{hero.name}}</div>
<hero-detail [hero]="selectedHero"></hero-detail>
<div (click)="selectHero(hero)"></div>
第一行代码:{{hero.name}}是插入(interpolation),将组件的属性hero.name显示在div中。
第二行代码:[hero]是属性绑定(property binding),将父组件的selectedHero属性传给子组件的hero属性。
第三行代码:(click)是事件绑定(event binding),当用户点击时,调用组件的selectHero方法。
<input [(ngModel)]="hero.name">
双向数据绑定:使用ngModel命令,属性值会从组件传送到input框中,同时用户改变input框的值时也会传送回组件,重设组件的属性值(和事件绑定类似)。
Directive
Angular渲染模板的时候,根据给定的命令(directive)来将模板转换成DOM。
命令分为两种:结构(structural)命令和属性(Attribute)命令。通常在标签中出现(在等号的左边)。
<div *ngFor="#hero of heroes"></div>
<hero-detail *ngIf="selectedHero"></hero-detail>
上面的ngFor、ngIf就是两个结构命令,它们可以增加、删除DOM中的元素。
<input [(ngModel)]="hero.name">
ngModel是其中一种属性命令,属性命令改变元素的外观和行为。
Service
服务(Service)囊括的范围很大,任何对我们的应用起到作用的值、函数或特性都能成为service,常见的有:
- logging service
- data service
- message bus
- tax calculator
- application configuration
// app/logger.service.ts (class only)
export class Logger {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}
上面是一个service类的例子,作用是简单地在浏览器中log一些信息。
组件通常不直接完成一些工作,而是通过service来完成,例如从数据库获取数据、验证用户输入等等。它只维护属性和set|get这些属性的方法(为了数据绑定),而其他工作都交给service。
Dependency Injection
依赖注入(Dependency Injection)是在一个类中产生一个的新的实例的途径,这个实例是它require的依赖的实例。大多数的依赖都是service。
简单来说,Angular通过依赖注入来给组件提供它们需要的service。
// app/hero-list.component (constructor)
constructor(private _service: HeroService){ }
在TypeScript中,Angular通过构造函数的参数,从而知道要提供什么service给组件。以上面为例,HeroListComponent的构造函数表明需要的是HeroService。
Injector维护一个service实例的容器,如果需要的service实例(需要是指在Component Metadata中的providers字段声明?这样就能解释只有父组件声明的话,子组件会和父组件共享一个实例的现象)不在容器里,Injector会增加进它的容器里,当所有需要的service实例都在之后,Angular可以开始调用组件的构造函数。这就是依赖注入的过程。
最新文章
- 【2016-10-21】【坚持学习】【Day11】【.net 自带的三种委托】
- 【搬砖】【Python数据分析】Pycharm中plot绘图不能显示出来
- Picard 法求方程根
- 初用DataGrip,连接后看不到自己创建的数据库的问题
- 转:asmx迷10分钟升级成wcf熟手指南
- careercup-数学与概率 7.5
- linq学习笔记:将List<;T>; 转换为 Dictionary<;T Key,T Value>;
- TCP/IP笔记 三.运输层(4)——TCP链接管理与TCP状态机
- applicationContext.xml 配置(扫描)
- 读书笔记 effective c++ Item 27 尽量少使用转型(casting)
- 搭建基于Linux6.3+Nginx1.2+PHP5+MySQL5.5的Web服务器全过程----转载
- 使用JS取得焦点(focus)元素
- nginx系列3:搭建一个静态资源web服务器
- Myeclipse在debug模式下没加断点程序卡住,start模式下可以正常启动
- du
- package.json包描述文件说明
- ios 中pickerView城市选择和UIDatePicker生日选择
- python 正则re.search
- 一道区间DP的水题 -- luogu P2858 [USACO06FEB]奶牛零食Treats for the Cows
- IAR ------ 基本使用
热门文章
- <;2014 05 09>; Lucida:我的算法学习之路
- 2015-03-12——简析DOM2级事件
- Linux使用SecureCRT上传下载
- cas无缝单点登录(原创)
- HDU1081:To The Max(最大子矩阵,线性DP)
- 快速排序算法C语言版
- redhat 9.0安装完不能上网解决办法(补) - 并附上redhat9.0 下载链接
- windows8系统安装MongoDB 2.6.3配置服务启动
- LeetCode:二进制手表【401】
- kubernetes1.9 手动安装