翻譯：Angular 2 - TypeScript 5 分鐘快速入門

jopen 8年前發布 | 37K 次閱讀 Web框架 TypeScript angularjs

原文地址： https://angular.io/docs/ts/latest/quickstart.html

Angular 2 終于發布了 beta 版。這意味著正式版應該很快就要發布了。

讓我們使用 TypeScript 語言從頭創建一個超級簡單的 Angular 2 應用。

如果不喜歡 Typescript，你也可以使用 JavaScript 來完成這個演練。

See It Run!

官方提供了一個在線的演示，地址在這里： live example ，不過你可能不能正常訪問。還是讓我們自己來實踐一下算了。不過，可以先看一下運行的結果。

你很快就可以自己完成它。

這是最終的文件結構：

app
    +app.component.ts
    +boot.ts
index.html

也就是說，根目錄下有一個 index.html 文件，在 app 目錄下，有兩個 Typescript 文件。

我們需要如下的 4 個步驟來完成它。

創建開發環境
為我們的應用編寫 root component
啟動 root component 控制主頁面
編寫主頁面 ( index.html )

如果我們忽略掉那些旁支末節的說明，按照這些步驟，我們真的可以在 5 分鐘之內就完成這個演練的。當然了，多數人對 why 和 how 一樣感興趣，所以，時間可能會長一點。

創建開發環境

首先，我們需要一個地方來作為項目文件夾，保存一些庫文件，一些 TypeScript 配置，以及一個你喜歡的 TypeScript 編輯器。如果沒有的話，其實文本編輯器就可以了。

創建項目文件夾

mkdir angular2-quickstart
cd    angular2-quickstart

添加需要的庫

推薦使用 npm 來獲取和管理我們開發所使用的庫。

還沒有安裝 npm? 現在就安裝它，我們馬上就會使用，而且在這個文檔中會不斷使用它。這里有安裝 NPM 的介紹。

添加名為 package.json 的文件，將下面的內容粘貼到文件中。 :

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

想知道為什么這個寫嗎? 在這里有詳細的說明： appendix below

使用下面的命令來安裝這些 packages. 打開一個終端窗口，在 Windows 中使用 command window 就可以，然后執行下面的 npm 命令。

npm install

在安裝過程中，會看到一些嚇人的紅色錯誤信息，無視它們就可以，安裝將會成功，在 appendix below 有詳細的說明。

配置 TypeScript

TypeScript 并不能直接在瀏覽器中執行，所以我們需要使用 TypeScript 編譯器進行處理，我們必須對 TypeScript 編譯器進行一些特殊的配置。

添加名為 tsconfig.Json 的文件到項目文件夾中，將下面的內容粘貼到文件中。

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

還是在 appendix below 中有詳細的說明。

我們已經準備好了，現在開始編寫一些代碼。

第一個 Angular Component

Component 是 Angular 中的基礎概念，一個 Component 管理一個視圖 View， View 是頁面中的一個片段，我們用來顯示信息給用戶并且響應用戶的反饋。

從技術上說，Component 是一個用來控制 View 模板的類。在創建 Angular App 的時候，我們會編寫大量的 Component。這是我們的第一次嘗試，所以，我們會保持這個組件驚人的簡單。

創建保存應用源碼子文件夾

我們會將應用代碼保存在名為 app 的子文件夾中，在控制臺窗口中執行下面的命令創建文件夾。

mkdir app
cd    app

添加 Component 文件

現在，我們創建名為 app.component.ts 的文件，將下面的代碼粘貼進來。

app/app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

我們把上面的代碼詳細分析一下。先從最后一行的定義類開始。

The Component class

在代碼的最后一行，是名為 AppComponent 的什么都沒有做的類，在我們開始創建一個應用的時候，我們可以擴展這個類的屬性和業務邏輯。由于我們還不需要在這個 QuickStart 中做什么，我們的 AppComponent 類目前還是空的。

Modules

Angular 應用是模塊化的，其中包含一系列各有用途的獨立文件。

