Angular2入门（四）

时间 2019-11-18

标签 angular2 angular 入门栏目 AngularJS 繁體版

原文原文链接

初步小结

若是你了解一点Angular1.x的bootstrap，可能隐约会感觉到Angular2中bootstrap的一些变化 - 我指的并不是代码形式上的变化。javascript

以组件为核心html

在Angular1.x中，bootstrap是围绕DOM元素展开的，不管你使用ng-app仍是手动执行bootstrap() 函数，自举过程是创建在DOM之上的。java

而在Angular2中，bootstrap是围绕组件开始的，你定义一个组件，而后启动它。若是没有一个组件，你甚至都没有办法使用Angular2！bootstrap

支持多种渲染引擎angular2

以组件而非DOM为核心，意味着Angular2在内核隔离了对DOM的依赖 - DOM仅仅做为一种可选的渲染引擎存在：app

上面的图中，DOM Render已经实现，Server Render正在测试，iOS Render和Android Render 是可预料的特性，虽然咱们看不到时间表。函数

这有点像React了。测试

例如：spa

 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>