最新Angular2案例rebirth开源
在過去的幾年時(shí)間里，Angular1.x顯然是非常成功的。但由于最初的架構(gòu)設(shè)計(jì)和Web標(biāo)準(zhǔn)的快速發(fā)展，逐漸的顯現(xiàn)出它的滯后和不適應(yīng)。這些問題包括性能瓶頸、滯后于極速發(fā)展的Web標(biāo)準(zhǔn)、移動(dòng)化多平臺應(yīng)用，學(xué)習(xí)難度等。
所以Angular團(tuán)隊(duì)最終決定以全新方式構(gòu)建Angular2框架。Angular2框架現(xiàn)在已經(jīng)進(jìn)入RC6版本，很快它就將進(jìn)入最終發(fā)布版。Angular2帶來了很多不錯(cuò)的特性，它們包括跨平臺、高性能、高效開發(fā)，擁抱web標(biāo)準(zhǔn)等等。
由于在Angular中引入了render層隔離設(shè)計(jì)，所以它也很容易實(shí)現(xiàn)跨平臺的拓展。多平臺拓展，理論上只需要實(shí)現(xiàn)目標(biāo)平臺的render層處理邏輯。目前在Angular2的生態(tài)圈中已有的跨平臺框架如下：
-
Web：?Angular框架自身(https://angular.io/);
-
Universal / Isomorphic:?Universal(https://universal.angular.io/);
-
Progressive Web App:?mobile-toolkit(https://mobile.angular.io/);
-
NativeScript:?nativescript-angular(https://github.com/NativeScript/nativescript-angular);
-
React Native:?react-native-renderer(https://github.com/angular/react-native-renderer);
-
Ionic2:?Ionic2(http://ionic.io/2/);
-
Electron:?angular-electron(https://github.com/angular/angular-electron/);
-
…....
Angular2架構(gòu)的重新設(shè)計(jì)，使得其在性能方面也得到了巨大的改善：
-
組件樹和單向的@Input、@Output使得變更的影響變得可預(yù)知，不再需要Angular1那樣多次的digest直到穩(wěn)定；以及結(jié)合ChangeDetectionStrategy.OnPush與immutablejs或者是Rxjs，Angular2的變更檢查算法復(fù)雜度降為了log(n)。相對于Angular1，得到了至少5倍的性能提升；
-
Universal服務(wù)端渲染能夠更好提升首屏加載的性能，以及單頁面應(yīng)用的SEO問題；
-
AOT技術(shù)引入，能夠讓組件處理的生成代碼提前到構(gòu)建時(shí)期；再加上TypeScript的tree shaking等技術(shù)，能夠更大化的減小加載JavaScript文件大小和提升運(yùn)行時(shí)性能；
-
Web端Web Worker的實(shí)現(xiàn)，能夠更好的解放我們的UI線程，得到更好的而用戶體驗(yàn)，以及性能的提升；
不僅僅這些，Angular2還有很多的優(yōu)秀特性。如：基于TypeScript的靜態(tài)類型檢查、擁抱web標(biāo)準(zhǔn)（Shadow dom，fetch API）等等。
總之，Angular2是一門值得我們學(xué)習(xí)的優(yōu)秀前端框架。隨著Angular2進(jìn)入了RC6版本，意味正式發(fā)布版將不遠(yuǎn)矣。開始學(xué)習(xí)Angular2的時(shí)機(jī)已經(jīng)到了。
?
同時(shí)筆者也開源了自己的rebirth項(xiàng)目供大家學(xué)習(xí)。它是一個(gè)利用Angular2開發(fā)的博客系統(tǒng)前端部分。它涉及到的Angular2知識點(diǎn)非常的全面，包括：組件化，自定義directive，路由，HTTP交互，Template drive form和Reactive form，異步路由，jwt token認(rèn)證，資源權(quán)限控制，動(dòng)態(tài)加載component，jQuery插件集成等常用知識點(diǎn)。
同時(shí)rebirth項(xiàng)目也集成了很多前端優(yōu)秀的技術(shù)實(shí)踐：
-
Angular2 + rxjs
-
bootstrap-sass
-
codemirror + markdownit(online markdown文檔編輯器)
-
webpack2 + DashboardPlugin(代碼打包)
-
TypeScript2 + @types
-
stubby(數(shù)據(jù)mock框架)
-
tslint + codelyzer(ts代碼和Angular2組件靜態(tài)檢查)
-
angular2-template-loader(Angular2 component的html、css打包)
-
karma + phantomjs(TDD開發(fā))
-
sass + postcss(css樣式組織)
-
typedoc(ts文檔)
-
fontgen-loader(icon font)
-
.......
在這里為大家放上幾張rebirth效果圖，供大家預(yù)覽：
移動(dòng)端樣式：
PC端樣式：
?
?
?
?
希望大家能喜歡。有任何的問題可以在筆者的github提issue，筆者會(huì)在空閑時(shí)間為大家解答。
?
rebirth 項(xiàng)目地址：?https://github.com/greengerong/rebirth
?
轉(zhuǎn)載于:https://www.cnblogs.com/whitewolf/p/5851196.html
總結(jié)
以上是生活随笔為你收集整理的最新Angular2案例rebirth开源的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： FragmentActivity To
- 下一篇： iOS RSA加密