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

時間  2019-11-19
標籤 翻譯 angular typescript 分鐘 快速 入門 欄目 AngularJS 简体版
原文   原文鏈接

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

Angular 2 終於發佈了 beta 版。這意味着正式版應該很快就要發佈了。html

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

若是不喜歡 Typescript，你也可使用 JavaScript 來完成這個演練。webpack

See It Run!

官方提供了一個在線的演示，地址在這裏：live example，不過你可能不能正常訪問。仍是讓咱們本身來實踐一下算了。不過，能夠先看一下運行的結果。git

Output of quickstart app

你很快就能夠本身完成它。es6

這是最終的文件結構：github

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

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

咱們須要以下的 4 個步驟來完成它。typescript

  1. 建立開發環境
  2. 爲咱們的應用編寫 root component
  3. 啓動 root component 控制主頁面
  4. 編寫主頁面 (index.html)

若是咱們忽略掉那些旁支末節的說明，按照這些步驟，咱們真的能夠在 5 分鐘以內就完成這個演練的。固然了，多數人對 why 和 how 同樣感興趣，因此，時間可能會長一點。  apache

建立開發環境

首先，咱們須要一個地方來做爲項目文件夾，保存一些庫文件，一些 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);

咱們須要兩件事情來啓動應用：

  1. Angular 的瀏覽器函數 bootstrap
  2. 咱們剛剛編寫的根組件

咱們把它們導入進來，而後調用 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>

 

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

  1. 加載咱們須要的腳本文件，. Angular 2 須要 angular2-polyfills.js 和 Rx.js .

  2. 咱們配置了 System, 而後經過它來導入和加載咱們剛剛編寫的啓動文件。.

  3. 在 <body> 標記中添加了  <my-app> . 這就是咱們應用執行的位置!

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

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

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

Compile and run!

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

npm start

 

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

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

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

Output of quickstart app

祝賀你！咱們上路了。

若是你看到 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，咱們會獲得一個顯式的索引錯誤。若是咱們以爲沒有用，而是被困擾了，可使用下面的標誌來抑制它們。

  1. "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 文件中，減小一些複雜度。

下面的緣由使咱們沒有這樣作：

  1. 很容易寫好。
  2. 可測試
  3. 可重用
  4. 關注點分離
  5. 能夠學到更多的導入和導出

容易

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

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

Testability

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

若是同一個組件文件中包含了 bootstrap 調用的話，它是很難測試的。一旦咱們加載這個組件文件進行測試，bootstrap 函數就會試圖加載應用到瀏覽器中。因爲咱們並不但願運行整個應用，它會報錯，

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

Reusability

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

Separation of concerns

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

啓動應用對視圖來講徹底無關。

Import/Export

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程