AngularJS 2.0入門指南

AngularJS 2.0

學習 Angular 2

當越來越多的 web app 使用 Angular 1構建的時候，更快更強大的 Angular 2 將會很快成爲新的標準。

Angular的新約定使得它更容易去學習、更快的去開發 app。通過本教程學習更快速。更強大的 Angular 版本。

Angular 一個跨移動和桌面的框架

快速開始

本指南指導你如何構建一個簡單 Angular app。

可以使用typescript/ JavaScript / Dart任意一種語言來編寫Angular app，本教程採用JavaScript。

看它運行

運行實例是學習一個 Angular app 如何實現的最快的方式。

點擊鏈接啓動一個瀏覽器，會使用 plunker 來加載運行一個簡單的示例。

文件的組織結構： 

對我們來說，它只是一個index.html，style.css 和包含三個JavaScript文件的 app 文件夾組成的簡單的 Web 目錄。

當然，我們僅在 plunker只能構建簡單的示例。我們關掉它開始一個真實的實踐。

1. 搭建我們的開發環境；
2. 爲我們的 app 編寫 Angular 根組件；
3. 添加 Angular 模塊；
4. 引導它去控制主頁面；
5. 編寫主頁面(即index.html)；
6. 添加 CSS 樣式(style.css)；

如果我們跟着指南的步驟一步步去實踐，那麼我們可以在 5 分鐘內創建一個入門項目。

但是，大多數人總會陷入“why”和“how”中，花掉許多時間。

開發環境

我們需要一個地方去容納你的項目文件，你的編輯。

• 創建新的文件夾：

mkdir angular-start 
cd angular-start

• 添加需要的函數庫

我們推薦使用 npm 包管理器來獲得和管理我們的開發庫。

不會使用 npm，點擊鏈接開始學習，因爲本教程是通過它來創建的。

• 添加 package.json 文件，直接 copy：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "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",
    "zone.js": "^0.6.23",

    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0"
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

• 通過 npm 命令安裝這些包。

npm install

第一個 Angular 組件

組件是 Angular 中一個最基本的概念。一個組件管理一個視圖(一塊給用戶展示信息、響應用戶的頁面)

技術上來講，一個組件是一個控制某各視圖模板的類。我們爲搭建 Angular app 寫許多代碼。這是我們第一次嘗試所以我們將會保持儘量的簡單。

• 創建項目源文件夾

我們將我們的應用程序源代碼放在一個根目錄下的app/子文件夾下。mkdir app，cd app

• 添加一個組件文件

添加一個app.componet.js的文件並寫入下面內容：

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: '<h1>My First Angular App</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

我們通過鏈接一個組件和屬於 Angular 全局明明區間類方法ng.core寫入一個可視的 AppComponet 組件。

  app.AppComponent =
    ng.core.Component({
    })
    .Class({
    });

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

這個組件方法用到一個含3個屬性的對象。類方法使我們實現這個組件，給它賦予屬性和方法就會綁定到視圖，無論它的變現是否適合 UI。

• 模型

Angular 應用程序時模塊化的。各個基友特定功能的模型鏈接在一起。

ES5 JS沒有一個本地的模塊系統。有許多流行的第三方類庫系統我們可以使用。同樣，爲了簡化和避免選擇，Angular 爲應用程序創建一個單獨的全局命名區間。

我們在這個全局對象喚醒 app 且添加我們所有的代碼構件。

我們不想去污染這個全局命名空間。所以在每個文件裏我們把代碼放入一個“IIFE”（Immediately Invoked Function Expression）。

(function(app){
})(window.app || (window.app={}));

• 1
• 2

• 1
• 2

我們通過這個全局的app命名空間對象傳入 IIFE，如果他還不存在則使用一個空對象初始化它。

大多數的應用文件通過添加事物來輸出東西到app命名空間。app.compont.js文件輸出AppComponent。

app.AppComponent =

• 1

• 1

有一個比較複雜的應用程序會有子組件遺傳自AppComponent在一個真是的樹模型上。一個比較複雜的應用程序將有更多的文件和模塊。

start示例並不複雜；一個組建時我們需要的。在這個小的應用程序裏模塊化扮演了基本組織的應用規則。

模塊依賴於其它的模塊。在JS Angular 應用程序裏，當我們需要一些東西由其它模塊提供，我們從app對象得到它。當其它模塊需要涉及AppComponent，它需要從app.AppComponent獲取：

declarations: [ app.AppComponent ],

• 1

• 1

