安裝 NPM 依賴
首先我們創(chuàng)建前端項(xiàng)目應(yīng)該有的內(nèi)容：
創(chuàng)建 src/index.html 文件:
<!DOCTYPE html>
<html>
<head>
<meta chartset="utf8">
<title>Angular 2 Starter</title>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
創(chuàng)建 app/app.component.ts 文件：
import { Component } from '@angular/core';
創(chuàng)建 package.json 文件，并安裝依賴項(xiàng)目
{
"name": "angular2-starter",
"version": "0.1.0",
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.23"
}
}
用如下命令安裝 npm 依賴：
npm install
在 app/app.component.ts 中創(chuàng)建組建
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My App</h1>'
})
export class AppComponent { }
此時會出現(xiàn)一些錯誤，不用擔(dān)心，是我們的相關(guān)依賴沒有安裝完成，我們會在后面解決這個問題。
創(chuàng)建啟動文件 main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app/app.component.ts';
platformBrowserDynamic().bootstrapModule(AppComponent);
現(xiàn)在這個項(xiàng)目雛形已經(jīng) OK ，但是這些代碼都是基于 TypeScript 的，瀏覽器中無法運(yùn)行，接下來我們會學(xué)習(xí)到如何編譯 TypeScript。
DEMO 源碼
〖堅(jiān)強(qiáng)的一俢〗
