前言:
继Gulp研究之后,开始了Angular2的研究之旅,这样的研究层次呈递进关系,两者之间理论知识相互牵连,后者的进一步学习使得前者的研究更加地清晰。接着请跟着小编一起来看看吧。
正文:
含义:
Angular:英 [ ˈæŋgjələ(r) ] 美 [ ˈæŋɡjəlɚ ],这个大家会需要的。
Angular2是一种前端框架,用四个字来形容,即为“开箱即用”,封装性好,融合了现代前端的各种先进理念,在框架、文档、工具等各个层面提供了全方位的支持。
渗透的原则:
(一)OCP(Open Closed Principle)-开闭原则
对扩展开放,对修改关闭,此原则有利于建立一个稳定、灵活的系统
(二)SoC-关注点分离
1.渲染与交互分离
使用内存渲染引擎,以此实现服务端渲染;用Native渲染引擎,编译出原生程序NativeScript
2.数据供应与变更检测
自由使用RxJS以及ImmutableJS在内的第三方数据框架和工具。
PS:这些原则在技术上表现为:DI(依赖注入)、生命周期钩子、组件等
特性:
(一)良好的局部性
Angular2通过声明式界面、组件样式以及独立模板文件等使得在合作开发中获得强有力的条件。
(二)逃离版本魔域
合作开发中,版本必然是潜在问题,如若因为升级,而导致某些软件无法使用,或者说不兼容,有可能导致工作要重新来过,这无疑是噩梦。Angular2中有单元测试和E2E(端对端)测试,测试遵循SemVer语义化版本标准,同时融入了CI这种机制。在这样的前提之下,在开发过程中,版本升级不再是问题,可平滑过渡到升级版本,即使出现破坏性变更,也会明确记录在文档中,并且给出解释。在这样的性能之下,还害怕版本问题吗?
(三)预见性
科技发展日新月异,为与时俱进,相应的基本原则和方向也在随之改变。怎样能及时把握这些原则和方向,继而开发出高性能、用户体验度好的软件呢?必然要随时掌握改变的动态。Angular2做到了这点,其采用的标准草案有:
1.WebWorker
这种标准的制定面向对象是计算,将繁重的计算工作移入辅助线程,不影响界面线程的运行
2.WebComponents
此标准体现在Angular2的组件化体系的设计上。
3.CSS Scoping
面向对象是CSS模块化技术,它相当于一个容器,关于CSS模块化技术的改变最终会统一到此标准上。
Angular2的预见性就是指参照多方标准,继而它的改变是在时代前沿的,此框架的发展也是螺旋式上升的。
(四)高速
1.变更检测
(1)检测策略由“多轮检查、直到稳定”→“一轮检查,直接稳定”
(2)变更检测算法移入WebWorker的辅助线程中
2.首加载
Angular以及所有前端单页引用程序首次加载速度缓慢,Angular2通过独立的服务端渲染引擎完美解决,在NodeJS实现服务端的内存渲染,即为在内存中把DOM结构渲染出阿里并发回给浏览器,同时优化了搜索引擎。
实战:
(一)搭建运行环境
1.node.js:https://nodejs.org/en/download/
2.cnpm :命令提示符运行:npm install cnpm -g --registry=https://registry.npm.taobao.org
3.git :https://git-scm.com/downloads
PS:在进行上述安装之前要先定位项目创建和运行位置
(二)实例运行
在命令提示符中以管理员的身份运行:
1.git clone --depth 1 http://github.com/mgechev/angular2-seed.git ******从git服务器上下载项目
2.cd angular2-seed ********定位所下载项目
3.cnpm install ********安装依赖
安装依赖成功:
4.cnpm start ********启动
(1)启动成功:
(2)导航到浏览器界面显示为:
后记:
Angular2的宏观把控也是逐步了解的,其实在进行此项研究时比较匆忙,刚开始的宏观了解远没有这样清晰,之后的验收促使自己要进行一个系统化的整理,继而得出以上结论,在实际的研究中,是从typescript开始着手的,敬请期待typescript是什么鬼。