最新Angular2案例rebirth开源

简介:

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

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

由于在Angular中引入了render层隔离设计,所以它也很容易实现跨平台的拓展。多平台拓展,理论上只需要实现目标平台的render层处理逻辑。目前在Angular2的生态圈中已有的跨平台框架如下:

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


本文转自破狼博客园博客,原文链接:http://www.cnblogs.com/whitewolf/p/5851196.html,如需转载请自行联系原作者

目录
相关文章
|
3月前
|
Web App开发 UED 开发者
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
谈谈企业级 Angular 应用的二次开发 - 基于 Angular Component 替换的 Extensibility 支持案例介绍
38 1
|
6月前
|
设计模式 前端开发 JavaScript
11分布式电商项目 - AngularJS简介
11分布式电商项目 - AngularJS简介
28 0
|
8月前
|
前端开发
angular2快速构建项目
angular2快速构建项目
61 0
|
8月前
|
前端开发 JavaScript
Angular框架入门指南
Angular框架入门指南
153 0
|
前端开发 测试技术 C++
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)
285 0
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)
|
前端开发 JavaScript
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
399 0
Angular实战之使用NG-ZORRO创建一个企业级中后台框架(入门篇)
|
JavaScript 开发工具 git
angular2 搭建项目
angular2 搭建项目
1521 0
|
JavaScript 前端开发 C#
基于angular4.0开发的企业级快速开发项目,已经开源
项目简介 angular-base 是一个以 Angular 4.0 为基础的,帮助企业 快速开发的种子项目,开箱即用,检出即用。 项目首页预览图 设计思想 君子性非异也,善假于物也。
1688 0