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 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
JavaScript 学习技巧
Feb 17 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
vue实现搜索过滤效果
May 28 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
微信小程序实现电子签名功能
Jul 29 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
德生PL660的电路分析和打磨
2021/03/02 无线电
动易数据转成dedecms的php程序
2007/04/07 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
js闭包用法实例详解
2016/12/13 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
Python3基础之基本运算符概述
2014/08/13 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
python交互式图形编程实例(三)
2017/11/17 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
Python如何实现转换URL详解
2019/07/02 Python
python获取Pandas列名的几种方法
2019/08/07 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
社区国庆节活动方案
2014/02/05 职场文书
法学函授自我鉴定
2014/02/06 职场文书
教师求职自荐信
2014/03/09 职场文书
企业形象策划方案
2014/05/29 职场文书
本科毕业生自荐信
2014/06/02 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js