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可以开始调用组件的构造函数。这就是依赖注入的过程。
Angular 2 Architecture Overview的更多相关文章
- Spring Security(一) —— Architecture Overview
摘要: 原创出处 https://www.cnkirito.moe/spring-security-1/ 「老徐」欢迎转载,保留摘要,谢谢! 1 核心组件 一直以来我都想写一写Spring Secur ...
- [Angular] Component architecture and Reactive Forms
It it recommeded that when deals with form component, we can create a container component to hold st ...
- 02 Architecture Overview
本章提要---------------------------------------------arthiecture, and some componentconnect to oracle这一章 ...
- Web application architecture overview
- BUILDING ANGULAR APPS USING FLUX ARCHITECTURE
Flux is an architectural pattern based on unidirectional data flow. Although it is originated in the ...
- 100 open source Big Data architecture papers for data professionals
zhuan :https://www.linkedin.com/pulse/100-open-source-big-data-architecture-papers-anil-madan Big Da ...
- Intel® RealSense™ SDK Architecture
In this article, we highlight some of the key changes that you can expect to see in the Intel RealSe ...
- Multitier architecture
Multitier architecture - Wikipedia https://en.wikipedia.org/wiki/Multitier_architecture Common layer ...
- UI Framework-1: Aura Graphics Architecture
Graphics Architecture Overview Each Aura Window owns a corresponding compositor layer. The layer tre ...
随机推荐
- Spoken English Practice (I'm having whatever you're having)
绿色:连读: 红色:略读: 蓝色:浊化: 橙色:弱读 下划线_为浊化 口语蜕变(2017/7/4) 英 ...
- Powershell Get-registerkey(susid)
$servers=get-content D:\serverregister.txt Get-registerkey -ComputerName $servers | select computer, ...
- Linux上添加服务(htttpd,samba等等)
service httpd restart 出现 httpd:unrecognized service 错误 vi /etc/rc.d/rc.local #在/etc/rc.d/rc.local中 ...
- 剑指Offer——重建二叉树
题目描述: 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7 ...
- jenkins 升级
升级Jenkins Jenkins的开发迭代非常快,每周发布一个开发版本,长期支持版每半年更新一次(ps:大版本更新).如此频繁的更新,怎么升级呢? war:下载新版的war文件,替换旧版本war文件 ...
- xshell上传下载文件
上传文件到服务器rz 从服务器下载文件sz
- 某游戏应用的redis 数据库结构设计(转)
add by zhj: 搜了一下作者,原来之前是网易的大牛.2011年的文章,有些老了,很多地方可以将string类型键转为hash类型,这样更节省内存,将key聚合在一起,也更简练. 原文:http ...
- Vue.js——框架
一.什么是VUE vue 是一个构建用户界面的javascript框架 特点:轻量,高效 特性:双向数据绑定,数据驱动视图 二.vue的使用 1.引入vue.js <script src=vue ...
- mybatis 插入之后返回id
usermapper.xml <insert id="insert" parameterType="app.models.User" keyPropert ...
- flex 客户端缓存SharedObject
读取缓存: usernameSO = SharedObject.getLocal('username'); if (usernameSO) { usernameSOAL = usernameSO.da ...