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 事件的一些重要说明
Oct 25 Javascript
js给selected添加options的方法
May 06 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
Feb 21 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 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实现jQuery扩展函数
2009/10/30 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python help()函数用法详解
2014/03/11 Python
python实现保存网页到本地示例
2014/03/16 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
python判断无向图环是否存在的示例
2019/11/22 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Python yield的用法实例分析
2020/03/06 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
用python制作个视频下载器
2021/02/01 Python
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
教师研修随笔感言
2014/01/23 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript