初學(xué)者AngularJS的環(huán)境搭建過程
AngularJS是什么?
AngularJS是一個(gè)開源Web應(yīng)用程序框架。它最初是由MISKO Hevery和Adam Abrons于2009年開發(fā)?,F(xiàn)在是由谷歌維護(hù)
AngularJS特性
AngularJS是一個(gè)功能強(qiáng)大的基于JavaScript開發(fā)框架用于創(chuàng)建富互聯(lián)網(wǎng)應(yīng)用(RIA)。
AngulajJS為開發(fā)者提供的選項(xiàng)(使用JavaScript)在一個(gè)干凈的MVC(模型 - 視圖 - 控制器)的方式來編寫客戶端應(yīng)用程序。
AngularJS寫的應(yīng)用都是跨瀏覽器兼容。AngularJS使用JavaScript代碼自動(dòng)處理適應(yīng)每種瀏覽器。
AngularJS是開源的,完全免費(fèi)的,并且由數(shù)千名世界各地的開發(fā)者開發(fā)維護(hù)。它是根據(jù)Apache許可證2.0版許可發(fā)布。
總體來說,AngularJS是一個(gè)用來構(gòu)建大型應(yīng)用,高性能的Web應(yīng)用程序的框架,同時(shí)使它們易于維護(hù)。
一 、在這里簡單介紹一下Angular-cli的特性:
Angular-cli可以快速搭建框架,創(chuàng)建module,service,class,directive等;
有webpack的功能,可以實(shí)現(xiàn)代碼分隔、按需加載等;
自動(dòng)配置開發(fā)環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境,可以實(shí)現(xiàn)代碼的打包壓縮和熱部署,還可以實(shí)現(xiàn)模塊測試、端到端測試
Angular-cli可以通過后綴自動(dòng)識別sass、less的預(yù)編譯;
Angular-cli可以在創(chuàng)建的時(shí)候進(jìn)行TypeScript的配置,還可以做一些個(gè)性化配置;
通過Angular-cli創(chuàng)建的工程結(jié)構(gòu)是最佳實(shí)踐,可以用于生產(chǎn)環(huán)境;
二、安裝nodejs
AngularJS需要用到Nodejs,所以我們需要先安裝nodejs,需要用到nodejs,nodejs的下載地址是:https://nodejs.org/en/download/,
三、安裝npm和cnpm
下一步是安裝npm,
NPM是隨同NodeJS一起安裝的包管理工具,能解決NodeJS代碼部署上的很多問題,常見的使用場景有以下幾種:
允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用。
允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用。
允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用。
到這里已經(jīng)完成了nodejs和npm的安裝,不過在大天朝內(nèi)用npm安裝的話會(huì)有一些問題,所以我們用cnpm安裝,cnpm也是npm的一個(gè)包。
安裝cnpm,執(zhí)行命令
npm i -g cnpm
執(zhí)行這個(gè)命令之后,等待完成,然后輸入cnpm version查看是否安裝完成,這里我已經(jīng)安裝過了,所以可以進(jìn)去了。
安裝完成cnpm之后,我們開始安裝Angular-cli。
執(zhí)行命令
cnpm i -g angular-cli
然后可以執(zhí)行ng version命令,查看是否安裝完成和angular-cli的版本
安裝完成之后我們就可以使用ng命令,下面開始創(chuàng)建項(xiàng)目。
四、項(xiàng)目創(chuàng)建
安裝完成angular-cli之后就可以直接創(chuàng)建項(xiàng)目了,執(zhí)行命令
ng new JustForTest
其中JustForTest是項(xiàng)目名稱
執(zhí)行這個(gè)命令是創(chuàng)建很多文件,而且需要等待一下,這個(gè)步驟會(huì)等很久,需要等到nod_.modules的安裝完成
直接使用ng serve啟動(dòng)。
這樣就可以直接啟動(dòng)項(xiàng)目,我們在瀏覽器中輸入:http://localhost:4200可以直接訪問:
五、在導(dǎo)入項(xiàng)目
如果是從網(wǎng)上找項(xiàng)目,我們怎么在本地啟動(dòng)呢?下面我們具體操作一下:
推薦大家去看一下大漠老師的這個(gè)教程:Angular2.0視頻教程來了
,在這里演示我們也是用大漠老師的一個(gè)項(xiàng)目:NiceFish,首先我們需要通過git將項(xiàng)目clone下來,這里就不演示這個(gè)了,這是NiceFish的項(xiàng)目地址:http://git.oschina.net/mumu-osc/NiceFish
項(xiàng)目clone下來之后,命令行進(jìn)入項(xiàng)目所在目錄。
執(zhí)行命令
cnpm i -g @angular/cli
這里說明一下,之前我們安裝的是全局的angular-cli。
等待命令執(zhí)行完成,之后再執(zhí)行命令
cnpm install
然后執(zhí)行命令
ng serve -prod -aot
然后等待編譯完成。
完成之后,我們就可以在瀏覽器中輸入:
http://localhost:4200 訪問項(xiàng)目。
總結(jié)
以上所述是小編給大家介紹的初學(xué)者AngularJS的環(huán)境搭建過程,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
- 每個(gè)Angular版本在其生命周期中都經(jīng)歷了各個(gè)階段。組件在Angular中起著關(guān)鍵作用; 在這里,本文將討論Angular中的組件生命周期以及它們?nèi)绾斡绊懣蚣芩邪姹镜纳芷凇?/div> 2021-05-05
簡介可以自動(dòng)完成UI的AngularJS工具angular-smarty
這篇文章主要介紹了簡介可以自動(dòng)完成UI的AngularJS工具angular-smarty,包括其中隔離作用域綁定指令符和promise的使用,需要的朋友可以參考下2015-06-06AngularJS中取消對HTML片段轉(zhuǎn)義的方法例子
這篇文章主要介紹了AngularJS中取消對HTML片段轉(zhuǎn)義的方法例子,在一些需要顯示HTML的地方,就要取消AngularJS的轉(zhuǎn)義,本文就介紹了這種方法,需要的朋友可以參考下2015-01-01angularjs中控制視圖的控制器的兩種注入依賴項(xiàng)及服務(wù)的寫法小結(jié)
在AngularJS中,控制器的依賴注入有兩種方法:顯式依賴注入和隱匿依賴注入,顯式依賴注入通過使用字符串?dāng)?shù)組形式來注入依賴項(xiàng),本文給大家介紹angularjs中控制視圖的控制器的兩種注入依賴項(xiàng)及服務(wù)的寫法,感興趣的朋友一起看看吧2024-09-09Angular實(shí)現(xiàn)點(diǎn)擊按鈕后在上方顯示輸入內(nèi)容的方法
這篇文章主要介紹了Angular實(shí)現(xiàn)點(diǎn)擊按鈕后在上方顯示輸入內(nèi)容的方法,涉及AngularJS事件響應(yīng)及頁面元素屬性動(dòng)態(tài)設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2017-12-12AngularJS實(shí)現(xiàn)與后臺服務(wù)器進(jìn)行交互的示例講解
今天小編就為大家分享一篇AngularJS實(shí)現(xiàn)與后臺服務(wù)器進(jìn)行交互的示例講解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08最新評論