最新Angular2案例rebirth开源

在过去的几年时间里，Angular1.x显然是很是成功的。但因为最初的架构设计和Web标准的快速发展，逐渐的显现出它的滞后和不适应。这些问题包括性能瓶颈、滞后于极速发展的Web标准、移动化多平台应用，学习难度等。

因此Angular团队最终决定以全新方式构建Angular2框架。Angular2框架如今已经进入RC6版本，很快它就将进入最终发布版。Angular2带来了不少不错的特性，它们包括跨平台、高性能、高效开发，拥抱web标准等等。

因为在Angular中引入了render层隔离设计，因此它也很容易实现跨平台的拓展。多平台拓展，理论上只须要实现目标平台的render层处理逻辑。目前在Angular2的生态圈中已有的跨平台框架以下：

• 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架构的从新设计，使得其在性能方面也获得了巨大的改善：

• 组件树和单向的@Input、@Output使得变动的影响变得可预知，再也不须要Angular1那样屡次的digest直到稳定；以及结合ChangeDetectionStrategy.OnPush与immutablejs或者是Rxjs，Angular2的变动检查算法复杂度降为了log(n)。相对于Angular1，获得了至少5倍的性能提高；

• Universal服务端渲染可以更好提高首屏加载的性能，以及单页面应用的SEO问题；

• AOT技术引入，可以让组件处理的生成代码提早到构建时期；再加上TypeScript的tree shaking等技术，可以更大化的减少加载JavaScript文件大小和提高运行时性能；

• Web端Web Worker的实现，可以更好的解放咱们的UI线程，获得更好的而用户体验，以及性能的提高；

不单单这些，Angular2还有不少的优秀特性。如：基于TypeScript的静态类型检查、拥抱web标准（Shadow dom，fetch API）等等。

总之，Angular2是一门值得咱们学习的优秀前端框架。随着Angular2进入了RC6版本，意味正式发布版将不远矣。开始学习Angular2的时机已经到了。

 

同时笔者也开源了本身的rebirth项目供你们学习。它是一个利用Angular2开发的博客系统前端部分。它涉及到的Angular2知识点很是的全面，包括：组件化，自定义directive，路由，HTTP交互，Template drive form和Reactive form，异步路由，jwt token认证，资源权限控制，动态加载component，jQuery插件集成等经常使用知识点。

同时rebirth项目也集成了不少前端优秀的技术实践：

• Angular2 + rxjs

• bootstrap-sass

• codemirror + markdownit(online markdown文档编辑器)

• webpack2 + DashboardPlugin(代码打包)

• TypeScript2 + @types

• stubby(数据mock框架)

• tslint + codelyzer(ts代码和Angular2组件静态检查)

• angular2-template-loader(Angular2 component的html、css打包)

• karma + phantomjs(TDD开发)

• sass + postcss(css样式组织)

• typedoc(ts文档)

• fontgen-loader(icon font)

• .......

在这里为你们放上几张rebirth效果图，供你们预览：

移动端样式：

PC端样式：

 

 

 

 

但愿你们能喜欢。有任何的问题能够在笔者的github提issue，笔者会在空闲时间为你们解答。

 

rebirth 项目地址： https://github.com/greengerong/rebirth