多數應用文件導出一些東西，類似 Component，我們的 app.component 導出 AppComponent.

app/app.component.ts (export)

export class AppComponent { }

這個導出的行為將這個文件轉化為了一個模塊 module，文件的名稱（不包含擴展名）通常作為模塊的名稱，根據這個規則，'app.component' 就是我們第一個模塊的名稱。

一個精巧的應用將會在一個組件構成的虛擬樹中包含一些子組件，更加復雜的應用將會包含更多的文件和模塊。

Quickstart 不復雜，我們只需要一個組件，在我們這個小應用中，組件還扮演著組織應用的角色。

模塊依賴其它的模塊。在 TypeScript 版本的 Angular 應用中，當我們需要其他模塊提供服務的時候，我們將需要的模塊導入到當前模塊中。當其它的模塊需要使用 AppComponent 的時候，可以使用下面的語法導入 AppComponent ，如下所示：

app/boot.ts (import)

import {AppComponent} from './app.component'

Angular 也是模塊化的，它本身是一系列庫模塊的集合，每個庫就是一個提供服務的模塊，被未來的模塊所使用。

當我們需要 Angular 中提供的服務的時候，我們就從 Angular 的庫模塊中導入。現在我們就需要 Angular 幫助我們，以便定義我們 Component 中的元數據。

Component Metadata

在我們為 Class 提供元數據之后，它才會成為 Angular Component. Angular 需要元數據來理解如何構造視圖，以及這個組件如何同應用中的其他部分進行互動。

我們使用 Angular 提供的 Component 函數來定義 Component 的元數據，通過導入 Angular 的基礎庫 angular2/core，我們可以訪問這個函數。

app/app.component.ts (import)

import {Component} from 'angular2/core';

在 TypeScript 中，我們將這個函數應用到類的前綴來裝飾這個類，使用 @ 符號，在組件類的上方調用這個函數。

app/app.component.ts (metadata)

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})

@Component 告訴 Angular 這個類是一個組件 Componet，配置對象傳遞給了 @Compoent 函數，包含兩個字段，selector 和 template.

selector 指定了一個簡單的 CSS 選擇器，選擇名為 my-app 的 HTML 元素。在 Angular 遇到頁面中的 my-app 元素的時候， Angular 將會創建我們的 AppComponent 實例并顯示它。

記住這個 my-app 選擇器，在我們編寫 index.html 的時候，我們需要這些信息。

template 屬性保存伴隨的模板，模板來自 HTML, 告訴 Angular 如何渲染視圖，我們的視圖只有一行 "My First Angular App"

現在我們需要告訴 Angular 如何加載組件。

Give it the boot

在 app 文件夾中，添加一個新文件 boot.rs，如下所示。

app/boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

我們需要兩件事情來啟動應用：

Angular 的瀏覽器函數 bootstrap
我們剛剛編寫的根組件

我們把它們導入進來，然后調用 bootatrap，將 AppComponent 組件作為參數傳遞給 bootstrap.

可以在 appendix below 中學習為什么我們從 angular2/platform/browser 導入 bootstrap ，以及為什么要創建獨立的 boot.ts 文件。

我們已經請求 Angular 將我們的組件作為根來啟動應用。Angular 將會把它放在哪里呢？

Add the index.html

Angular 在我們 index.html 中特定的位置顯示我們的應用，現在是創建這個文件的時候了。

我們不會將 index.html 保存在 app/ 文件夾中，我們將它保存在上一級文件夾中，就在項目的根目錄中。

cd ..

現在創建 index.html 文件，將下面的內容粘貼到文件中。

index.html

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

這個文件由三個主要的部分組成:

加載我們需要的腳本文件，. Angular 2 需要 angular2-polyfills.js 和 Rx.js .
我們配置了 System, 然后通過它來導入和加載我們剛剛編寫的啟動文件。.
在 <body> 標記中添加了 <my-app> . 這就是我們應用執行的位置!

