所有学习笔记内容均来自:
https://angular.cn/docs/ts/latest/guide/architecture.html
return this.http.get('/api/extsys/v1/cloud/vim/' + vimId)
.map((res: Response) => res.json())
.catch(this.handleError);
}
let headers = new Headers({'Content-Type': 'application/json'});
let options = new RequestOptions({headers: headers});
return this.http.post('/api/extsys/v1/cloud/vim/' + vim.vimId, vim, options)
.map((res: Response) => res.json())
.catch(this.handleError);
}
let headers = new Headers({'Content-Type': 'application/json'});
let options = new RequestOptions({headers: headers});
return this.http.delete('/api/extsys/v1/cloud/vim/' + vimId, options)
.map((res: Response) => res.json())
.catch(this.handleError);
}
AngularJs架构
这个架构图展现了 Angular 应用中的 8 个主要构造块:
1.Module
Angular 模块(无论是
根模块
还是
特性模块
)都是一个带有
@NgModule
装饰器的类。
NgModule
是一个装饰器函数,它接收一个用来描述模块属性的元数据对象。其中最重要的属性是:
-
exports
- declarations 的子集,可用于其它模块的组件模板。 -
imports
- 本模块声明的组件模板需要的类所在的其它模块。 -
providers
- 服务的创建者,并加入到全局服务列表中,可用于应用任何部分。 -
bootstrap
- 指定应用的主视图(称为根组件),它是所有其它视图的宿主。只有根模块才能设置 bootstrap
属性。 -
heroes: Hero[]; selectedHero: Hero;
ngOnInit() { this.heroes = this.service.getHeroes(); }
标签就是一个用来表示新组件
HeroDetailComponent
的自定义元素。数据绑定
- {{hero.name}}
-
ps:DOM 定义了访问 HTML 和 XML 文档的标准:
"W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
指令 (directive)
组件是一个
带模板的指令,
虽然
严格来说组件就是一个指令
,但是组件非常独特,并在 Angular 中位于中心地位,所以在架构概览中,我们把组件从指令中独立了出来。
还有两种
其它
类型的指令:
结构型
指令和
属性 (attribute) 型
指令。
两个内置的结构型指令:
属性型
指令修改一个现有元素的外观或行为。 在模板中,它们看起来就像是标准的 HTML 属性,故名。
ngModel
指令就是属性型指令的一个例子,它实现了双向数据绑定。 ngModel
修改现有元素(一般是
)的行为:设置其显示属性值,并响应 change 事件。
[(ngModel)]="hero.name">
服务
getVim(vimId: string): Observable {
modifyVim(vim: Vim): Observable {
delVim(vimId: string): Observable {
依赖注入
Angular 使用依赖注入来提供新组件以及组件所需的服务。
app/app.module.ts
providers: [
BackendService,
HeroService,
Logger
],
或者,也可以在@Component
元数据中的providers
属性中把它注册在组件层:
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: 'hero-list.component.html',
providers: [ HeroService ]
})
在main.ts中引导
引导即时编译的浏览器应用的推荐地点是在
app
目录中一个名为
app/main.ts
的单独文件中。
引导过程搭建运行环境,从模块的
bootstrap
数组中提出
根
AppComponent
, 创建该组件的实例,并将其插入到组件
selector
标识的元素标签中。
AppComponent
选择器 — 在这里以及文档大部分例子中 — 是
my-app
, 所以 Angular 在
index.html
中查找像这样的
标签...