没有合适的资源?快使用搜索试试~ 我知道了~
首页IndexedDB与AngularJS:前端MVC示例与Bootstrap应用
本文档主要探讨了在AngularJS环境中利用IndexedDB实现模型层(Model)的前端浏览器对象型数据库,并结合Bootstrap进行视图层(View)的设计。IndexedDB的特点在于其作为索引型数据库,用户需要为表创建索引来支持根据特定字段查询数据,与传统的关系型数据库不同。其数据操作相对直接,如使用`objectStore.push()`方法将JSON对象存储,强调的是数据驱动而非SQL查询。 Bootstrap方面,作者虽然不是前端专家,但指出这是一个流行的响应式前端框架,主要用于CSS设计,而现代前端开发倾向于使用轻量级的库或框架来处理交互逻辑,Bootstrap的JavaScript功能可能会逐渐被取代。AngularJS的控制器层(Controller)则扮演着关键角色,它实现了前端与后端的分离,开发者可以通过改变数据来动态更新页面,不再局限于DOM操作。这种变化使得AngularJS更像是在客户端渲染模板,而非像JSP和Freemarker那样在服务器端进行,从而提高了开发效率并简化了前后端协作。 文章提供了实际的代码示例,包括HTML结构和AngularJS的基本配置,例如在`user.html`文件中如何设置`<meta>`标签以适应移动设备,以及如何使用AngularJS的指令来驱动页面内容的更新。通过这个应用示例,读者可以了解到如何在AngularJS MVC架构中整合IndexedDB和Bootstrap,实现前端数据驱动的高效开发模式。
资源详情
资源推荐
indexedDB bootstrap angularjs之之 MVC DOMO (应用示例应用示例)
1、、indexedDB((Model)) — 前端浏览器对象型数据库,一般我们后台用的数据库都是关系型数据库。那么indexeddb有什么
特点呢:
首先,从字义上它是索引型数据库,从实际使用中可以体现为,它需要为表创建索引才可以根据某个字段来获取数据,而
在关系型数据库中,这明显是不需要的。
其次,我不需要行列数据的转化,我只需要通过类似于数组的处理方式:
复制代码 代码如下:
objectStore.push(data);
有点像是把一个json对象塞入数据库,是不是很暴力?
2、、bootstrap((View) – bootstrap,老实说,我不是很熟悉这个东西,毕竟我是后端java开发出身。以我的理解,
这就是一个以响应式布局为特点的前端框架,至于说比较特别的,应该就是它比较流行吧?!老实说,我这边只用到css,而
我也认为,后现代的前端开发,将不会需要bootstrap的js部分,毕竟那还是以jquery为主的方式。
3、、angularjs((Controller)) – 必须承认这个东西东西的诞生完全颠覆了我对前端开发的看法,以前和现在我们依然
困在前后端无法彻底分离的窘境中,但我认为如果后期,前端人员普遍采用应用式的angularjs脚本来开发(还有一些类似的
框架),我们将不再需要让后端开发工程师套用诸多的前端样式、结构等等。
这么说,很多后端人员可能还是不能体会得到,举个例子:angularjs的使用方式有点像是jsp、freemarker等渲染html的东
西,只是一个在客户端渲染,另一个在后台服务器渲染。我们只要改变数据的结构和属性,对应渲染出来的页面就会不
同,angularjs就是让我们更加关注数据的变化,而非DOM的变化,就是说:你将很少会去写到$(“btnSave”).click(function()
{});这样需要获取到html节点的脚本代码,可以说,这完全脱离了jQuery的范畴。所以这可以算是一个跨时代的改变?
接下来就上例子吧(最终必须运行到服务器上):接下来就上例子吧(最终必须运行到服务器上):
user.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"/>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
<h3>Users</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="one in users">
<td>
<button class="btn" ng-click="editUser(one)">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
<button class="btn" ng-click="deleteUser(one.id)">
<span class="glyphicon glyphicon-remove"></span> Delete
</button>
</td>
<td>{{ one.fName }}</td>
<td>{{ one.lName }}</td>
<td>{{ one.telephone }}</td>
</tr>
</tbody>
</table>
<hr>
<button class="btn btn-success" ng-click="editUser()">
<span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
下载后可阅读完整内容,剩余4页未读,立即下载
weixin_38595690
- 粉丝: 6
- 资源: 942
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功