需要一些東西來定位和加載我們的應用模塊，我們這里使用 SystemJS 做這件事。還有沒有提到的方式也可以，但是 SystemJS 是最好的選擇。我們喜歡使用它，它也能正常工作。

關于 SystemJS 配置的說明已經超出了今天的內容范圍，我們將在 appendix below 中進行簡單的介紹。

當 Angular 在 boot.ts 中調用 bootstrap 函數的時候，它將會讀取 AppComponent 的元數據，發現 my-app 選擇器，定位名為 my-app 的元素，然后在這個元素的標記之間加載我們的應用。

Compile and run!

打開一個終端窗口，輸入下面的命令：

npm start

這個命令執行兩個并行的 node 進程。

TypeScript 編譯器運行在監控模式。
稱為 lite-server 的靜態文件服務器，它會將 index.html 加載到瀏覽器中，當應用文件刷新的時候自動重新刷新瀏覽器。

稍等一下，一個瀏覽器的 Tab 頁會被打開，然后顯示出：

祝賀你！我們上路了。

如果你看到 Loading... ，而不是上述內容，查看： Browser ES6 support appendix .

Make some changes

將顯示的信息修改為、 "My SECOND Angular 2 app".

TypeScript 編譯器和 Lite-server 將會監控文件，它們將會檢測到這些變化，自動重新編譯 TypeScript 到 JavaScript ，刷新瀏覽器，顯示修改之后的信息。

這是開發應用極好的方式。

完成之后，我們可以關閉中斷窗口。

Final structure

最終的項目結構看起來如下所示：

angular2-quickstart

node_modules

app

app.component.ts

boot.ts

index.html

package.json

tsconfig.json

下面是文件的內容：

app/app.component.ts

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

app/boot.ts

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

index.html

<html>
    <head>
        <title>Angular 2 QuickStart</title>
        <!-- 1. Load libraries -->
        <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.js"></script>
        <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
        <!-- 2. Configure SystemJS -->
        <script>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/boot')
                  .then(null, console.error.bind(console));
        </script>
    </head>
    <!-- 3. Display the application -->
    <body>
        <my-app>Loading...</my-app>
    </body>
</html>

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules"
    ]
}

Wrap Up

我們的第一個應用沒有做多少事，就是一個基本 Angular 2 版本的 "Hello, World"

我們保持第一個應用足夠簡單：我們編寫了一點 Angular 組件，添加在一些 JavaScript 庫到 index.html 中，并且使用一個靜態文件服務器啟動了應用。這就是我們期望 “Hello,World " 所做的事情。

我們有更大的目標

好消息是更大的目標在等著我們，我們將只需要更新 package.json 來更新庫。只在需要的時候，我們打開 index.html 文件來添加庫或者是 css 樣式表。

我們會使用 Angular 2 來創建一個小的應用來演示更多的內容。

來繼續學習 Tour of Heroes Tutorial !

Appendices

最后是一系列我們涵蓋內容中涉及的知識點的速覽。

這里沒有基礎的資料，對于好奇者來說可以繼續讀下去。

Appendix: Browser ES6 support

Angular 2 基于一些 ES2015 特性，大多數在流行的瀏覽器中可以找到。有些瀏覽器（包括 IE11 ) 需要一個墊片來支持需要的功能。試著在 index.html 文件的其他腳本之前加載墊片庫。

<script src="node_modules/es6-shim/es6-shim.js"></script>

Appendix: package.json

npm 是流行的包管理程序，Angular 應用開發者依賴它來獲取和管理應用所使用的庫。

我們在 npm 的 package.json 文件中，指定我們需要使用的包。

Angular 團隊建議使用的包列在 dependencies 和 devDependencies 配置節中。

package.json (dependencies)

{
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

還有一些其它的包選擇，我們建議使用這些包，因為它們在一起工作的很好。現在使用它們，以后可以根據你的愛好和習慣使用其它的包。

在 package.json 中，包含一個可選的 scripts 配置節，我們可以定義一些有用的命令來執行開發和構建任務。我們已經在建議的 package.json 中包含了一些命令。

package.json (scripts)

{
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  }
}

