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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。