文章出處
2.添加一個
2.添加一個
2.添加一個
文章列表
前言
angularjs2.0 如果發布，公司的項目會基于2.0開發，在1.0的時候就踩了好多坑，趁這2.0還沒正式發布，趕緊踩下坑。 這篇文章是參考angularjs2.0 官方文檔寫的，開發環境需要機器上有 nodejs環境，另外2.0 是基于typescript 開發，微軟開發一種語言 ，附上中文手冊鏈接 大家可以自行研究下..
開發環境的搭建
1.創建項目文件夾
由于我是在window 上開發，機器上裝了Git Bash 所以我直接用命令來構建
mkdir angular2-quickstart
cd angular2-quickstart2.添加一個 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運行 typings toolnpm run postinstallnpm 安裝成功后自動調用 ，這個腳本安裝 定義在 typings.json 文件當中
第一個angular組件( Angular2.0 Hello World)
創建一個app文件夾，并添加 app.component.ts 文件
import {Component} from 'angular2/core'; //導入一個模塊
//組件是一個裝飾功能,它需要一個元數據對象.元數據告訴angular如何創建和使用這個組件。
//通過用前綴@調用:
@Component({
selector:'my-app', //值為一個css選擇器,組件元素的名稱為my-app，Angular會為HTML中的my-app元素創建并顯示AppComponent實例
template:'<h1>Angular 2 hello wold</h1>' //指定對應的模板，以及數據綁定
})
export class AppComponent { } //導出 AppComponent 每個angular的應用都有至少一根組件,通常叫AppComponent. 組件是angular應用程序的基本構建塊。
創建main.ts 文件
import {bootstrap} from 'angular2/platform/browser'; //導入bootstrap 模塊，用來啟動angular
import {AppComponent} from './app.component'; //導入我們應用的根組件
bootstrap(AppComponent); //傳入我們的根組件啟動angular創建index.html 文件
<html>
<head>
<title>Angular 2 hello world</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries (加載一些公用的js) -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS （配置系統js） -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application (顯示我們應用程序) -->
<body>
<my-app>Loading...</my-app>
</body>
</html>啟動
運行我們的命令npm start ,瀏覽器會自動幫我們打開 地址localhost:3000
我們就能看到 我們的程序了，是不是很激動呢。
結束語
angular2.0 相比1.0 簡單了好多，使我們入門更加容易，大家趕快來試試吧，有哪里走不通的，歡迎留言，我及時解答,源碼沒上傳github，如需源碼 ，請@我。
文章列表
全站熱搜
留言列表
