AngularJs 開發app之准備工作1_bower安裝及使用


寫在前面的話:

  前段時間一直在學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文件夾都刪了吧~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM