Angular2從搭建環(huán)境到開發(fā)步驟詳解
Angular-CLI
說到 cli 大家不陌生,每出一個(gè)框架都會(huì)有對(duì)應(yīng)的 cli ,俗稱腳手架。angular2 本身提供了起步項(xiàng)目 angular2-quickstart,我嘗試了一下,發(fā)現(xiàn)不是很好用,其它的大部分?jǐn)U展需要自行安裝,之后看了一下 angular-cli 部署簡單易用,還提供了快捷搭建項(xiàng)目的目錄。
安裝
首先,最好先升級(jí) node 到 6.x 可以避免 node 版本過低帶來的不必要的麻煩。
npm install -g angular-cli
用法
ng --help
查看所有用法
創(chuàng)建本地開發(fā)環(huán)境生成和運(yùn)行angular2項(xiàng)目
ng new PROJECT_NAME cd PROJECT_NAME ng serve
PROJECT_NAME
是你自己的項(xiàng)目名
部署成功后不報(bào)錯(cuò)的情況下到瀏覽器 http://localhost:4200/
,修改項(xiàng)目中文件后會(huì)自動(dòng)部署
您可以配置默認(rèn)的 HTTP 端口和一個(gè) LiveReload server 用 --, 形如:
ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
生成組件、指令、管道和服務(wù)
命令以 ng generate
開頭,可以縮寫為 ng g
,下面給出創(chuàng)建 component 的幾種方式。
ng generate component my-new-component ng g component my-new-component # using the alias # components support relative path generation # if in the directory src/app/feature/ and you run ng g component new-cmp # your component will be generated in src/app/feature/new-cmp # but if you were to run ng g component ../newer-cmp # your component will be generated in src/app/newer-cmp
下表里是所有的命令:
創(chuàng)建路由
這里 cli 暫時(shí)禁用了創(chuàng)建路由,新的路由生成器即將到來,您可以在這里閱讀新路由器的官方文檔:https://angular.io/docs/ts/latest/guide/router.html
建立一個(gè) build
ng build
會(huì)生成到 dist/ 目錄下,其它關(guān)于測(cè)試,配置文件請(qǐng)大家去仔細(xì)閱讀,這里只給最基本的搭建流程。
組件實(shí)戰(zhàn)
看到這你可能已經(jīng)開始嘗試了,創(chuàng)建項(xiàng)目的步驟相信大家參照上文可以輕松解決,這里我先嘗試創(chuàng)建一個(gè) component,命令如下。
ng g component nav
這里我創(chuàng)建了一個(gè) nav 組件。執(zhí)行成功后,后臺(tái)會(huì)自動(dòng)部署。我們看一下文件目錄有什么改變
多了一個(gè)叫做 nav 的文件夾,看一看文件目錄
我們發(fā)現(xiàn)與項(xiàng)目創(chuàng)建時(shí)自帶的 app component 目錄結(jié)構(gòu)相同,內(nèi)容也大同小異,大家可以嘗試去創(chuàng)建一個(gè)自己的組件,組件的樣式可以去對(duì)應(yīng)的 css 文件中修改。
這時(shí)我的 app.module.ts 變成了如下
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { NavComponent } from './nav/nav.component'; @NgModule({ declarations: [ AppComponent, NavComponent ], imports: [ BrowserModule, FormsModule, HttpModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
這里不難看出全局自動(dòng)引入了 nav.component
組件。我們現(xiàn)在關(guān)心的問題是組件之間的引用和數(shù)據(jù)傳輸,這里為了簡單起見,只給引入的方法,而數(shù)據(jù)傳輸、路由機(jī)制這里不做解釋大家自行官網(wǎng)。
下面說一下 app 內(nèi)引入 nav 組件,只需要改變 app.component.html
如下。
<h1 class="title"> {{title}} </h1> <app-nav></app-nav>
這里的 class 在對(duì)應(yīng)的 app.component.css
如下
.title { font-size: 100px; }
這時(shí)頁面自動(dòng)刷新字號(hào)變大 ,那么這里的 app-nav
標(biāo)簽從哪里得到的呢?
我們?nèi)?nav.component.ts
里看一眼
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-nav', templateUrl: './nav.component.html', styleUrls: ['./nav.component.css'] }) export class NavComponent implements OnInit { constructor() { } ngOnInit() { } }
不難看出 selector: 'app-nav'
說明我們的指令就是 app-nav
此時(shí)頁面會(huì)呈現(xiàn)成這樣
好,到這里簡單的組件引用已經(jīng)實(shí)現(xiàn)。
引入 Angular material2
文章開頭已經(jīng)闡述了引入 Angular material2 的優(yōu)點(diǎn),用過其它組件樣式框架的都明白。
安裝命令
npm install --save @angular/material
在 src/app/app.module.ts 中引入框架
import { MaterialModule } from '@angular/material'; // other imports @NgModule({ imports: [MaterialModule.forRoot()], ... }) export class PizzaPartyAppModule { }
引入核心和主體風(fēng)格,較 Angular material 1.x 的改進(jìn)在于可以選擇不同的色系。
我們這里用的是 Angular CLI 這里又可以鉆空子啦,添加下面一行到 style.css,注意是 src 目錄下的文件
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
deeppurple-amber
主題顏色是可變的,具體看上文的文檔鏈接。
到這里一直打開控制臺(tái)(是個(gè)好習(xí)慣)的朋友會(huì)發(fā)現(xiàn)類似下面的報(bào)錯(cuò)。
client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\slide-toggle\slide-toggle.d.ts:67:19 Cannot find name 'HammerInput'. client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\core\gestures\MdGestureConfig.d.ts:4:39 Cannot find name 'HammerManager'.
文檔也給出了解釋,因?yàn)榭蚣苤?md-slide-toggle
和 md-slider
兩個(gè)組件依賴外部第三方組件 HammerJS
需要額外的配置。
我們不急著用文檔給的 npm 或引入 cdn 路徑,因?yàn)橛H測(cè)還是會(huì)報(bào)錯(cuò),可能我引入方式有誤,為了大家少走彎路直接給親測(cè)有效的方法
我們先去命令行工具運(yùn)行 npm i --save-dev @types/hammerjs
然后編輯 tsconfig.json 文件將 hammerjs 添加到 types 下
"types": [ "jasmine", "hammerjs" ]
到這里發(fā)現(xiàn)頁面自動(dòng)刷新后報(bào)錯(cuò)消失了,如果需要字體圖標(biāo)可以在 src/index.html 中引入
<link rel="stylesheet">
目前為止,整個(gè) Angular material2 已經(jīng)整裝待發(fā)。
我們嘗試著添加多個(gè)按鈕組件測(cè)試一下,修改 app.component.html
文件,完整代碼如下
<h1 class="title"> {{title}} </h1> <app-nav></app-nav> <button md-button>FLAT</button> <button md-raised-button>RAISED</button> <button md-icon-button> <md-icon class="md-24">favorite</md-icon> </button> <button md-fab> <md-icon class="md-24">add</md-icon> </button> <button md-mini-fab> <md-icon class="md-24">add</md-icon> </button> <br/> <br/> <button md-raised-button color="primary">PRIMARY</button> <button md-raised-button color="accent">ACCENT</button> <button md-raised-button color="warn">WARN</button> <br/> <br/> <button md-button disabled>OFF</button> <button md-raised-button [disabled]="isDisabled">OFF</button> <button md-mini-fab [disabled]="isDisabled"><md-icon>check</md-icon></button>
沒問題這里手懶不寫布局樣式了,直接給 br 換行大家方便看些,待頁面部署完成后我們會(huì)看到以下效果
炫酷的組件,更多組件語法參考上面給的鏈接,到這里相信大家學(xué)習(xí) angular2 的信心倍增,真對(duì)已有組件可以完成快速開發(fā),下一步就是大家去 Angular2 官網(wǎng)看其它概念的時(shí)候啦,處理數(shù)據(jù)實(shí)現(xiàn)與后端對(duì)接。項(xiàng)目上線,大功告成。
總結(jié)
當(dāng)今前端框架層出不窮,不要盲從,要根據(jù)公司需求和員工的工作經(jīng)驗(yàn)選擇框架,真說到性能方面哪個(gè)框架快的話,我雖然沒測(cè)試過,但我確定 React、Vue、Angular2 幾個(gè)之間相差無幾,除非在實(shí)現(xiàn)的時(shí)候代碼存在問題,因?yàn)檫@幾個(gè)框架都經(jīng)過了大型項(xiàng)目的考驗(yàn)。以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
相關(guān)文章
詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11基于AngularJS實(shí)現(xiàn)表單驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了基于AngularJS實(shí)現(xiàn)表單驗(yàn)證功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07angular6的table組件開發(fā)的實(shí)現(xiàn)示例
這篇文章主要介紹了angular6的table組件開發(fā)的實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12詳解利用Angular實(shí)現(xiàn)多團(tuán)隊(duì)模塊化SPA開發(fā)框架
本篇文章主要介紹了詳解利用Angular實(shí)現(xiàn)多團(tuán)隊(duì)模塊化SPA開發(fā)框架,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11Angularjs驗(yàn)證用戶輸入的字符串是否為日期時(shí)間
這篇文章主要介紹了Angularjs驗(yàn)證用戶輸入的字符串是否為日期時(shí)間,需要的朋友可以參考下2017-06-06angular基于路由控制ui-router實(shí)現(xiàn)系統(tǒng)權(quán)限控制
這篇文章主要介紹了angular基于路由控制ui-router實(shí)現(xiàn)系統(tǒng)權(quán)限控制的相關(guān)資料,需要的朋友可以參考下2016-09-09Angular實(shí)現(xiàn)模版驅(qū)動(dòng)表單的自定義校驗(yàn)功能(密碼確認(rèn)為例)
這篇文章主要介紹了Angular實(shí)現(xiàn)模版驅(qū)動(dòng)表單的自定義校驗(yàn)功能(密碼確認(rèn)為例),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05AngularJS2 與 D3.js集成實(shí)現(xiàn)自定義可視化的方法
本篇文章主要介紹了ANGULAR2 與 D3.js集成實(shí)現(xiàn)自定義可視化的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12AngularJS 與百度地圖的結(jié)合實(shí)例
這篇文章主要介紹了AngularJS 與百度地圖的結(jié)合實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10AngularJS控制器controller正確的通信的方法
AngularJS中的controller是個(gè)函數(shù),用來向視圖的作用域($scope)添加額外的功能,我們用它來給作用域?qū)ο笤O(shè)置初始狀態(tài),并添加自定義行為2016-01-01