参考官网地址：

英文： https://angular.io

中文：http://www.angular.live

一.安装坏境:node.js和npm;

    node.js在5.x.x或以上，npm在3.x.x或以上。

    node -v 和npm -v检查安装版本。

nodenpm.png

创建一个文件：

   mkdir angular-quickstart
   cd angular-quickstart

二.装一些配置文件：

package.json

用来标记出本项目所需的 npm 依赖包。

    package.json

  {

    "name": "angular-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

定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。

  tsconfig.json

  {

    "compilerOptions": {

    "target": "es5",

    "module": "commonjs",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

  "experimentalDecorators": true,

  "removeComments": false,

  "noImplicitAny": false

  }

  }

typings.json

为那些 TypeScript 编译器无法识别的库提供了额外的定义文件。

  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

为模块加载器提供了该到哪里查找应用模块的信息，并注册了所有必备的依赖包。它还包括文档中后面的例子需要用到的包。

  systemjs.config.js

  /**

  * System configuration for Angular 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',

  'angular-in-memory-web-api': 'npm:angular-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'

  },

  'angular-in-memory-web-api': {

  main: './index.js',

  defaultExtension: 'js'

  }

  }

  });

  })(this);

三.npm install

创建完文件后面再angular-quickstart目录下npm install；

  如果在运行 npm install之后没有出现 typings目录，你就需要通过命令手动安装它：
  npm run typings install

四.<font face="微软雅黑">mkdir app</font>创建app文件

（1）文件内创建跟模块app/app.module.ts

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

  import { BrowserModule } from '@angular/platform-browser';

  @NgModule({

        imports:      [ BrowserModule ]

  })

  export class AppModule { }

（2）根组件app/app.component.ts

  import { Component } from '@angular/core';@Component({  selector: 'my-app',  template: '

  My First Angular App

  '})
  export class AppComponent { }

再次编辑app/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 { }

（3）需要main.ts文件加载根组件

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

  import { AppModule } from './app.module';

  const platform = platformBrowserDynamic();

  platform.bootstrapModule(AppModule);

五.在外边的根目录创建index.html

  <html>
    <head>
      <title>Angular QuickStart</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="styles.css">
      <!-- 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>Loading...</my-app>
    </body>
  </html>

创建一个style.css文件

  /* Master Styles */
  h1 {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 250%;
  }
  h2, h3 {
    color: #444;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
  }
  body {
    margin: 2em;
  }