没有 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 以使用外部模板，样式或添加/编辑组件变量。保存文件后，你应立即看到更改。