Service
RxJS6
棄用與廢除
ElementRef
Angular Elements
Ivy
Tree Shaking
ng update更新策略
angular6
〇?、前言
- 會更加注重工具的使用而不是框架
ng update;
ng add @angular/pwa
一炎辨、Service新的注入方式
- 現(xiàn)在有新的推薦方式來注冊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如果在應(yīng)用中沒有用到的話，是不會會被webpack中的搖樹優(yōu)化(tree-service)-(之前版本不是這樣子的)
describe('UserService',() => {
//angular6以后注釋掉的這些不需要了
<!-- beforeEach(() => TestBed.configureTesingModule({-->
<!-- providers:[UserService]-->
<!--})); -->
if('不返回用戶', () => {
const service =TestBed.get(UserService);
expect(service.list().length).toBe(2);
})
})
- 用上面的方式，所有的service用provideIn注冊后只有在真正用得到的時候才會被實(shí)例化己沛。
二疤孕、RxJS 6
- angular6現(xiàn)在內(nèi)部用RxJS6商乎，因此你要更新你的應(yīng)用
- 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);
)
//現(xià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發(fā)布了一個'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開發(fā)小組寫了一個 RxJS v5.x 向v6升級指南
- 注意：新發(fā)布了一款TypeScript語法檢測工具 -- 'rxjs-tslint' !鲜戒，內(nèi)含4項規(guī)則，使用'tslint --fix'可以自動將你的RxJS遷移到最新版本崩瓤，(這樣的話即使現(xiàn)在不會v6版本也沒關(guān)系)袍啡，
| 規(guī)則名字 | 簡介 |
|---|---|
| rxjs-collapse-imports | 將來自rxjs的多個對象導(dǎo)入到一個 |
| rxjs-pipeable-operators-only | 將有副影響的operators遷移到pipes管道里 |
| rxjs-no-static-observable-methods | 遷移靜態(tài)Observables方法調(diào)用 |
| rxjs-proper-imports | 升級 RxJS 5.x.x 里的import語法到RxJS 6.0 |
- YouTube的關(guān)于RxJS6介紹： https://www.youtube.com/watch?v=JCXZhe6KsxQ
三、棄用與廢除
- 棄用<template>--> 改用<ng-template>
- 如當(dāng)我們配合ngIf時會有這種情況出現(xiàn)
- 棄用@angular/http --> 改用
import { HttpClient } from '@angular/common/http';
四却桶、ElementRef
- 數(shù)據(jù)約束更嚴(yán)格
//原來方式：
@ViewChild('loginInput') loginInput: ElementRef;
ngAfterViewInit() {
this.loginInput.nativeElement.focus();
}
//現(xiàn)在：
@ViewChild('loginInput') loginInput: ElementRef<HTMLInputElement>;
ngAfterViewInit() {
//現(xiàn)在這個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組件，這是用于與框架無關(guān)的的方式定義新的HTML元素的web標(biāo)準(zhǔn)颖系。
//你可以自己創(chuàng)建一個組件
@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元素允許包裹組件作為標(biāo)準(zhǔn)的web組件嗅剖，這樣你就能將他們嵌在非-angular應(yīng)用里啦！
六嘁扼、Ivy: New Renderer
- 渲染器是將模版編譯成js代碼的部分
- 在angular6.0被重寫了,現(xiàn)在被叫做Ivy,目的：
- smaller - 更小的包
- faster - 更快的開發(fā)速度
- simpler - 更簡單的操作方式
- 特點(diǎn)
- tree-shaking webpack的搖樹優(yōu)化 只編譯我們用得到的代碼信粮，
- loacl 再次編譯時只會在有更改的codes基礎(chǔ)上進(jìn)行
- 現(xiàn)在還是非常實(shí)驗(yàn)性的，但會成為未來版本的默認(rèn)版本趁啸。
- 你可以通過在tsconfig配置文件里嘗試一下
"angularCompileOptions": {
"enableIvy": true
}
-
angluar開發(fā)組宣布新Ivy Renderer編譯Hello World app只需要2.7kb(從37kb ->2.7kb) !,包大小在未來會大幅度下降
2.7kb
七强缘、Tree Shaking
- 確保用不到的codes不會進(jìn)入到bundle編譯階段
- 特征
- 模版語法
- 生命周期鉤子
- 依賴注入
- 管道
- 內(nèi)容投影
- 查詢
- 結(jié)構(gòu)化指令
- 監(jiān)聽器
八、i18n國際化
- i18n目的在于讓產(chǎn)品無需作出打的改變就能適應(yīng)不同語言和地區(qū)需要不傅。對于程序員而言旅掂，在不修改內(nèi)部代碼的情況下，能根據(jù)不同語言及地區(qū)顯示相應(yīng)的界面访娶。
- 現(xiàn)在還只是原型商虐，還沒有真正可以應(yīng)用到實(shí)際生產(chǎn)過程中。
- 但angular6 在和i18n相關(guān)的方面已經(jīng)有發(fā)布 --貨幣的pipes崖疤， 貨幣管道的改進(jìn)方式具有很大的意義：
- 它不會使用兩位數(shù)的所有貨幣進(jìn)行輪換秘车，而是將貨幣四舍五入到最合適的位數(shù)（可以是3，如巴林的阿拉伯丁那劫哼， 或0像智利比索）叮趴。
- 如果需要，可以通過使用新的i18n函數(shù)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
