2.一、環境配置-AngularJS2 TypeScript 環境配置

本章節使用的是 TypeScript 來建立 Angular 的應用，這也是官方推薦使用的，本教程的實例也將採用 TypeScript 來編寫。

TypeScript 是一種由微軟開發的自由和開源的編程語言，它是JavaScript的一個超集，擴展了JavaScript的語法。

若是你不瞭解TypeScript，能夠查閱如下資料：

• TypeScript 入門教程
• TypeScript 中文手冊

這開始前，你須要確保你已經安裝了 npm，若是你還沒安裝npm或者不瞭解 npm 能夠查看咱們的教程：NPM 使用介紹。

因爲 npm 官網鏡像國內訪問太慢，這裏我使用了淘寶的npm鏡像，安裝方法以下：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

執行後咱們就可使用 cnpm 命令來安裝模塊：

$ cnpm install

第一步：建立與配置項目

建立目錄

$ mkdir angular-quickstart
$ cd angular-quickstart

建立配置文件

Angular 項目須要如下幾個配置文件：

• package.json 標記本項目所需的 npm 依賴包。
• tsconfig.json 定義了 TypeScript 編譯器如何從項目源文件生成 JavaScript 代碼。
• typings.json爲那些 TypeScript 編譯器沒法識別的庫提供了額外的定義文件。
• systemjs.config.js 爲模塊加載器提供了該到哪裏查找應用模塊的信息，並註冊了全部必備的依賴包。 它還包括文檔中後面的例子須要用到的包。a

在 angular-quickstart 中建立如下幾個文件，代碼以下所示：

package.json 文件：

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.2",
    "typings":"^1.3.2"
  }
}

 

tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

 

typings.json 文件：

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

 

systemjs.config.js 文件：

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                       'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

接下來咱們使用 cnpm 命令來安裝依賴包：

$ cnpm install

執行成功後，angular-quickstart 目錄下就會生成一個 node_modules 目錄，這裏包含了咱們這個實例須要的模塊，咱們能夠看下項目的目錄結構：

第二步：建立應用

咱們用 NgModules 把 Angular 應用組織成了一些功能相關的代碼塊。

Angular 自己是被拆成一些獨立的 Angular 模塊，這樣咱們在應用中只須要導入須要的 Angular 部分。

每一個 Angular 應用至少須要一個root module(根模塊) ，實例中爲 AppModule 。

接下來咱們在 angular-quickstart 目錄下建立 app 目錄：

$ mkdir app
$ cd app

而後在 app 目錄下建立 app.module.ts 文件，代碼以下所示：

 

app.module.ts 文件：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
 
@NgModule({
  imports:      [ BrowserModule ]
})
export class AppModule { }

因爲 QuickStart 是一個運行在瀏覽器中的 Web 應用，因此根模塊須要從 @angular/platform-browser 中導入 BrowserModule 並添加到 imports 數組中。

建立組件並添加到應用中

每一個 Angular 應用都至少有一個根組件， 實例中爲 AppComponent，app.component.ts 文件代碼以下：

 

app.component.ts 文件：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>個人第一個 Angular 應用</h1>'
})
export class AppComponent { }

代碼解析：

• 以上代碼從 angular2/core 引入了 Component 包。

• @Component 是 Angular 2 的裝飾器 ，它會把一份元數據關聯到 AppComponent 組件類上。

• my-app 是一個 CSS 選擇器，可用在 HTML 標籤中，做爲一個組件使用。

• @view 包含了一個 template ，告訴 Angular 如何渲染該組件的視圖。

• export 指定了組件能夠再文件外使用。

接下來咱們從新打開 app.module.ts 文件，導入新的 AppComponent ，並把它添加到 NgModule 裝飾器的 declarations 和 bootstrap 字段中：

 

app.module.ts 文件：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

第四部：啓動應用

接下來咱們須要告訴 Angular 如何啓動應用。

在 angular-quickstart/app 目錄下建立 main.ts 文件，代碼以下所示：

main.ts 文件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
 
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

以上代碼初始化了平臺，讓你的代碼能夠運行，而後在該平臺上啓動你的 AppModule。

定義該應用的宿主頁面

在 angular-quickstart 目錄下建立 index.html 文件，代碼以下所示：

index.html 文件：

<html>
  <head>
    <title>Angular 2 實例 - 菜鳥教程(runoob.com)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. 載入庫 -->
    <!-- IE 須要 polyfill -->
    <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. 配置 SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. 顯示應用 -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

這裏值得注意的地方有：

添加一些樣式

咱們能夠在 angular-quickstart 目錄的 styles.css 文件中設置咱們須要的樣式：

styles.css 文件：

/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}

第六步：編譯並運行應用程序

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

npm start

訪問 http://localhost:3000/，瀏覽器顯示結果爲：

這樣咱們的第一個 Angular2 的應用就算建立完成了，最終的目錄結構爲：

本文所使用的源碼能夠經過如下方式下載，不包含 node_modules 和 typings 目錄。

源代碼下載