我們已經看到了如何同時執行編譯器和服務器的監控任務。

npm start

我們可以使用下面的方式來執行 npm 腳本： npm run + script-name . 下面是三個腳本的目的:

npm run tsc - 執行一次 TypeScript 編譯器
npm run tsc:w - 在監控模式執行 TypeScript 編譯器; 進程保持執行。等到 TypeScript 文件變化之后，重新編譯它。
npm run lite - 執行 lite-server , 一個輕量級的，靜態文件服務器。, 由 John Papa 編寫和維護，對 Angular 使用路由的應用有著杰出的支持.

Appendix: Npm errors and warnings

當執行 npm install 沒有錯誤的時候一切都好，會有一些 npm 警告信息，一切完全沒有問題。

我們經常在一系列的 gyp 錯誤信息之后看到 Npm 的警告信息。忽略它們吧，包可能試圖使用 node-gyp 重新編譯自己。如果重新編譯失敗，包會進行恢復（典型地使用上一個 build 版本）而且正常工作。

Appendix: TypeScript configuration

我們添加了一個 TypgeScript 配置文件 tscofnig.json 到我們的項目，在編譯生成 JavaScript 的時候來指導編譯器。可以從 TypeScript 官方的 TypeScript wiki 來獲取關于 tsconfig.json 的詳細說明。

我們使用的選項和標志都是基本的。

我們花一點時間來討論 noImplicitAny 標志。TypeScript 開發者不同意它到底應該是 true 還是 false。這里沒有正確的答案，我們以后也可以修改它。但是我們現在的選擇會在大的項目中造成很大的不同，所以，它值得討論一下。

當 noImplicitAny 標志為 false 的時候，如果編譯器不能根據變量的使用來推斷變量的類型，直接默認為 any 類型。這就是為什么稱為 "implicitly any "，

當 noImplicitAny 標志為 true 的時候，TypeScript 編譯器不能推斷類型，它仍然生成 JavaScript 文件，但是報告一個錯誤。

在這個 QuickStart 和其它的開發示例手冊中，我們將 noImplicitAny 標志設置為 false.

希望強制類型檢查的開發者可能會設置 noImplicitAny 標志為 true。我們仍然可以將變量的類型設置為 any，如果這是更好的選擇的話。

如果我們將 noImplicitAny 標志設置為 true，我們會得到一個顯式的索引錯誤。如果我們覺得沒有用，而是被困擾了，可以使用下面的標志來抑制它們。

"suppressImplicitAnyIndexErrors":true

Appendix: SystemJS Configuration

QuickStart 使用 SystemJS 加載應用和庫模塊。還有一些替代庫頁可以做的很好比如著名的 webpack 。SystemJS 在需要簡單清楚的時候是一個好的選擇。

各種模塊加載器都需要進行配置，一旦文件變多，我們開始考慮生產力和性能的時候，所有的配置都變得復雜。

我們建議你精通所選擇的加載器。

更多關于 SystemJS 的配置信息參考這里 here

由于以上的考慮，我們這里作了什么呢？

