Angular4.0架构详解
简书链接 很久没写这种比较偏概念类的东西了,不过我觉得没有形成一个知识架构,学习效率会大打折扣。在这里把我的所理解的知识分享给大家,部分内容引用自官方文档。下面进入主题 Angular架构概览先来看一下官方放出的架构图。
这个架构图展现了 Angular 应用中的 8 个主要构造块:
接下来我按顺序并结合图来讲解一下。 1.模块 (module)Angular或者ionic新建的项目,都会存在一个根模块,默认名是AppModule。如果你使用了模块化来创建应用,包括AppModule,每个都会存在一个@NgModule装饰器的类(虽然他很像java中的注解,但是他的官方命名叫装饰器)。我们新建的页面,如果不使用懒加载,都要在@NgModule中先声明后使用。 下面举个例子,简单介绍一下@NgModule中的内容 //app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ],providers: [ Logger ],declarations: [ AppComponent ],exports: [ AppComponent ],bootstrap: [ AppComponent ] }) export class AppModule { }
2.组件 (component)、模板 (template)、元数据 (metadata)这次我们把这三点一起来讲,先看一下这段代码 //hero-list.component.ts @Component({ selector: 'hero-list',templateUrl: './hero-list.component.html',providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . . */ } Component
template metadata
3.数据绑定 (data binding)这里一共展示四种数据绑定,看一下示例代码: //插值表达式 显示组件的hero.name属性的值 <li>{{hero.name}}</li> //属性绑定 把父组件selectedHero的值传到子组件的hero属性中 <hero-detail [hero]="selectedHero"></hero-detail> //事件绑定 用户点击英雄的名字时调用组件的selectHero方法 <li (click)="selectHero(hero)"></li> //双向绑定 数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件,把属性值设置为最新的值 <input [(ngModel)]="hero.name"> 可能大家对各种括号看的眼花了,总结一下:
4.指令 (directive)严格来说组件就是一个指令,但是组件非常独特,并在 Angular 中位于中心地位,所以在架构概览中,我们把组件从指令中独立了出来。 While a component is technically a directive,components are so distinctive and central to Angular applications that this architectural overview separates components from directives. 结构型指令是ngFor、ngIf这种的,通过在 DOM 中添加、移除和替换元素来修改布局。 属性型指令ngModel这种的,用来修改一个现有元素的外观或行为。 Angular 还有少量指令,它们或者修改结构布局(例如 ngSwitch), 或者修改 DOM 元素和组件的各个方面(例如 ngStyle和 ngClass)。之后我会单独写一篇讲他们用法的文章。
5.服务 (service)官方文档的概念: 这就像你在iOS或者安卓里单独抽了一个类叫httpService,封装了网络请求服务一样,不是具体的什么东西,就是一个概念了解下就行。
6.依赖注入 (dependency injection)依赖注入是提供类的新实例的一种方式,还负责处理类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。 比如我们要给某组件导入HomeService这个服务,看这段代码: constructor(private service: HeroService) { ... } 这个constructor就是 当 Angular 创建组件时,会首先为组件所需的服务请求一个注入器 (injector)。我们必须先用注入器(injector)为HeroService注册一个提供商(provider)。 看一下下面的代码,意思就是我们必须在providers写上才能用 @Component({ selector: 'hero-list',providers: [ HeroService ] })
最后给大家推荐一些学习资源 《Angular权威教程》 Angular2.0视频教程 Angular中文文档 TypeScript中文文档 Rxjs官方文档中文翻译 Angular现在出到4.0了,大家有可能会担心网上Angular2.0相关的内容会过时,其实不必有这种担心。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 如何在bash脚本中添加SSH已知主机?
- Angular / CLI 6.x中的自定义原理图构建没有错误,但我无法使
- angularjs – ngShow加载延迟问题
- angular版本计划,为什么从2直接到4,没有angular3
- twitter-bootstrap – Twitter Bootstrap Carousel显示两项
- Bootstrap -- 表格样式、表单布局
- Dockerfile构建镜像实战
- 关于JAX-WS的Unable to create JAXBContext错误
- angularjs – Yeoman Angular app,grunt watch .less files
- 增加与bash