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 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 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下清空字符串中的HTML标签的代码
2010/09/06 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
浅谈php命令行用法
2015/02/04 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
常规表格多表头查询示例
2014/02/21 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
Javascript实现关闭广告效果
2021/01/29 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
python操作redis的方法
2015/07/07 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
python字典的常用操作方法小结
2016/05/16 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
python应用文件读取与登录注册功能
2019/09/23 Python
pandas 空数据处理方法详解
2019/11/02 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
新春文艺演出主持词
2014/03/27 职场文书
销售口号大全
2014/06/11 职场文书
信息员培训方案
2014/06/12 职场文书
ktv好的活动方案
2014/08/17 职场文书
商超业务员岗位职责
2015/02/13 职场文书
关于幸福的感言
2015/08/03 职场文书