1：環(huán)境搭建
今天給大家介紹4種環(huán)境搭建的方法肛真。
一：Angular-cli的安裝
官方指導(dǎo)文檔：www.angular.cn/guide/quickstart
請使用cnpm來安裝，或者配置淘寶鏡像爽航。
使用原生npm安裝可能會(huì)遇到的問題：
- 需要python的環(huán)境
- 可能會(huì)依賴某些franework導(dǎo)致會(huì)要求安裝Visual Studio（在下文中會(huì)為大家介紹webstrom的配置）
- node-sass // 因?yàn)閆F導(dǎo)致蚓让，被墻掉了。
- node-gyp模塊可能會(huì)編譯錯(cuò)誤讥珍。
如果還遇到問題可以參考：http://blog.csdn.net/zhy13087344578/article/details/60745667
二：Angular-seed
Angular的種子文件历极，他有很多的版本，我們今天通過官方的seed來安裝衷佃。
官方的angular-seed地址：https://github.com/angular/angular2-seed
步驟：
- git clone https://github.com/angular/angular2-seed.git安裝種子文件(沒有g(shù)it的趟卸，可以自己down zip下來，然后打開cmd氏义，執(zhí)行cnpm install)锄列。
前置需安裝的包文件
- npm install -g webpack webpack-dev-server typescript
- npm install
- npm start
- 訪問本地 localhost:3000
seed文件的優(yōu)點(diǎn)：
- 自帶簡單的路由
- 自帶From模塊
- 帶有Http請求模塊
- 體現(xiàn)出了Angular的核心功能
- 項(xiàng)目體量小
三：基于webpack安裝（爽歪歪的方法）
- 優(yōu)點(diǎn)：可以讓我們自由的配置webpack.config.js
- 步驟：https://github.com/kunl/Angular-webpack-AOT
- 場景：從Node轉(zhuǎn)到前端的公司或者項(xiàng)目推薦用這種方式
手動(dòng)創(chuàng)建項(xiàng)目（真正的勇士）
- 條件：大神級(jí)別的使用方法（我不是大神，會(huì)簡單的介紹一下）
- 優(yōu)點(diǎn)：想要什么在項(xiàng)目中添加什么觅赊，非秤胰铮快捷
- 步驟：
- 準(zhǔn)備工作：
在開始搭建Angular環(huán)境前，還需要做一些準(zhǔn)備工作吮螺，包括安裝Angular所依賴的基礎(chǔ)環(huán)境Node.js，可以在官網(wǎng)(https://nodejs.org/en/download/)下載安裝帕翻，需要確認(rèn)Node.js版本為v4.x.x以上鸠补，npm版本為v3.x.x以上。使用版本為node v5.11.0版本嘀掸。
- 搭建步驟
1: 創(chuàng)建package.json
{
"name": "HelloByHand",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"start": "npm run server",
"server": "webpack-dev-server –inline –colors –progress –port 3000"
},
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"reflect-metadata": "~0.1.8",
"core-js": "~2.4.1",
"rxjs": "5.0.0-beta.12",
"zone.js": "~0.6.26"
},
"devDependencies": {
"@types/core-js": "~0.9.34",
"ts-loader": "~1.2.0",
"webpack": "~1.12.9",
"webpack-dev-server": "~1.14.0",
"typescript": "~2.0.0"
}
}
2：創(chuàng)建tsconfig.json
配置了typescript編譯器的編譯參數(shù)紫岩。
{
"compileOnSave": true,
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments":false,
"noImplicitAny": true,
"suppressExcessPropertyErrors": true,
"typeRoots": [
"node_modules/@types"
],
"exclude": [
"node_modules"
]
}
}
3：創(chuàng)建資源文件夾
在項(xiàng)目根目錄下創(chuàng)建一個(gè)src文件夾
4：創(chuàng)建組件相關(guān)文件
在src目錄下創(chuàng)建app.component.ts文件以及模板文件app.component.html，示例代碼如下：
//app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
templateUrl: 'scr/app.component.ts'
})
export class AppComponent {}
//app.component.html
<h1>Hello World</h1>
5：創(chuàng)建app.module.ts文件
在Angular應(yīng)用中需要用模塊來組織一些功能緊密相關(guān)的代碼塊睬塌，每個(gè)應(yīng)用至少有一個(gè)模塊泉蝌，習(xí)慣上把它叫做AppModule。在src目錄下創(chuàng)建一個(gè)app.module.ts文件來定義AppModule揩晴，代碼如下：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
6: 添加main.ts文件
Angular項(xiàng)目一般有一個(gè)入口文件勋陪，通過這個(gè)文件來串聯(lián)起整個(gè)項(xiàng)目。示例代碼如下：
//main.ts
import 'reflect-metadata';
import 'zone.js';
import { platforBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platforBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));
7：創(chuàng)建index.html宿主頁面
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>加載中....</app-root>
<script src="bundle.js"></script>
</body>
</html>
8：創(chuàng)建webpack.config.js
//webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: './scr/main.js'
output: {
filename: './bundle.js'
},
resolve: {
root: [path.join(__dirname, 'scr')],
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
}
}
- 重點(diǎn)：一個(gè)Angular項(xiàng)目必須要有一個(gè)模塊和一個(gè)組件硫兰。
2：詳細(xì)介紹Angular-cli命令行工具
創(chuàng)建項(xiàng)目和組件：
- ng new (創(chuàng)建angular項(xiàng)目)
-
ng generate (創(chuàng)建項(xiàng)目中的組件等內(nèi)容)
具體操作如下圖：
1505046247(1).png
-
啟動(dòng)服務(wù)：
- ng serve --open (--open是在瀏覽器中打開的意思)
-
測試和打包
- ng test
- ng build
特點(diǎn)跟特性：借助了 Amber Cli （負(fù)責(zé)：項(xiàng)目構(gòu)建诅愚、項(xiàng)目的組織架構(gòu)等） / WebPack（負(fù)責(zé)：調(diào)試、打包劫映、測試）
3: Angular文件結(jié)構(gòu)分析
以Angular-cli創(chuàng)建的項(xiàng)目目錄為基礎(chǔ)违孝。
- e2e 文件端對端測試
- src 我們主要的開發(fā)代碼的存放位置
- angular-cli.json angular-cli配置
- karma.config.js 單元測試文件
- package.json npm包管理配置
- Protractor.conf.js 這也是測試的相關(guān)文件
- README.md 有我們的cli說明
- Tsconfig.json 我們的Typescript配置
- Tslint.json 是我們Typescipt代碼格式校驗(yàn)文件
src 目錄下結(jié)構(gòu)
- app 根模塊刹前、根組件
- assets 放圖片、字體文件等等
- environments 配置環(huán)境雌桑。生成環(huán)境喇喉、開發(fā)環(huán)境、測試環(huán)境
- index.html 單應(yīng)用的唯一頁面
- main.ts 整個(gè)項(xiàng)目的入口腳本
- polyfills.ts 兼容老版本的瀏覽器
- styles.css 全局樣式配置
- test.ts 測試用例的ts
4：源碼的位置分析
- @angular/core 存放核心代碼校坑，如變化監(jiān)測機(jī)制轧飞、依賴注入機(jī)制、渲染等撒踪，核心功能的實(shí)現(xiàn)过咬，裝飾器也會(huì)存放在這個(gè)模塊。
- @angular/common 存放一些常用的內(nèi)置指令和內(nèi)置管道等制妄。
- @angular/froms 存放表單相關(guān)內(nèi)置組件與指令掸绞。
- @angular/http 存放網(wǎng)絡(luò)請求相關(guān)的服務(wù)等。
- @angular/router 存放路由相關(guān)
- @angular/platform-<X> 存放引導(dǎo)啟動(dòng)相關(guān)工具耕捞。
5：WebStrom配置Angular
- 選擇File -> settings -> Languages & Frameworks -> Javascript衔掸，選擇編譯方式為ECMAScript 6。
- 選擇File -> settings -> Languages & Frameworks -> Javascript->Libraries ->右側(cè)面板選擇 Add ->在彈出框中選擇綠色加號(hào)俺抽，再選擇目錄 ->在彈出的窗口中選擇當(dāng)前項(xiàng)目下的node_modules 文件夾 ->一路ok和apply敞映。等待IDE加載完畢即可。
6: Bootstrap等插件的安裝使用
我們使用bootstrap的樣式磷斧，在控制層方面（bootstrap涉及到j(luò)s的地方）我們使用ngx-bootstrap振愿。
官方地址：http://valor-software.com/ngx-bootstrap/#/涉及到j(luò)avascript操作的部分在這個(gè)鏈接里找解決方案。
AngularCli項(xiàng)目集成Bootstrap步驟：
- npm install ngx-bootstrap bootstrap –save
- 在項(xiàng)目目錄下的 .angular-cli.json中的“styles”參數(shù)中添加：
"../node_modules/bootstrap/dist/css/bootstrap.min.css" - 重啟項(xiàng)目就可以直接使用bootstrap的樣式了弛饭，例如form-group,btn…
7：啟動(dòng)過程詳解
需要掌握的內(nèi)容：
- 啟動(dòng)時(shí)加載哪兒頁面冕末。（index.html）
- 啟動(dòng)時(shí)加載哪個(gè)腳本。（main.ts）
- 啟動(dòng)時(shí)做了什么事情侣颂。
第三個(gè)問題要從main.ts來分析重點(diǎn)：
- 在main.ts中platformBrowserDynamic是動(dòng)態(tài)引導(dǎo)項(xiàng)目加載档桃。會(huì)把項(xiàng)目指引到AppModule中去。
- AppModule中的bootstrap元數(shù)據(jù)憔晒，會(huì)指定模塊的根組件也就是app.component.ts
- 根組件暴露出select選擇器為app-root藻肄。而index.html中加載了<app-root></app-root>標(biāo)簽。從而實(shí)現(xiàn)了頁面的顯示
