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实现画板的代码
Sep 05 Javascript
img的onload的另类用法
Jan 10 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
layUI实现三级导航菜单效果
Jul 26 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
使用js和canvas实现时钟效果
Sep 08 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中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
简单的Python的curses库使用教程
2015/04/11 Python
利用python发送和接收邮件
2016/09/27 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python实现简单flappy bird
2018/12/24 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
24式加速你的Python(小结)
2019/06/13 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
护士进修自我鉴定
2014/02/07 职场文书
学生上课说话检讨书
2014/10/25 职场文书
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS