Angular2 入門

 

1. 說明

該文檔為Angular2的入門文檔，可以根據該文檔的內如做出一個“helloworld”類型的Angualr2入門程序，通過該文檔可以初步了解Angular2的相關知識以及開發流程，同時搭建一套可用的開發環境。

環境：

node v6.2.2

typescript v1.8.2

  angular2 rc4

                          visual studio code

2. 環境安裝

如果機器上還木有node環境，請安裝最新的node環境。

3. 創建並配置

3.1 創建項目目錄

 創建一個文件夾 名稱為 ng2-helloworld

3.2 添加包定義與配置文件

往項目目錄下添加下列包定義與配置文件：

1. package.json 列出hellworld 程序的依賴，並定義了一些有用的腳本。

{

  "name": "ng2-helloworld",

  "version": "1.0.0",

  "description": "hello world",

  "scripts": {

    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",

    "lite": "lite-server",

    "tsc": "tsc",

    "tsc:w": "tsc -w"

  },

  "license": "ISC",

  "dependencies": {

    "@angular/common": "2.0.0-rc.4",

    "@angular/compiler": "2.0.0-rc.4",

    "@angular/core": "2.0.0-rc.4",

    "@angular/forms": "0.2.0",

    "@angular/http": "2.0.0-rc.4",

    "@angular/platform-browser": "2.0.0-rc.4",

    "@angular/platform-browser-dynamic": "2.0.0-rc.4",

    "@angular/router": "3.0.0-beta.1",

 

    "systemjs": "0.19.27",

    "core-js": "^2.4.0",

    "reflect-metadata": "^0.1.3",

    "rxjs": "5.0.0-beta.6",

    "zone.js": "^0.6.12",

 

    "bootstrap": "^3.3.6"

  },

  "devDependencies": {

    "concurrently": "^2.0.0",

    "lite-server": "^2.2.0",

"typescript": "^1.8.10"

}

}

1. tsconfig.json 是 TypeScript 的編譯器配置文件。

{

  "compilerOptions": {

    "target": "es5",

    "module": "commonjs",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": false

  }

}

 

1. systemjs.config.js 是 SystemJS 的配置文件，本程序采用SystemJS作為模塊加載器。

/**

 * System configuration for Angular 2 samples

 * Adjust as necessary for your application needs.

 */

(function (global) {

  // map tells the System loader where to look for things

  var map = {

    'app': 'app', // 'dist',

    '@angular': 'node_modules/@angular',

    'rxjs': 'node_modules/rxjs'

  };

  // packages tells the System loader how to load when no filename and/or no extension

  var packages = {

    'app': { main: 'main.js', defaultExtension: 'js' },

    'rxjs': { defaultExtension: 'js' }

  };

  var ngPackageNames = [

    'common',

    'compiler',

    'core',

    'forms',

    'http',

    'platform-browser',

    'platform-browser-dynamic',

    'router'

  ];

  // Individual files (~300 requests):

  function packIndex(pkgName) {

    packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };

  }

  // Bundled (~40 requests):

  function packUmd(pkgName) {

    packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };

  }

  // Most environments should use UMD; some (Karma) need the individual index files

  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

  // Add package entries for angular packages

  ngPackageNames.forEach(setPackageConfig);

  var config = {

    map: map,

    packages: packages

  };

  System.config(config);

})(this);

3.3 安裝依賴包

npm install 來安裝對應的依賴包

安裝完成以后就可以開始寫代碼了

4. 創建應用文件

在ng2-helloworld 創建一個文件夾 app，在app文件夾下創建文件app.ts如下所示：

import { Component } from '@angular/core';

 

@Component({

    selector: 'app',

    template:'<h1>hello world</h1>'

})

export class AppComponent {

 

}

AppComponent 是應用的根組件，每個 Angular 應用都至少有一個根組件 ，它是放用戶界面的容器。 組件是 Angular 應用程序中最基本的模塊，組件通過它所關聯的模板，控制視圖。

一個組件包括三個基本部分：

l 一個或多個 import 語句來引入所需的文件。

l 一個 @Component 裝飾器 來告訴 Angular ，使用哪個模板，以及怎樣創建這個組件。

l 一個 組件類 來通過它的模板控制一個視圖的外觀和行為。

(1). 導入

Angular 應用都是模塊化的，它們由很多職責明確的文件組成。 Angular 本身也是模塊化的。它包括一系列的庫模塊，這些模塊包括了一系列相關的特性，以便拿來構建應用程序。

當需要一個模塊中的某些東西時，引入 (import) 它。 在這里，我們導入了 Angular 2 核心庫，以便組件代碼訪問 @Component 裝飾器。

(2). @Component

Component 是一個 裝飾器函數 ，它接受一個 元數據對象 作為參數。 通過給這個函數加上 @ 前綴，並使用 metadata 對象調用它，能夠把 元數據 關聯到組件類上。這些元數據會告訴 Angular 如何創建和使用組件類。

這里的這個元數據對象有兩個字段：一個 selector ，一個 template 。

selector：指定了一個簡單的 CSS 選擇器，用於指出放置此組件的 HTML 元素。在此

template：指定了此組件的模板。 它用一種增強的 HTML 形式寫成，用來告訴 Angular 如何渲染此組件的視圖。模板中只有一行 HTML ：“ My First Angular App ”。模板還可以包含更加復雜的語法，准確來說，一個Angular應用就是一個組件樹。

(3). Component 類

文件的最底下，是一個空的，什么也不做的類，叫做 AppComponent 。

打算構建一個真實的應用時，通過添加屬性和應用邏輯來擴展這個類。導出 AppComponent，以便在應用的其它地方 導入。

5. 創建啟動文件

在app 文件夾創建一個文件 main.ts ，用來啟動Angular程序

import { bootstrap } from '@angular/platform-browser-dynamic';

import { AppComponent } from './app’;

 

bootstrap(AppComponent)

    .then(success => console.log(`Bootstrap success`))

    .catch(error => console.log(error));

我們引入了兩樣東西來啟動本應用：

1. Angular 的瀏覽器 bootstrap(引導) 函數
2. 應用的根組件： AppComponent 。

然后，調用 bootstrap 函數，並且把 AppComponent 傳進去。啟動函數與應用程序是兩個相互分離的關注點。

6. 創建宿主頁面

在ng2-helloworld 創建一個文件 index.html 作為Angular程序的宿主頁面。

<html>

  <head>

    <title>hello world</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->

     <!-- Polyfill(s) for older browsers -->

    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>

    <script src="node_modules/reflect-metadata/Reflect.js"></script>

    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->

    <script src="systemjs.config.js"></script>

    <script>

System.import('app').catch(function(err){ console.error(err); });

    </script>

  </head>

  <!-- 3. Display the application -->

  <body>

    <app>Loading...</app>

  </body>

</html>

這段兒 HTML 值得注意的有：

l 引入JavaScript 庫，首先引入 es6-shim ，它會給全局對象 window 打上補丁，使其支持 ES2015(ES6) 的必備特性。然后是 Angular 中使用的zone.js 和 reflect-metadata ，最后是用於模塊加載的 SystemJS 庫。

l 配置 SystemJS ，以便引入和運行剛才寫的 main 文件。

l <body> 中的 <app> 標簽是引入根應用程序組件。

7. 構建並運行

打開終端窗口，並輸入如下命令：

npm start

這個命令運行兩個並行的 node 進程

TypeScript 編譯器，運行在監視 (watch) 模式

一個名叫 lite-server 的靜態服務器，它把 index.html 加載到瀏覽器中