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 ...
随机推荐
- nodejs笔记二--文件I/O;
一.写入文件: fs.writeFile(filename, data, callback),数据参数可以是string或者是Buffer,编码格式参数可选,默认为"utf8",回 ...
- Python科学计算(二)windows下开发环境搭建(当用pip安装出现Unable to find vcvarsall.bat)
用于科学计算Python语言真的是amazing! 方法一:直接安装集成好的软件 刚开始使用numpy.scipy这些模块的时候,图个方便直接使用了一个叫做Enthought的软件.Enthought ...
- .NET-提取字符串实践总结
前阶段工作时遇到一个截取字符串的问题,由于字符串比较长,大概得几万字符吧(XML形式),要提取中间两个节点之间的内容,在网上费了好大功夫才找到能用的正则.工作当用的时候碰到这样的事最蛋疼了,网上的资源 ...
- footer居底
结构部分: <div class="container"> <div class="header">header</div> ...
- 单点登录的原理与CAS技术的研究
1.什么是单点登录? 关于单点登录技术的说明参考文章:http://www.cnblogs.com/yupeng/archive/2012/05/24/2517317.html 一般来说,整个原理大家 ...
- Android开发-环境搭建以及HelloWorld
最近开始进行Android的开发,没有基础完全从0开始. 首先,知道Android开发的官方网站: http://developer.android.com/index.html 网站本身教程非常 ...
- 【bzoj1013】[JSOI2008]球形空间产生器sphere
1013: [JSOI2008]球形空间产生器sphere Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 4530 Solved: 2364[Subm ...
- 扫描二维码跳转app
1.判断是否安装了app <html> <head> <meta name="viewport" content="width=device ...
- 一个奇怪的网络故障 默认网关为0.0.0.0(Windows)
用IPCONFIG命令看到的情况是这样: Windows IP 配置 以太网适配器 本地连接 : 连接特定的 DNS 后缀 . . . . . . . : 本地链接 IPv6 地址. . . . . ...
- Comet技术浅论
1.如何实现一个轮询? function getMessage(url,callback){ var XHR=new XMLHttpRequest(); XHR.open('get',url,true ...