摘要：學(xué)習(xí)入門第一課步驟創(chuàng)建應(yīng)用程序的項(xiàng)目文件夾和定義包的依賴關(guān)系和特殊項(xiàng)目設(shè)置文件創(chuàng)建文件編譯

Install Node.js

創(chuàng)建應(yīng)用程序的項(xiàng)目文件夾和定義包的依賴關(guān)系和特殊項(xiàng)目設(shè)置

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