AngularJs bootstrap搭载前台框架——准备工作


Posted in Javascript onSeptember 01, 2016

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的项目组织,如下:

AngularJs bootstrap搭载前台框架——准备工作

        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相关的都包括了。

以上就是对Bootstrap 搭载前台框架的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

              相关文章:

                                 AngularJs bootstrap搭载前台框架——js控制部分
                                
AngularJs bootstrap搭载前台框架——基础页面
                                 
AngularJs bootstrap搭载前台框架——准备工作
                                
AngularJs bootstrap详解及示例代码

Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
js有序数组的连接问题
Oct 01 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
JavaScript函数基础详解
Feb 03 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 #Javascript
javaScript如何跳出多重循环break、continue
Sep 01 #Javascript
AngularJs bootstrap详解及示例代码
Sep 01 #Javascript
JavaScript数据类型学习笔记分享
Sep 01 #Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 #Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 #Javascript
在web中js实现类似excel的表格控件
Sep 01 #Javascript
You might like
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
php并发加锁示例
2016/10/17 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
实现51Map地图接口(示例代码)
2013/11/22 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python中装饰器高级用法详解
2017/12/25 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
行政部主管岗位职责
2013/12/28 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
总经理任命书
2014/03/29 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
爱牙日活动总结
2014/08/29 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书