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 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
Weex开发之地图篇的具体使用
Oct 16 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
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Python中按键来获取指定的值
2019/03/02 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python 元组的使用方法
2020/06/09 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
医学专业毕业生个人求职信
2013/12/25 职场文书
洗发露广告词
2014/03/14 职场文书
美国留学经济担保书
2014/05/20 职场文书
金融与证券专业求职信
2014/06/22 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
python批量创建变量并赋值操作
2021/06/03 Python