1.搭建Angular2項目

簡述:搭建angular2的開發環境,網上已經有許多教程,不過都是window系統下的教程,我本人使用的是linux系統,搭建環境的過程也稍微比前者麻煩了一點,可參考本人的另外一篇文章Linux系統下安裝Angular2開發環境(Ubuntu16.0)

1. pakeage.json配置文件:是用來聲明項目中使用的模塊,在部署環境時,只要在pakeage所在的目錄執行npm install命令就能夠安裝全部須要的模塊了.
新建一個文件夾做爲項目的根目錄,整個項目的文件都存放在這個文件夾下面.在根目錄下建立一個package.json的配置文件,該文件描述了npm包的全部相關信息,
包括做者,簡介,包依賴,構建等信息,其格式必須是嚴格的json格式.
以下配置:
{
"name":"helloword", //不能在name中包含node,js等字樣.
"version":"1.0.0",
"private":"false", //private設置爲true時,npm會拒絕發佈,這樣會防止repositories不當心被髮布出去.
"description":"hello-world project for angular 2",
"repository":"https://baidu.com/", //可選字段,用來指示代碼存放的位置.
"bower":"^1.7.7", //可選,包管理器
"http-server":"^0.9.0", //可選,輕量的web服務器
"scripts":{
"server":"webpack-dev-server --inline --colors --progress --port 3000",
"start":"npm run server"
}, //可選,實際上指npm-scripts
"License":"MIT",
"devDependencies":{
"@types/core-js":"-0.9.34",
"ts-loader":"-1.2.0",
"typescript":"-2.0.0",
"webpack":"-1.12.9",
"webpack-dec-server":"-1.14.0"
},
"dependencies":{
"@angular/common": "^2.3.1", //angular 開發組提供的服務,管道和指令
"@angular/compiler": "^2.3.1", //angular的模板編譯器,它會解析模板,而且把模板轉換成代碼,以供應用程序運行和渲染
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
"core-js": "^2.4.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
}
}
配置介紹:
scripts:可使用調用一些腳本,或封裝一些命令.
devDependencies:項目開發時所依賴的一些工具包.
dependencies:項目依賴的基礎包.
1.1 http-server介紹：http-server是一個簡單的零配置命令行http服務器，基於node.js。
在命令行的使用:$node http-server
在package.json中定義的方式：
"scripts":{
"start":"http-server -a 0.0.0.0 -p 8000",
}
其中的參數：
-p 端口號 (默認 8080)
-a IP 地址 (默認 0.0.0.0)
-d 顯示目錄列表 (默認 'True')
-i 顯示 autoIndex (默認 'True')
-e or --ext 若是沒有提供默認的文件擴展名(默認 'html')
-s or --silent 禁止日誌信息輸出
--cors 啓用 CORS
-o 在開始服務後打開瀏覽器
-h or --help 打印列表並退出
-c 爲 cache-control max-age header 設置Cache time(秒) ，禁用 caching, 則值設爲 -1 .

2. tsconfig.json文件:放在根目錄下,它配置了TypeScript編譯器的編譯參數.
如:
{
"compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
},
"compileOnSave":"true",
"exclude":["node_modules"]
}
其主要配置說明:
module:組織代碼的方式,
target:編譯目標平臺(ES3,ES5,ES6)
sourceMap:把ts文件編譯成.js文件時,是否生成對應的SourceMap文件.
emitDecoratorMetadata:讓TypeScript支持爲帶有裝飾器的聲明生成元數據;
experimentalDecorators:是否啓用實驗性裝飾器特性.
typeRoots:指定第三方庫的類型定義文件的存放位置,推薦使用node_modules/@types文件夾.

3. 建立資源文件夾:到這一步,angular項目的基本配置文件建立完成,接下來在項目根目錄下建立一個src文件夾,這個文件夾將存放項目的業務代碼文件.

4. 建立組件相關文件:在src目錄下建立app.component.ts文件以及模板文件app.component.html
如://app.component.ts
import { component } from '@angular/core';

@Component({
selector:'hello-world',
templateUrl:'src/app.component.html'
})
export class AppComponent{}

<--app.component.html-->
<h3>hello world</h3>

@Component裝飾器用來告訴angular怎樣建立這個組件,在組件中能夠定義該組件的DOM元素名稱,如selector:'hello-world',也能夠用templateUrl引入模板.
這樣在其餘文件中就能夠經過這個類名引用該組件.

5. 建立app.module.ts文件:在Angular應用中須要用模塊來組織一些功能緊密相關的代碼塊,每一個應用至少又一個模塊.
如://app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component'

@NgModule({
declarations:[AppComponent],
imports:[BrowserModule],
boostrap:[AppComponent]
})
export class AppModule{}
說明:
@NgModule:用於定義模塊用的裝飾器.
declarations:導入模塊以來的組件,指令等.
imports:用來導入當前模塊所需的其餘模塊.幾乎每一個應用的跟模塊都須要導入BrowserModule模塊,它註冊了一些關鍵的Provider和通用的指令,因此在imports屬性中配置,做爲
公用模塊共全局調用.
bootstrap:標記出引導組件,在Angular啓動應用時,將被標記的組件渲染到模板中.

6. 添加main.ts文件:Angular項目通常有一個入口文件,經過這個文件來串聯起整個項目.
如://main.ts
import 'reflect-metadata';
import 'zone.js'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule).catch(err=>console.error(err));
說明:要啓動應用,主要依賴於Angular自帶的platformBrowserDynamic函數和應用模塊AppModule,經過調用platformBrowserDynamic().bootstrapModule()方法,來編譯啓動
AppModule模塊.

7. 建立index.html宿主頁面:
這裏就不詳細列出,主要是在body中添加<hello-world></hello-world>自定義標籤,和引入js腳本<script src='bundle.js'></script>
其中的<hello-world></hello-world>標籤就是在根組件app.component.ts中定義的selector.

8. 配置打包:在package.json文件的devDependencies{
...
"webpack":"~1.12.9",
"webpack-dev-server":"~1.14.0"
}
其中已經設置了打包工具webpack,webpack-dev-server是一個小型的服務器.開發時項目能夠在這個服務器上運行.webpack也又本身的配置文件,在根目錄下建立一個webpack.config
.js文件,其配置以下:
//webpack.config.js
var webpack=require('webpack');
var path=require('path');
module.exports={
entry:"./src/main,ts",
output:{
//制定打包後的輸出文件名,這個文件須要被引入到index.html中
filename:"./bundle.js"
},
resolve:{
root:[path.join(__dirname,'src')],
extensions:['','.ts','.js']
}
module:{
loader:[
{test:/\.ts$/,loader:'ts-loader'}
]
}
};
其中主要的配置說明:
entry:頁面入口文件配置,能夠是一個或者多個入口文件
output:對應的輸出項配置,輸出入口文件編譯後的文件.
resolve:定義瞭解析模塊路徑時的配置,經常使用的是extensions,能夠用來指定模塊的後綴,這樣引入模塊時就不須要寫後綴,它會自動補全.
module.loaders:它告知webpack每一類文件都須要使用什麼加載器來處理.

9. 最後:
1.在根目錄下運行npm -install命令,npm會根據package.json配置文件,安裝全部依賴包,安裝的過程當中,會自動建立一個node_modules文件夾,項目依賴的包都安裝在其中.
2.運行npm start命令啓動服務.
3.最後在瀏覽器中輸入localhost:3000,能夠看到項目啓動後效果.