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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
子页向父页传值示例
Nov 27 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
JS验证码实现代码
Sep 14 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 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
cmd下运行php脚本
2008/11/25 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
Python中最大递归深度值的探讨
2019/03/05 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
python 带时区的日期格式化操作
2020/10/23 Python
python中的yield from语法快速学习
2020/11/06 Python
学习心理学的体会
2014/11/07 职场文书
趣味运动会开幕词
2015/01/28 职场文书
办公室卫生管理制度
2015/08/04 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
app场景下uniapp的扫码记录
2022/07/23 Java/Android
Vue深入理解插槽slot的使用
2022/08/05 Vue.js