Angular 也是模塊化的。它是一個模塊庫的集合。每一個模塊庫都是由幾個有關聯的模塊組成的。

當我們需要 Angular 的一些東西，我們使用ng對象。

• 定義對象的類

.class({
    constructor: function(){}
});

• 1
• 2
• 3

• 1
• 2
• 3

這個類中是空的，這個類爲AppComponent類初始化對象。當我們準備構建一個實際的項目，我們能用屬性和方法拓充這個對象。我們的AppComponent類是空的，但是有一個空的constructor，因爲我們不需要在start項目裏做任何事。

• 組件定義對象

ng.core.Component()告訴 Angular 這個類初始化對象爲一個 Angular 組件。這個配置對象傳遞給ng.core.Component()方法有兩個字段，selector 和 template。

ng.core.Component({
    selector: 'my-app',
    template: '<h1>My First Angular App</h1>'
});

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

這個selector指定一個簡單的CSS選擇器給一個叫做my-app的HTML元素。Angular創建了並運行一個我們的AppComponent實例，無論如何它總是一個my-app元素作爲HTML。

記住這個my-app選擇器，我們需要這個知識點在我們寫index.html的時候用到。

這個template屬性保存組件的同伴模板。一個模板是一個HTML的形式，它告訴 Angular 怎樣去渲染一個視圖。我們的模板是一個單獨HTML代碼，“My First Angular App”。

現在，我們需要一些東西去告訴 Angular 去加載這組件。

• 添加一個 NgModule

Angular app 由 Angular 模塊組成，這些模塊依賴包含我們的組件和所有我們的app需要的。

創建一個app/app/module.js文件像下面這樣：

(function(app) {
  app.AppModule =
    ng.core.NgModule({
      imports: [ ng.platformBrowser.BrowserModule ],
      declarations: [ app.AppComponent ],
      bootstrap: [ app.AppComponent ]
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 啓動app

添加一個新文件，app/main.js，像下面：

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic
      .platformBrowserDynamic()
      .bootstrapModule(app.AppModule);
  });
})(window.app || (window.app = {}));

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

我們需要兩個東西去運行這個app：

Angular 的platformBrowserDynamic().bootstrapModule函數

這個app我們剛寫的初始模塊；

我們需要它們都要在我們的命名空間。然後我們請求bootstrapModule，傳入這個 root app module，AppModule。

學習爲什麼我們需要bootstrapModule從ng.platformBrowserDynamic並且爲什麼我們創建一個單獨的JS文件。

我們已經請求 Angular 去連接這個 app 在一個瀏覽器用我們的組件在 root。Angular 將放在那兒？

• 添加index.html

Angular 運行我們的 app 在我們的index.html的一個指定位置。開始創建文件。

我們不能把我們的index.html放在app/文件夾下。我們將把它放在上一層，在項目的根文件夾下。

index.html文件內容如下：

<html>
  <head>
    <title>Angular QuickStart JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required 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/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

    <!-- 2. Load our 'modules' -->
    <script src='app/app.component.js'></script>
    <script src='app/app.module.js'></script>
    <script src='app/main.js'></script>

  </head>

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

</html>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

這兒有3個值的注意的地方：

我們加載我們需要的 JS 庫；學習關於它們。

我們加載我們的 JS 文件。

我們添加<my-app>標籤在<body>中。

當 Angular在main.js 請求bootstrapModule函數，它讀取AppModule源信息，看見AppComponent是一個 啓動組件，找到這個my-app選擇器，定位到my-app的元素，然後加載我們的 app 視圖在這些標籤中。

• 添加一些樣式

樣式不是非常重要但是它們是非常好的，index.html假設我們有一個樣式表叫style.css。

創建這個樣式文件在根目錄下並寫入樣式。也可以使用迷你版的樣式文件。你可以參考下面的樣式設置。

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}

 /*
  * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
  * for the full set of master styles used by the documentation samples
  */

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

• 運行它

打開命令工具，輸入命令 npm start

這個命令運行一個靜態的服務器 lite-server，它加載index.html在瀏覽器並且刷新瀏覽器當程序文件被修改。

很快，瀏覽器的標題欄會代開並顯示內容。恭喜你，我們成功了。

• 做一些改變

嘗試去改變信息的內容。

lite-server會一直監視，所以它會察覺改變，刷新瀏覽器，顯示改變後的信息。

• 最後的項目結構

最後項目文件結構如下：

原文鏈接：https://angular.io/docs/js/latest/quickstart.html