Angular2快速起步——構建一個簡單的應用

構建此應用，分爲以下幾步：

一、環境準備：安裝Node.js和npm；

二、建立並配置此項目；

三、建立應用；

四、建立組件並添加到應用程序中；

五、啓動應用程序；

六、定義做爲該應用的宿主頁面；

七、構建並運行此應用；

環境準備：安裝Node.js和npm；

下載node.js.msi文件來進行安裝，能夠參考這個文檔來安裝  http://www.runoob.com/nodejs/nodejs-install-setup.html

咱們的例子須要node v5.x.x或更高版本以及npm 3.x.x或更高版本。 要檢查你正在使用的版本，請在終端窗口中運行node -v和npm -v命令。

建立並配置本項目

一、建立項目目錄

能夠經過終端建立項目目錄，在終端進入你想要建立文件夾的位置，以後 mkdir angular2 建立angular2文件夾 ，同理建立quickstart文件夾，也能夠新建文件夾建立。

二、建立配置文件,在上面的文件夾下

package.json用來標記出本項目所需的npm依賴包；

tsconfig.json定義了TypeScript編譯器如何從項目原文件生成JavaScript代碼；

typings.json爲那些TypeScript編譯器沒法識別的庫提供了別的定義文件；

systemjs.config.js爲模塊加載器提供了該到哪裏去查找應用模塊的信息，並註冊了全部必備的依賴包。

package.json內容以下

{  "name": "angular2-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 2 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);

三、安裝依賴包

在終端定位到package.json的位置，直接npm install

在安裝期間可能出現紅色的錯誤信息，你還會看到npm WARN信息。不過不用擔憂，只要末尾處沒有npm ERR!信息就算成功了。

你應該獲得以下結構：

若是在運行npm install以後沒有出現typings目錄，咱們能夠手動安裝它

npm run typings install

建立應用

在應用的根目錄下建立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 { }

這裏是應用的入口點，因爲應用是運行在瀏覽器中的，因此根模塊須要從@angular/platform-browser中導入BrowserModule並添加到imports數組中，這是要讓最小的應用在瀏覽器中運行時，對Angular的最低需求。

建立組件並添加到應用中

每一個Angular應用都至少有一個組件：根組件，這裏叫AppComponent，組件是Angular應用的基本構造塊，每一個組件都會經過與它相關的模塊來控制屏幕上的一小塊，在app文件夾下建立app.component.ts

app.component.ts

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

import語句。它讓你能訪問Angular核心庫中的@Component裝飾器函數。

@Component裝飾器，它會把一份元數據關聯到AppComponent組件類上：

selector爲用來表明該組件的HTML元素指定簡單的CSS選擇器。

template用來告訴Angular如何渲染該組件的視圖。

咱們還要導出AppComponent類，以便讓剛剛建立的這個應用導入它

編輯app/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 { }

啓動應用

在app文件夾下建立新文件main.ts

main.ts

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

定義該應用的宿主頁面

在quickstart文件夾下建立index.html文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular Quickstart</title>
    <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>
<body>
<my-app>Loading...</my-app>
</body>
</html>

編譯並運行應用程序

打開終端，定位到該目錄，npm start

稍後，一個瀏覽器頁標籤就會打開並顯示出來。