摘要：学习入门第一课步骤创建应用程序的项目文件夹和定义包的依赖关系和特殊项目设置文件创建文件编译

Install Node.js

创建应用程序的项目文件夹和定义包的依赖关系和特殊项目设置

Create the app’s Angular root component

Add main.ts, identifying the root component to Angular

Add index.html, the web page that hosts the application

Build and run the app

touch package.json
touch tsconfig.json 
touch typings.json
touch systemjs.config.js
touch index.html
touch styles.css
mkdir app
touch app/app.component.ts
touch app/main.ts

 package.json
 
{
  "name": "angular2-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-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 

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

typings.json

{
  "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

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application 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);

npm install
npm run typings install

mkdir app

touch app/app.component.ts

import { Component } from "@angular/core";
@Component({
  selector: "my-app",
  template: "
My First Angular 2 App
"
})
export class AppComponent { }

touch app/main.ts

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

touch index.html

  
    
    
    
    
    
     
    
    
    
    
    
    
    
  
  
  
    Loading...
  

style.css

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}

npm start