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 相关文章推荐
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 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
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
JavaScript实现轮播图特效
2020/04/10 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
python几种常用功能实现代码实例
2019/12/25 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
selenium自动化测试入门实战
2020/12/21 Python
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
介绍一下#error预处理
2015/09/25 面试题
学生个人的自我评价分享
2013/11/05 职场文书
十八届三中全会感言
2014/03/10 职场文书
医院护士工作检讨书
2014/10/26 职场文书
大学生村官个人总结
2015/02/15 职场文书
个人思想政治总结
2015/03/05 职场文书
工地食品安全责任书
2015/05/09 职场文书
公司财务管理制度
2015/08/04 职场文书
redis 查看所有的key方式
2021/05/07 Redis
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python