index.html (System configuration

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

package 節點告訴 SystemJS 當遇到一個來自 app 文件中的模塊請求的時候如何去做。

當應用中的一個 TypeScript 文件有類似下面的導入語句時，我們的 QuickStart 會發出一些請求。

boot.ts (excerpt)

import {AppComponent} from './app.component'

注意，from 后面的模塊名稱沒有包含擴展名，package 的配置告訴 SystemJS 默認的擴展名是 ‘js'，JavaScript 文件。

這是說的通的，因為我們會在編譯 TypeScript 到 JavaScript 之后運行應用。

在 plunker 網站上的動態演示中，我們在瀏覽器中即時編譯，演示沒有問題，但是對于開發或者生產環境就不適合。

有許多因素我們建議在運行應用之前的 build 階段編譯成 JavaScript 代碼 :

在瀏覽器中，我們可以看到隱藏在后面的編譯警告和錯誤信息。We see compiler warnings and errors that are hidden from us in the browser.
預編譯簡化了模塊加載過程，而且當它是一個獨立的外部步驟的時候更容易檢測問題.
由于瀏覽器不用浪費時間進行編譯，預編譯意味著更快的用戶體驗.
迭代開發過程會更快，因為我們只需要編譯變化的文件。一旦應用超過一定的量，我們就會注意到區別。
預編譯適應持續集成，測試，發布。

System.import 調用告訴 SystemJS 導入 boot 文件（boot.js ... 等到編譯之后，記得嗎？）boot 是我們告訴 Angular 啟動應用的地方，我們同時也捕獲和記錄啟動中的錯誤信息到控制臺中。

其它的模塊或者由 Angular 自身或者由前面的模塊加載。

Appendix: boot.ts

Bootstrapping is platform-specific

我們從 angular2/platform/browser 中導入 bootstrap 函數，而不是 angular2/core, 有一些原因。

我們只在希望跨所有平臺目標的時候調用 "core" ，是的，多數 Angular 應用僅僅運行在瀏覽器中，多數情況下我們調用這個庫的函數，如果我們總是為瀏覽器的話，這是一個很好的選擇。

但是，有可能在不同的環境下加載組件，我們可能在移動設備中使用 Apache Cordova ,我們希望在服務器渲染首頁，以便提高加載性能或者便于 SEO。

這些目標需要我們從其它庫中導入不同的函數。

為什么創建獨立的 boot.ts 文件?

boot.ts 文件很小，僅僅是一個 QuickStart，我們可以將僅有的幾行合并到 app.component 文件中，減少一些復雜度。

下面的原因使我們沒有這樣做：

很容易寫好。
可測試
可重用
關注點分離
可以學到更多的導入和導出

容易

確實是額外的步驟和額外的文件，有多難呢？

我們會在更多的應用中看到獨立的 boot.ts 的優點，讓我們用很低的代價學到更多好的習慣。

Testability

即使我們知道我們永遠不會測試這個 QuckStart ，我們也應該從一開始考慮到可測試性。

如果同一個組件文件中包含了 bootstrap 調用的話，它是很難測試的。一旦我們加載這個組件文件進行測試，bootstrap 函數就會試圖加載應用到瀏覽器中。由于我們并不希望運行整個應用，它會報錯，

將 bootstrap 功能移到獨立的 boot.ts 文件中，可以避免這個錯誤，保持組件文件的清晰。

Reusability

在應用開發過程中，我們重構，重命名文件，如果文件中調用了 bootstrap，我們不能就不能做這些事情。我們不能移動，不能在其它應用中重用組件，不能為了更好的性能在服務區端預先渲染。

Separation of concerns

組件的職責是呈現和管理視圖。

啟動應用對視圖來說完全無關。

Import/Export

在分離的 boot.ts 文件中，我們學到了 Angular 的基本技能：如何從模塊導出，如何導入到其它模塊。在學習 Angular 的過程中，我們會做大量的此類工作。

來自： http://www.cnblogs.com/haogj/p/5059170.html

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1451392362042.html

Web框架 TypeScript angularjs

翻譯：Angular 2 - TypeScript 5 分鐘快速入門

See It Run!

創建開發環境

創建項目文件夾

添加需要的庫

配置 TypeScript

我們已經準備好了，現在開始編寫一些代碼。

第一個 Angular Component

創建保存應用源碼子文件夾

添加 Component 文件

The Component class

Modules

Component Metadata

Give it the boot

Add the index.html

Compile and run!

Make some changes

Final structure

Wrap Up

我們有更大的目標

Appendices

Appendix: Browser ES6 support

Appendix: package.json

Appendix: Npm errors and warnings

Appendix: TypeScript configuration

Appendix: SystemJS Configuration

Appendix: boot.ts

Bootstrapping is platform-specific

為什么創建獨立的 boot.ts 文件?

容易

Testability

Reusability

Separation of concerns

Import/Export

相關經驗

相關資訊

相關文檔

目錄