Angular2入门（四）

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gett/p/5036487.html

文章标签：

#javascript #移动开发 #ViewUI

本文深入探讨了Angular2中组件为中心的自举过程与多种渲染引擎的支持，揭示了其与Angular1.x的区别，并通过代码示例展示了如何使用Angular2的模块加载器和组件渲染。

初步小结

如果你了解一点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>