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初学:find()方法及children方法的区别分析
Jan 31 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 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
星际实力自我测试
2020/03/04 星际争霸
再说下636单管机
2021/03/02 无线电
php strnatcmp()函数的用法总结
2013/11/27 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
python如何通过实例方法名字调用方法
2018/03/21 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python多进程读图提取特征存npy
2019/05/21 Python
Django 重写用户模型的实现
2019/07/29 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
Python中os模块功能与用法详解
2020/02/26 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
一个大学生十年的职业规划
2014/01/17 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
仓管员岗位责任制
2014/02/19 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
解决numpy和torch数据类型转化的问题
2021/05/23 Python
pytorch 实现在测试的时候启用dropout
2021/05/27 Python