天才第一步，配置環(huán)境node,nvm,npm,webpack等。

１．創(chuàng)建一個文件夾angular2-app.內(nèi)置文件有package.json , tsconfig.json , typings.json.

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

//package.json
{
  "name": "angular2-app",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && 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.15",
    "systemjs": "0.19.26",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.10"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^0.7.12"
  }
}

//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"
  ]
}

2.在當(dāng)前目錄下運(yùn)行(確保node已經(jīng)打開)

npm install

然后就可以看到根目錄下多了一個文件夾node_modules和typings.

3.根目錄下新建文件夾app
這里先寫入兩個文件app.component.ts和main.ts

//app.component.ts
import {Component} from "angular2/core";

@Component({
    selector: "my-app",
    template: "
My First Angular 2 App
"
})
export class AppComponent {
    constructor(){}
 }

//main.ts
import {bootstrap}    from "angular2/platform/browser";
import {AppComponent} from "./app.component";
bootstrap(AppComponent);

4.在根目錄下建立文件index.html和styles.css

//index.html

  
    
        
    
    
    
    
    
       
    
    
    
    
    
    
  
  
  
    
  Loading~~~~
  

//styles.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;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* 
 * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
 * for the full set of master styles used by the documentation samples
 */

5.在根目錄下終端運(yùn)行

npm start

這時就會自動跳轉(zhuǎn)到頁面：

此時，我們的第一個angular2頁面就完成啦