初識Angular2

時間 2019-11-21

標籤 angular2 angular 欄目 AngularJS 简体版

原文原文鏈接

初識Angular2

寫一個Angular2的Hello World應用至關簡單，分三步走：javascript

1. 引入Angular2預約義類型html

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

import是ES6的關鍵字，用來從模塊中引入類型定義。在這裏，咱們從angular2模塊庫中引入了三個類型： Component類、View類和bootstrap函數。java

2. 實現一個Angular2組件bootstrap

實現一個Angular2組件也很簡單，定義一個類，而後給這個類添加註解：angular2

1. @Component({selector:"ez-app"})
2. @View({template:"<h1>Hello,Angular2</h1>"})
3. class EzApp{}

class也是ES6的關鍵字，用來定義一個類。@Component和@View都是給類EzApp附加的元信息，被稱爲註解/Annotation。app

@Component最重要的做用是經過selector屬性（值爲CSS選擇符），指定這個組件渲染到哪一個DOM對象上。 @View最重要的做用是經過template屬性，指定渲染的模板。框架

3. 渲染組件到DOM函數

將組件渲染到DOM上，須要使用自舉/bootstrap函數：spa

bootstrap(EzApp);

這個函數的做用就是通知Angular2框架將EzApp組件渲染到DOM樹上。code

簡單嗎？我知道你必定還有疑問，彆着急，咱們慢慢把缺失的知識點補上！

把@Component的selector屬性改成"ez-app"，還應該改哪裏能夠得到和示例一樣的結果？

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello,angular2</title>
    <!--模塊加載器-->
    <script type="text/javascript" src="lib/system@0.16.11.js"></script>
    <!--Angular2模塊庫-->
    <script type="text/javascript" src="lib/angular2.dev.js"></script>
    <script>
        //設置模塊加載規則
        System.baseURL = document.baseURI;
        System.config({
            map:{traceur:"lib/traceur"},
            traceurOptions: {annotations: true}
        });
    </script>        
</head>
<body>
    <!--組件渲染錨點-->
    <my-app></my-app>
    
    <!--定義一個ES6腳本元素-->
    <script type="module">
        //從模塊庫引入三個類型定義
        import {Component,View,bootstrap} from "angular2/angular2";
        
        //組件定義
        @Component({selector:"my-app"})
        @View({template:"<h1>Hello,Angular2</h1>"})
        class EzApp{}       
        
        //渲染組件
        bootstrap(EzApp);
    </script>
</body>
</html>

相關標籤/搜索

每日一句

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