沒有 angular-cli 的 Angular 2 入門

Created: November-22, 2018

Angular 2.0.0-rc.4

在這個例子中，我們將建立一個 Hello World! 為簡單起見，只有一個根元件（AppComponent）的應用程式。

先決條件：

Node.js v5 或更高版本
npm v3 或更高版本

注意： 你可以通過在控制檯/終端中執行 node -v 和 npm -v 來檢查版本。

步驟 1

為專案建立並輸入新資料夾。我們稱之為 angular2-example。

mkdir angular2-example
cd angular2-example

第 2 步

在我們開始編寫應用程式程式碼之前，我們將新增以下提供的 4 個檔案：package.json，tsconfig.json，typings.json 和 systemjs.config.js。

免責宣告： 相同的檔案可以在官方 5 分鐘快速入門中找到。

package.json - 允許我們使用 npm 下載所有依賴項，並提供簡單的指令碼執行，使簡單專案的生活更輕鬆。（你應該考慮將來使用像 Gulp 這樣的東西來自動執行任務）。

{
  "name": "angular2-example",
  "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-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json - 配置 TypeScript 轉換器。

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

typings.json - 使 TypeScript 識別我們正在使用的庫。

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

systemjs.config.js - 配置 SystemJS （你也可以使用 webpack ）。

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application's needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

第 3 步

讓我們通過輸入來安裝依賴項

npm install

在控制檯/終端。

第 4 步

在 angular2-example 資料夾中建立 index.html。

<html>
  <head>
    <title>Angular2 example</title>
    <meta charset="UTF-8">
    <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>
  <!-- 3. Display the application -->
  <body>
    <my-app></my-app>
  </body>
</html>

你的應用程式將在 my-app 標籤之間呈現。

但是，Angular 仍然不知道要渲染什麼。告訴它，我們將定義 AppComponent。

第 5 步

建立一個名為 app 的子資料夾，我們可以在其中定義構成我們應用程式的元件和服務。（在這種情況下，它只包含 AppComponent 程式碼和 main.ts。）

mkdir app

第 6 步

建立檔案 app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <ul>
        <li *ngFor="let message of messages">
            {{message}}
        </li>
    </ul>
  `
})
export class AppComponent { 
    title = "Angular2 example";
    messages = [
        "Hello World!",
        "Another string",
        "Another one"
    ];
}

發生了什麼？首先，我們要匯入 @Component 裝飾器，我們使用它來為 Angular 提供該元件的 HTML 標籤和模板。然後，我們使用 title 和 messages 變數建立類 AppComponent，我們可以在模板中使用這些變數。

現在讓我們看看那個模板：

<h1>{{title}}</h1>
<ul>
    <li *ngFor="let message of messages">
        {{message}}
    </li>
</ul>

我們在 h1 標籤中顯示 title 變數，然後使用*ngFor 指令製作一個列表，顯示 messages 陣列的每個元素。對於陣列中的每個元素，*ngFor 建立了一個 message 變數，我們在 li 元素中使用它。結果將是：

<h1>Angular 2 example</h1>
<ul>
    <li>Hello World!</li>
    <li>Another string</li>
    <li>Another one</li>
</ul>

第 7 步

現在我們建立一個 main.ts 檔案，它將是 Angular 看到的第一個檔案。

建立檔案 app/main.ts。

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

我們正在匯入 bootstrap 函式和 AppComponent 類，然後使用 bootstrap 告訴 Angular 將哪個元件用作根。

第 8 步

是時候啟動你的第一個應用程式了。型別

npm start

在你的控制檯/終端。這將從 package.json 執行一個準備好的指令碼，該指令碼啟動 lite-server，在瀏覽器視窗中開啟你的應用程式，並在監視模式下執行 TypeScript 轉換器（因此將儲存 .ts 檔案，並在儲存更改時重新整理瀏覽器）。

現在怎麼辦？

檢視官方的 Angular 2 指南和 StackOverflow 文件中的其他主題。

你還可以編輯 AppComponent 以使用外部模板，樣式或新增/編輯元件變數。儲存檔案後，你應立即看到更改。