寫在前面的話:
前段時間一直在學vue, 近來機緣巧合又得到一個angular 項目實例,現試試angular 做一個項目
一、AngularJs 開發app之准備工作:
(1)安裝個開發調試工具先:
batarang(https://github.com/angular/batarang 下載v0.10.7)
(2)安裝依賴調試工具,這里選擇的是 bower :
使用npm安裝:
npm install -g bower (我安裝到的是 bower@1.8.0)
(3)初始化一個項目(空文件夾,叫 webapp,在此文件夾初始化一下使之成為 git 倉庫,再使用 git bash 開始進行以下操作):
bower init
然后會讓你選擇一些選項,可參考以下截圖(剛開始使用的是 cmd命令行,結果在使用bower 安裝 angualar文件的時候總是報錯,說什么git...后來我就改成 git bash往下做了~,但是前面這塊的截圖還是用的 cmd 命令行~將就看一下吧):
注:是否私有你可以自己及隨便選,我看視頻上選的是 no.
然后你的 webapp文件夾下就多了一個 bower.json 文件。
(4)使用 bower install angularJs
bower install --save angular
成功以后便會如下圖所示,且 webapp 文件夾下會多了一個名為“bower_components”文件夾:
上圖顯示,安裝的是 angular1.6.2版本的,在移動端開發使用最新版是ok的,但是如果是在 pc端的話,考慮到兼容性,一般是使用1.2版本的,切換版本可以進行如下操作:
bower install --save angular#1.2
因為我要使用的是移動端開發版本,就不用變換版本號啦!~
目前我實踐的這個項目是不會用到以下的一些知識點的,所以如果想知識跟我一起學習這個項目的話,可以不看~
如果你想了解更多,請繼續往下看~
(5)新建一個 .bowerrc文件
直接在webapp 文件夾下新建當然是不行的,會提示輸入文件名,所以采用以下辦法:
null > .bowerrc
雖然報錯了(如下圖),但是還是創建成功了!
(6)在.bowerrc 文件中,指定一個新生成目錄名稱(如:lib)。也就是在其中添加如下代碼:
{
"directory":"lib"
}
(7)安裝一個 requirejs:
bower install --save requirejs
成功后如截圖所示,同時 webapp 文件夾下,會新生成一個名為“ lib ”文件夾,文件夾中會包含之前配置好的 angular 以及 requirejs 文件夾,並且 bower.json文件中也會出現 requirejs 的版本相關信息。
因為 requirejs 是接下來不需要用到的,所以 可以通過 npm uninstall 卸載掉
bower uninstall --save requirejs
運行以后發現,bower.json文件中 以及 lib 文件中 的requirejs 相關信息已經被清除~
至此,把 .bowerrc 以及 lib文件夾都刪了吧~