AngularJs+bootstrap搭载前台框架——准备工作
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的项目组织,如下:
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相关的都包括了。
AngularJs+bootstrap搭载前台框架——准备工作的更多相关文章
- Play1+angularjs+bootstrap ++ (idea + livereload)
我的web开发最强组合:Play1+angularjs+bootstrap ++ (idea + livereload) 时间 2012-12-26 20:57:26 Freewind.me原文 ...
- AngularJS Bootstrap
AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...
- 5个最好用AngularJS构建应用程序框架
如果你打算建立自己的Web应用与AngularJS,那么现在是时候开始了.如果这个想法吓到你了,删除所有的恐慌,从你的头脑中有一些框架,AngularJS提供方便的支持.有一些预先的框架,使用框架可以 ...
- AngularJS - 下一个大框架
AngularJS AngularJS是web应用的下一个巨头. AngularJS如果为创建web应用而设计,那它就是HTML的套路了.具有数据绑定, MVW, MVVM, MVC, 依赖注入的声明 ...
- 【17】AngularJS Bootstrap
AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. Bootstrap 你 ...
- LigerUI一个前台框架增、删、改asp.net代码的实现
先上代码:前台代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 8个强大的基于Bootstrap的CSS框架
做过前端开发的小伙伴们应该对Bootstrap不会陌生,它是由Twitter推出的开源CSS框架,其中包含了很多Web前端开发的工具包和应用组件.当然,和jQuery一样,Bootstrap同时也是一 ...
- 前台框架的选择 EasyUI、DWZ、ligerui
EasyUI1.3.1+MVC4.0+EF5.0 番外篇 关于前台框架的选择 EasyUI.DWZ.ligerui 昨天发了EasyUI1.3.1+MVC4.0+EF5.0实战之一 开篇及布局控件介绍 ...
- LigerUI一个前台框架增、删、改asp.net代码
LigerUI一个前台框架增.删.改asp.net代码的实现 先上代码:前台代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
随机推荐
- C++四则运算出题器---有答案版
一.实验题目 四则运算扩展----能接受答案并判断对错然后给出成绩. 二.实验思路 在每次输出算式后面输入答案,然后判断对错,对则统计. 稍微优化了一下界面. 三.代码 // 12345.cpp : ...
- 程序调试手段之gdb, vxworks shell
调试一个程序主要用到的功能: 启动程序 设置函数断点 设置数据断点 单步执行 查看内存值 修改内存值 linux下的gdb,和vxworks下的shell 虽然使用方式和调试命令略有不同,但是都能满足 ...
- 利用Shell命令获取IP地址
一 :获取单个网卡的IPv4地址,方法如下: 方法一:$/sbin/ifconfig ethX | awk '/inet addr/ {print $2}' | cut -f2 -d ":& ...
- 记codevs第一次月赛
第一次参加这种有奖励的比赛(没错,我就是为猴子而去的 一年没怎么碰代码果然手生,还是用没写多久的C++,差点全跪了 T1数学奇才琪露诺: 首先定义一个函数F(x),F(x)=x的各个数位上的数字和 然 ...
- HTML 表格生成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 图解Git/图形化的Git参考手册
此页图解git中的最常用命令.如果你稍微理解git的工作原理,这篇文章能够让你理解的更透彻. 基本用法 上面的四条命令在工作目录.暂存目录(也叫做索引)和仓库之间复制文件. ● git add fil ...
- UVA 10078 The Art Gallery
Problem: Century Arts has hundreds of art galleries scattered all around the country and you are hir ...
- BZOJ 1552/1506 [Cerc2007]robotic sort
AC通道:http://www.lydsy.com/JudgeOnline/problem.php?id=1552 [分析] 这题哇!又有翻转操作...每次要输出第几个?是吧... 所以又要用Spla ...
- matrix_last_acm_1
password 123 A http://acm.hust.edu.cn/vjudge/contest/view.action?cid=96950#problem/A 题意:n个数初始ai,m次操作 ...
- WP手机升级WIN10被PIN码锁定
WP8.1手机升级WIN10后,需要输入PIN码(不知道啊),多次输入(1234,0000,8888 ...)后被锁定,无法使用手机(郁闷), 重启无数次,提示由于多次输入PIN码,手机无法使用(天啊 ...