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 相关文章推荐
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
Javascript动画效果(2)
Oct 11 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
Vuex的实战使用详解
Oct 31 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
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
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python functools模块学习总结
2015/05/09 Python
python 拼接文件路径的方法
2018/10/23 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
幼儿园庆六一活动方案
2014/03/06 职场文书
人民教师求职自荐信
2014/03/12 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
如何利用python创作字符画
2022/06/25 Python