DIV CSS 佈局教程網

前言

angularjs2.0 如果發布，公司的項目會基於2.0開發，在1.0的時候就踩了好多坑，趁這2.0還沒正式發布，趕緊踩下坑。 這篇文章是參考angularjs2.0 官方文檔寫的，開發環境需要機器上有 nodejs環境，另外2.0 是基於typescript 開發，微軟開發一種語言 ，附上中文手冊鏈接 大家可以自行研究下..

開發環境的搭建

1.創建項目文件夾

由於我是在window 上開發，機器上裝了Git Bash 所以我直接用命令來構建

mkdir angular2-quickstart
cd angular2-quickstart

2.添加一個 ·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"
  ]
}

這個文件是 typescript編譯指南文件，也就是說這事 ts 的編譯配置文件，關於更多 Typescript Configuration

2.添加一個 ·typings.json` 文件

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

一些js庫擴展了JavaScript的特性和語法，但是TypeScript編譯器並不識別，因此需要在typings.json文件中配置TypeScript類型定義文件（文件名後綴為.d.ts）

2.添加一個 ·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.13",
    "systemjs": "0.19.25",
    "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.11"
  }
}

angularjs 用 npm 安裝所有的依賴包，我們用 npm install 來安裝 。安裝過程可能會出錯，建議FQ，如果npm出現 關於 typings 的錯誤，可能是你沒有安裝，這時候我們可以用命令npm install typings --global 去安裝

package.json 文件中定義了一些腳本

• npm start 在觀察模式下 ，運行編譯和啟動服務
  
• npm run tsc 運行 typescript 編譯器
• npm run tsc:w 在觀察模式下運行typescript編譯器（監控 後綴.ts 文件的變化，文件一旦變化就會重新編譯）
• npm run lite 運行 lite-server 一個輕量級的靜態文件服務器，用於支撐angular 的路由
• npm run typings 運行 請@我。