走心干货-angular6新特性简述

2018-05-28 本文已影响1184人小宝薯

Service
RxJS6
弃用与废除
ElementRef
Angular Elements
Ivy
Tree Shaking
ng update更新策略

angular6

〇️、前言

会更加注重工具的使用而不是框架

ng update;
ng add @angular/pwa

一、Service新的注入方式

现在有新的推荐方式来注册provider---直接在ts文档里使用@Injectable(),然后使用provideIn新属性。
angular6 之前注册Service

import { UserService } from './user.service';
+
@Injectable()
export class UserService{
    
}
+
@NgModule({
   ...
   providers: [
    UserService
   ],
   ...
})

angular6 注册Service

@Injectable({
    provideIn:'root' //新添的,表示从root根部就开始注入
})
export class UserService{
}

+
   @NgModule({
   providers: [], //删掉了之前版本需求的UserService
  
})

angular6开始，一个service如果在应用中没有用到的话，是不会会被webpack中的摇树优化(tree-service)-(之前版本不是这样子的)

 describe('UserService',() => {
 //angular6以后注释掉的这些不需要了
    <!-- beforeEach(() => TestBed.configureTesingModule({-->
    <!--  providers:[UserService]-->
    <!--})); -->
    if('不返回用户', () => {
      const service =TestBed.get(UserService);
      expect(service.list().length).toBe(2);
    })
  })

用上面的方式，所有的service用provideIn注册后只有在真正用得到的时候才会被实例化。

二、RxJS 6

angular6现在内部用RxJS6，因此你要更新你的应用
RxJS 6改变了import的方式

//RxJS5 版本
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/map';

 const squares$: Observable<number> = Observable.of(1,2).map(n => n * n);

//RxJS5.5版本
 import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { map } from 'rxjs/operators';

 const squares$: Observable<number> = of(1,2).pipe(map(n => n * n);
 )

//现在引入RxJS 6.0
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
const squares$：Observable<number> = of(1, 2).pipe(
  map(n => n * n)
  )

RxJS发布了一个'rxjs-compat'库，这样的话即使你目前用的不是6.0版本，他也会帮你去编译成6.0的新语法。

//RxJS6以前：
"dependencies": {
//...
"rxjs":"5.5.10",
"zone.js" :"0.8.26"
}

//RxJS6：
"dependencies": {
//...
"rxjs":"6.0.0",
"rxjs-compat":"6.0.0",
"zone.js" :"0.8.26"
}

angular开发小组写了一个 RxJS v5.x 向v6升级指南
注意：新发布了一款TypeScript语法检测工具 -- 'rxjs-tslint' !，内含4项规则，使用'tslint --fix'可以自动将你的RxJS迁移到最新版本，(这样的话即使现在不会v6版本也没关系)，

规则名字	简介
rxjs-collapse-imports	将来自rxjs的多个对象导入到一个
rxjs-pipeable-operators-only	将有副影响的operators迁移到pipes管道里
rxjs-no-static-observable-methods	迁移静态Observables方法调用
rxjs-proper-imports	升级 RxJS 5.x.x 里的import语法到RxJS 6.0

YouTube的关于RxJS6介绍： https://www.youtube.com/watch?v=JCXZhe6KsxQ

三、弃用与废除

弃用<template>--> 改用<ng-template>
- 如当我们配合ngIf时会有这种情况出现
弃用@angular/http --> 改用

import { HttpClient } from '@angular/common/http';

四、ElementRef

数据约束更严格

//原来方式：
@ViewChild('loginInput') loginInput: ElementRef;

ngAfterViewInit() {
this.loginInput.nativeElement.focus();
}

//现在：
@ViewChild('loginInput') loginInput: ElementRef<HTMLInputElement>;

ngAfterViewInit() {
//现在这个nativeElement是"HTMLInputElement"
this.loginInput.nativeElement.focus();
}

五、Angular Elements

export class AppModule {
 constructor(private injector:Injector) { }
  ngDoBootstrao() {
    const AppElement = createCustomElement({
      AppComponent, { Injector: this.injector}
    });
    customElements.define('my-app',AppElement);
  }
}

angular elements是作为自定义元素打包的angular组件，这是用于与框架无关的的方式定义新的HTML元素的web标准。

//你可以自己创建一个组件
@Component({
  selector: 'ns-amelia',
  template: `<p>{{ ameliaName }}</p>`,
})
export class AmeliaComponent {
  @Input() ameliaName;
}

//将其定义为自定义元素
import { createCustomElement } from '@angular/elements';

platformBrowserDynamic().bootstrapModule(ameliaModule).then(({ injector }) {
    //获取es6的类
    const AmeliaElement = createCustomElement(AmeliaComponent, { injector });
    //用它来注册自定义元素
    customElements.define('ns-amelia',AmeliaElement)
}

angular元素允许包裹组件作为标准的web组件，这样你就能将他们嵌在非-angular应用里啦！

六、Ivy: New Renderer

渲染器是将模版编译成js代码的部分
在angular6.0被重写了,现在被叫做Ivy,目的：
- smaller - 更小的包
- faster - 更快的开发速度
- simpler - 更简单的操作方式
特点
- tree-shaking webpack的摇树优化只编译我们用得到的代码，
- loacl 再次编译时只会在有更改的codes基础上进行
现在还是非常实验性的，但会成为未来版本的默认版本。
你可以通过在tsconfig配置文件里尝试一下

"angularCompileOptions": {
    "enableIvy": true
}

angluar开发组宣布新Ivy Renderer编译Hello World app只需要2.7kb(从37kb ->2.7kb) !,包大小在未来会大幅度下降

2.7kb

七、Tree Shaking

确保用不到的codes不会进入到bundle编译阶段
特征
- 模版语法
- 生命周期钩子
- 依赖注入
- 管道
- 内容投影
- 查询
- 结构化指令
- 监听器

八、i18n国际化

i18n目的在于让产品无需作出打的改变就能适应不同语言和地区需要。对于程序员而言，在不修改内部代码的情况下，能根据不同语言及地区显示相应的界面。
现在还只是原型，还没有真正可以应用到实际生产过程中。
但angular6 在和i18n相关的方面已经有发布 --货币的pipes，货币管道的改进方式具有很大的意义：
- 它不会使用两位数的所有货币进行轮换，而是将货币四舍五入到最合适的位数（可以是3，如巴林的阿拉伯丁那，或0像智利比索）。
- 如果需要，可以通过使用新的i18n函数getNumberOfCurrencyDigits以编程方式检索此值。
attention: Build time is proportional to the size of the change, not the size of the application.

九、ng update升级策略

解决RxJS6的问题

npm install --save rxjs-compat

或者：

升级import方式与operators

将<template>替换成<ng-template>
逐步将老的Http client替换掉
配合Angular Elements & Ivy 使用

九、animations

对于angular6而言，web-animations-js工具不再是动画必需的，除非你使用的是animationBuilder,如果浏览器不支持element.animate API,那么angular6会退回到使用CSS的keyframes

angular tools

走心干货-angular6新特性简述

〇️、前言

一、Service新的注入方式

二、RxJS 6

三、弃用与废除

四、ElementRef

五、Angular Elements

六、Ivy: New Renderer

七、Tree Shaking

八、i18n国际化

九、ng update升级策略

九、animations

猜你喜欢

热点阅读