构建ng2简单练手_ng2与node.js-CSDN博客

本文链接：https://blog.csdn.net/zengyonglan/article/details/52610571

angular构建说明
快速建立一个ng2app需要5步（要安装nodejs）：
现已简单做好一个结构只需：
安装npm之后，执行命令：
npm install
成功之后
npm start 就可以看到效果了

1.打开命令行：
mkdir ng2 //创建项目文件夹
cd ng2 //切换到项目文件夹
2.新建三个json文件：
tsconfig.json 复制如下代码：

          {
              "compilerOptions": {
                "target": "es5",
                "module": "system",
                "moduleResolution": "node",
                "sourceMap": true,
                "emitDecoratorMetadata": true,
                "experimentalDecorators": true,
                "removeComments": false,
                "noImplicitAny": false
              },
              "exclude": [
                "node_modules",
                "typings/main",
                "typings/main.d.ts"
              ]
            }

       typings.json   复制如下代码：


            {
              "ambientDependencies": {
                "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
                "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
              }
            }

        package.json   复制如下代码：

      {
                  "name": "angular2-quickstart",
                  "version": "1.0.0",
                  "scripts": {
                    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
                    "tsc": "tsc",
                    "tsc:w": "tsc -w",
                    "lite": "lite-server",
                    "typings": "typings",
                    "postinstall": "typings install"
                  },
                  "license": "ISC",
                  "dependencies": {
                    "angular2": "2.0.0-beta.12",
                    "systemjs": "0.19.24",
                    "es6-shim": "^0.35.0",
                    "reflect-metadata": "0.1.2",
                    "rxjs": "5.0.0-beta.2",
                    "zone.js": "0.6.6"
                  },
                  "devDependencies": {
                    "concurrently": "^2.0.0",
                    "lite-server": "^2.1.0",
                    "typescript": "^1.8.9",
                    "typings":"^0.7.9"
                  }
                }

3.执行命令行：（安装依赖包）
npm install

4.创建index.html,appComponent.ts(名字自定),main.ts(名字自定义)
index.html 复制如下代码：

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

       <!-- 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>
     </head>

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

     appComponent.ts  复制代码如下：
        import {Component} from 'angular2/core';

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

       main.ts  复制代码如下

            import {bootstrap}    from 'angular2/platform/browser';
            import {AppComponent} from './app.component';

            bootstrap(AppComponent);

     5.依赖包安装成功之后执行命令：
        npm start

参考地址：https://angular.io/docs/ts/latest/quickstart.html；