Angular 2 開發(fā)環(huán)境
在本章中，讓我們研究 Angular 2的開發(fā)環(huán)境。
Angular使用 TypeScript 它是開發(fā)Angular應用程序的主要語言。
TypeScript是一個超級JavaScript集合，它被遷移到TypeScript，用TypeScript編寫的代碼不太容易出現(xiàn)運行時錯誤。
要設置開發(fā)環(huán)境，請按照以下步驟操作:
步驟(1):通過在命令提示符下鍵入以下命令，在本地驅動器中創(chuàng)建項目文件夾。
mkdir angular2-demo cd angular2-demo
創(chuàng)建配置文件
步驟(2):您需要創(chuàng)建 tsconfig.json ，這是TypeScript編譯器配置文件。 它指導編譯器生成JavaScript文件。
{
"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"
]
}
步驟(3):在項目文件夾 angular2-demo 中創(chuàng)建 typings.json 文件，如下所示:
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"
}
}
大量的JavaScript庫擴展了具有特征和語法的JavaScript環(huán)境，而這些特性和語法本身不能被TypeScript編譯器識別。 typings.json 文件用于在Angular應用程序中標識TypeScript定義文件。
在上面的代碼中，有三種類型的文件，如下所示:
core-js :它為我們的ES5瀏覽器帶來ES2015 / ES6功能。
jasmine :這是Jasmine測試框架的類型。
node :它用于引用nodejs環(huán)境中的對象的代碼。
這些類型用于開發(fā)更大的Angular應用。
步驟(4):使用以下代碼將 package.json 文件添加到您的 angular2-demo 項目文件夾:
package.json{
"name": "angular2-demo",
"version": "1.0.0",
"scripts": {
"start": "concurrent \"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.7",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.7.5",
"typings":"^0.6.8"
}
}
package.json 將包含我們的應用所需的包。 這些包使用npm(節(jié)點程序包管理器)進行安裝和維護。 要安裝 npm 請點擊此處 。
步驟(5):要安裝軟件包，請在命令提示符下運行以下npm命令。
npm install
Error messages in red may appear while installing npm, just ignore them.
創(chuàng)建我們的第一個Angular組件
A component is the fundamental concept of Angular. A component is a class that controls a view template - a part of a web page where information to the user is displayed and user feedback is responded. Components are required to build Angular apps.
步驟(6):在項目文件夾中的Angular應用程序組件的位置創(chuàng)建一個名為 app / 的子文件夾。 您可以使用以下命令創(chuàng)建文件夾:
mkdir app cd app
步驟(7):您創(chuàng)建的文件需要以 .ts 擴展名保存。 使用以下代碼在您的 app / 文件夾中創(chuàng)建一個名為 environment_app.component.ts 的文件:
environment_app.component.tsimport {Component, View} from "angular2/core";
@Component({
selector: 'my-app'
})
@View({
template: '<h2>My First Angular 2 App</h2>'
})
export class AppComponent {
}
上述代碼將從 angular2 / core 導入組件和 View
@Component 是一個Angular 2裝飾器，允許您將元數(shù)據與組件類相關聯(lián)。
my-app 可以用作HTML標記來注入，并且可以用作組件。
@view 包含一個模板，用于告訴Angular如何渲染視圖。
export 指定，此組件將在文件外部可用。
步驟(8):接下來，使用以下代碼創(chuàng)建 environment_main.ts 文件:
environment_main.tsimport {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./environment_app.component"
bootstrap(AppComponent);
environment_main.ts 文件告訴Angular加載組件。
要啟動應用程序，我們需要導入Angular的瀏覽器引導函數(shù)和應用程序的根組件。
導入后，通過傳遞根組件類型(即 AppComponent )來調用 bootstrap 。
步驟(9):現(xiàn)在使用以下代碼在您的項目文件夾 angular2-demo / 中創(chuàng)建 index.html
index.html<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/es6-shim.min.js"></script>
<script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/system-polyfills.js"></script>
<script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/angular2-polyfills.js"></script>
<script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/system.js"></script>
<script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/typescript.js"></script>
<script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/Rx.js"></script>
<script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/angular2.dev.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('/app/environment_main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
Angular將使用我們的組件在瀏覽器中啟動該應用，并將其放置在 index.html 上的特定位置。
編譯并運行
步驟(10):要運行應用程序，請在終端窗口中鍵入以下命令:
npm start
上述命令運行兩個并行節(jié)點進程，如下所示:
TypeScript編譯器在watch模式下
lite-server(靜態(tài)服務器)在瀏覽器中加載，并在應用程序文件更改時刷新瀏覽器。
稍后，瀏覽器選項卡將打開，并顯示以下輸出:
更多建議：