AngularJs bootstrap搭載前臺框架——準備工作
1.關于什么是AngularJs以及什么是bootstrap我就不多說了,簡單說下,AngularJs是一個比較強大前臺MVC框架,bootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包,可以迅速搭建web前臺,可以去官網(wǎng)看看(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位的操作系統(tǒng)可以使用waterfox),輸入地址:http://localhost:8000/app/index.html,你就可以看到一個簡單的頁面出來了,別看它簡單,麻雀雖小五臟俱全,所有的MVC相關的都包括了。
以上就是對Bootstrap 搭載前臺框架的資料整理,后續(xù)繼續(xù)補充相關資料,謝謝大家對本站的支持!
相關文章:
AngularJs bootstrap搭載前臺框架——js控制部分
AngularJs bootstrap搭載前臺框架——基礎頁面
AngularJs bootstrap搭載前臺框架——準備工作
AngularJs bootstrap詳解及示例代碼
相關文章
angularjs中使用ng-bind-html和ng-include的實例
下面小編就為大家?guī)硪黄猘ngularjs中使用ng-bind-html和ng-include的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
基于angular6.0實現(xiàn)的一個組件懶加載功能示例
這篇文章主要介紹了基于angular6.0實現(xiàn)的一個組件懶加載功能示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Angular.js與Bootstrap相結合實現(xiàn)手風琴菜單代碼
這篇文章主要介紹了Angular.js與Bootstrap相結合實現(xiàn)手風琴菜單的相關資料,需要的朋友可以參考下2016-04-04
Angular實現(xiàn)svg和png圖片下載實現(xiàn)
這篇文章主要介紹了Angular實現(xiàn)svg和png圖片下載實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-05-05

