只需一种选项，用中国传统方式解释如下：不要太过费力地尝试Angular2的5分钟快速入门

2 年 ago

雅, 悟

3 minutes

Angular2的5分钟快速入门指南是什么？

这是Angular2文档中最初列出的示例应用程序。

准备就绪

暫時先安裝了以下的東西。另外，我的環境是Windows。同時，我也安裝了目前最新版本。

诸如node.js等

node.js 版本5.10.1 / https://nodejs.org/en/

git for windows / https://git-for-windows.github.io/

适用于Windows的Git / https://git-for-windows.github.io/

Python3.5.1 / https://www.python.org/

grunt工作

在使用npm init创建了package.json之后，安装以下插件。

grunt-contrib-connect

创建Gruntfile.js

我想用grunt-contrib-connect建立一个web服务器，所以我会参考http://qiita.com/ginpei/items/6a3f870da2a9ec043627的Gruntfile.js进行创建。非常感谢，然后复制粘贴。

module.exports = function (grunt) {
    grunt.initConfig({
        connect: {
            local: {
                options: {
                    keepalive: true,
                    port: 1234
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-connect');
};

通过控制台运行grunt connect命令，如果出现以下类似的显示，则表示OK。

> grunt connect
Running "connect:local" (connect) task
Waiting forever...
Started connect web server on http://localhost:1234

如果你在浏览器中访问localhost:1234，并且能够看到类似的响应，那就意味着Web服务器正在运行。

将源代码复制粘贴

请先创建一个名为5min-quickstart的文件夹作为工作目录。然后在该文件夹下，从https://angular.io/docs/ts/latest/quickstart.html复制并保存以下文件。

styles.css (excerpt)

根据至今为止的步骤，文件的结构可能是这样的形式。

+ [5min-quickstart]
|  + [app]
|  |  + app.component.ts
|  |  + main.ts
|  |
|  + index.html
|  + styles.css
|
+ package.json
+ Gruntfile.js

5分钟快速入门中，假设使用TypeScript进行编写，但是由于TypeScript的引入比较麻烦，所以我们可以通过稍作修改index.html文件来简化操作。

对index.html进行修改

在 https://angular.io/ 上展示的代码（如 The Basics）是直接使用 ts 文件来运行 Angular2 应用的源代码。

那么，请按照以下方式修改5分钟快速入门的index.html文件。

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

    <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/main')
            .then(null, console.error.bind(console));
    </script>

这个… …)

    <!-- 1. Load libraries -->
    <!-- IE required polyfills (from CDN), in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system-polyfills.js"></script>
    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}}
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

假设。

如果导入了typescript.js并正确配置了SystemJS，就可以直接使用ts文件。(我认为)

执行

只需要一个选项：
通过浏览器访问 http://localhost:1234/5min-quickstart/index.html 就可以了。