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 最简单易用的表单验证插件
Feb 27 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
用ADODB.Stream转换
2007/01/22 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
详解python中的线程与线程池
2019/05/10 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python实现KNN分类算法
2019/10/16 Python
美国社交购物市场:MassGenie
2019/02/18 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
教师对学生的评语
2014/04/28 职场文书
职务说明书范文
2014/05/07 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
运动会表扬稿
2015/01/16 职场文书
2015年个人审计工作总结
2015/04/07 职场文书