Angular5 宏观把控

Angular5 宏观把控

1.首先，Angular5相对于Angular4有了一些新的特性：

　　（1）i18n国际化管道；

　　（2）一个组件可以以多个名称导出；

　　（3）使用httpClient；

　　　　相比于http，httpClient的功能更加完善丰富——引入不可变的请求/响应对象。通过使用拦截器将中间件逻辑添加到管道中。支持JSON主体类型，不再需要显式分析。HttpClient支持请求上传和响应下载的进度事件。

　　（4）5的渲染速度更快。移动设备体验更加优秀；另外，5的项目构建有所改进，编辑器也有所改进（这些等研究框架架构再详细了解）；

　　（5）动画功能有所丰富；

　　（6）表单验证功能更加完善；

　　　　表单验证中加载了一些新功能。通过使用字段或表单的有效性和值，将 updatedOn blur选项和 updatedOn submit选项添加到Formcontrols中，并且更新而不是每个输入事件。谷歌还推出了 updateOn对ngModelOptions的支持，通过延迟表单控件更新来提高其性能，直到Angular 5中的“模糊”或“提交”事件发生。

　　（7）路由的生命周期得以监听，以下是一些事件：GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationStart,ActivationEnd, ChildActivationStart, and ChildActivationEnd。

2.其次，angular5本身的特性：

　　（1）模块——以@NgModule装饰器的一个类；此外，本身还提供了一组以@angular修饰的的js库模块；

　　（2）组件——一个通用类，由一些方法和属性组成的一个API，控制部分可以重用的视图；

　　（3）模板template——以*ngFor、*ngIf、{{hero.name}}、(click)、[hero]等angular特有的形式等和页面样式等组成的部分，一般是HTML的形式，或者HTML片段；

　　（4）元数据——@Component部分；

　　（5）数据绑定——

1. 属性绑定和插值表达式 组件类-> 模板
2. 事件绑定：模板 -> 组件类
3. 双向绑定： 模板 <-> 组件类

　　<li>{{hero.name}}</li>

　　<app-hero-detail [hero]="selectedHero"></app-hero-detail>

　　<li (click)="selectHero(hero)"></li>

　　<input [(ngModel)]="hero.name">

　　（6）指令——实际上@Component就相当于1的@Directive

　　（7）服务——

　　（8）依赖注入——被依赖的服务需要injector

　　（9）路由

发表于 2018-05-08 15:24 李嘉威 阅读(...) 评论(...) 编辑收藏

刷新评论刷新页面返回顶部