AngularJs+bootstrap搭載前台框架——准備工作


1.關於什么是AngularJs以及什么是bootstrap我就不多說了,簡單說下,AngularJs是一個比較強大前台MVC框架,bootstrap是Twitter推出的一個用於前端開發的開源工具包,可以迅速搭建web前台,可以去官網看看(AngularJs:http://angularjs.org/ ,bootstrap:http://twitter.github.io/bootstrap/)。

2.github上有一個比較好的純凈AngularJs app的種子,可以去github下載,地址:https://github.com/glitchtank/angular-seed-master

3.我們把下載的angular-seed-master-master.zip解壓到某個文件夾,然后會看到這個app的項目組織,如下:

    app:這個文件夾中包含了跟我們app相關的依賴css和js以及我們的頁面等。

         css:放的是項目的css文件

         img:放的是images

         js:放的是我們項目相關的js,包括controller、filter、service等

         lib:放的是我們依賴的js,包括Angular和Bootstrap相關的庫

        別的就是一些html文件

    其他文件夾暫時不需要知道,大概就是一些腳本(關於node的),還有一些用於Angular測試的

4.我們項目需要用node來啟動,如果不太清楚,沒關系,看我另一篇博客:http://blog.csdn.net/jthink_/article/details/9707895(linuix和windows下的差不多,實在不會就google吧)。

5.由於我們是在windows下,所以我們打開一個cmd,進入到angular-seed-master-master文件夾,然后鍵入命令node scripts/web-server.js(或者用supervisor scripts/web-server.js 如果安裝了supervisor)。

6.打開chrome瀏覽器(這邊推薦使用chrome,或者使用firefox,64位的操作系統可以使用waterfox),輸入地址:http://localhost:8000/app/index.html,你就可以看到一個簡單的頁面出來了,別看它簡單,麻雀雖小五臟俱全,所有的MVC相關的都包括了。


免責聲明!

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



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