AngularJS2.0

Angular1.X——>Angular2原因

性能的限制

由于Angular1.X最初的架构限制(比如绑定和模版机制),性能的提升已经非常困难了

Angular1.X对WEB组件的支持都不够好

移动化

Angular1.x没有针对移动 应用特别优化,并且缺少一些关键的特性,比如:缓存预编译的视图、触控支持等。

简单易行

Angular团队希望在Angular2中将复杂性 封装地更好一些,让暴露出来的概念和开发接口更简单

ES6工具链

要让Angular2应用跑起来不是件轻松的事,因为它用了太多还不被当前主流浏览器支持 的技术。所以,我们需要一个工具链

Angular2是面向未来的科技,要求浏览器支持ES6+,我们现在要尝试的话,需要加一些 垫片来抹平当前浏览器与ES6的差异

systemjs - 通用模块加载器,支持AMD、CommonJS、ES6等各种格式的JS模块加载
es6-module-loader - ES6模块加载器,systemjs会自动加载这个模块
traceur - ES6转码器,将ES6代码转换为当前浏览器支持的ES5代码。systemjs会自动加载 这个模块。

Angular2的Hello World(3步走)

####引入Angular2预定义类型

// import是ES6的关键字   
// 从angular2模块库中引入了三个类型:       
// Component类、View类和bootstrap函数    

import {Component,View,bootstrap} from "angular2/angular2";

实现一个Angular2组件

// 定义类EzApp,然后给这个类添加注解@Component和@View
// @Component最重要的作用是通过selector属性
//   (值为CSS选择符),指定这个组件渲染到哪个DOM对象上。
// @View最重要的作用是通过template属性,指定渲染的模板。
@Component({selector:"ez-app"})
@View({template:"<h1>Hello,Angular2</h1>"})
class EzApp{}

渲染组件到DOM

// 这个函数的作用:通知Angular2框架将EzApp组件渲染到DOM树上。
bootstrap(EzApp);

bootstrap :

// 1.以组件为核心
// Angular1.x : bootstrap是围绕DOM元素展开的,无论你使用ng-app还是手动执行bootstrap()函数,都是建立在DOM之上的。
// Angular2 :bootstrap是围绕组件开始的,你定义一个组件,然后启动它。如果没有一个组件, 你甚至都没有办法使用Angular2

// 2.支持多种渲染引擎
// 以组件而非DOM为核心,意味着Angular2在内核隔离了对DOM的依赖 - DOM仅仅作为一种可选的渲染引擎存在:

解释

Angular2解析流程

Angular2解析流程