初步小结
如果你了解一点Angular1.x的bootstrap,可能隐约会感受到Angular2中bootstrap的一些 变化 - 我指的并非代码形式上的变化。
以组件为核心
在Angular1.x中,bootstrap是围绕DOM元素展开的,无论你使用ng-app还是手动执行bootstrap() 函数,自举过程是建立在DOM之上的。
而在Angular2中,bootstrap是围绕组件开始的,你定义一个组件,然后启动它。如果没有一个组件, 你甚至都没有办法使用Angular2!
支持多种渲染引擎
以组件而非DOM为核心,意味着Angular2在内核隔离了对DOM的依赖 - DOM仅仅作为一种可选的渲染引擎存在:
上面的图中,DOM Render已经实现,Server Render正在测试,iOS Render和Android Render 是可预料的特性,虽然我们看不到时间表。
这有点像React了。
例如:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>hello,angular2</title> 6 <!--模块加载器--> 7 <script type="text/javascript" src="lib/system@0.16.11.js"></script> 8 <!--Angular2模块库--> 9 <script type="text/javascript" src="lib/angular2.dev.js"></script> 10 <script> 11 //设置模块加载规则 12 System.baseURL = document.baseURI; 13 System.config({ 14 map:{traceur:"lib/traceur"}, 15 traceurOptions: {annotations: true} 16 }); 17 </script> 18 </head> 19 <body> 20 <!--组件渲染锚点--> 21 <my-app></my-app> 22 23 <!--定义一个ES6脚本元素--> 24 <script type="module"> 25 //从模块库引入三个类型定义 26 import {Component,View,bootstrap} from "angular2/angular2"; 27 28 //组件定义 29 @Component({selector:"my-app"}) 30 @View({template:"<h1>Angular2 - 以组件为基石</h1>"}) 31 class EzApp{} 32 33 //渲染组件 34 bootstrap(EzApp); 35 </script> 36 </body> 37 </html>