AngularJS中使用$http对MongoLab数据表进行增删改查
本篇体验使用AngularJS中的$http对MongoLab数据表进行增删改查。
主页面:
<button ng-click="loadCourse()">Load Course</button>
<button ng-click="toggleAddCourse(true)">Add New Course</button> <ng-includce src="'course_list.html'"></ng-include>
<ng-include src="'add_course.html'" ng-show="toggleAddCourseView"></ng-include>
<ng-include src="'edit_course.html'" ng-show="toggleEditCourseView"></ng-include>
以上,页面上显示course_list.html,add_course.html和edit_course.html的内容显示与toggleAddCourseView和toggleEditCourseView值有关,而toggleAddCourseView和toggleEditCourseView值将通过方法来控制。
■ 在Mongolab上创建数据库和表
→ https://mongolab.com
→ 注册
→ 登录
→ Create new
→ 选择Single-node
勾选Sandbox,输入Database name的名称为myacademy。
→ 点击新创建的Database
→ 点击Add collection
名称为course
→ 点击course这个collection。
→ 多次点击add document,添加多条数据
■ 控制器
$scope.courses = [];
var url = "https://api.mongolab.com/api/1/databases/my-academy/collections/course?apiKey=myAPIKey";
var config = {params: {apiKey: "..."}}; $scope.toggleAddCourseNew = false;
$scope.toggleEditCourseView = false; //列表
$scope.loadCourses = function(){ $http.get(url, config)
.success(function(data){
$scope.courses = data;
});
} //添加
$scope.addCourse = function(course){
$http.post(url, course, config)
.success(function(data){
$scope.loadCourses();
})
} //显示修改
$scope.editCourse = function(course){
$scope.toggleEditCourseView = true;
$scope.courseToEdit = angular.copy(course);
} //修改
$scope.updateCourse = function(courseToEdit){
var id = courseToEdit._id.$oid;
$http.put(url + "/" + id, courseToEdit, config)
.success(fucntion(data){
$scope.loadCourses();
})
} //删除
$scope.delteCourse = function(course){
var id = course._id.$oid;
$http.delete(url+ "/" + id, config)
.success(function(data){
$scope.loadCourses();
})
} $scope.toggleAddCourse = function(flag){
$scope.toggleAddCourseView = flag;
} $scope.toggleEditCourse = fucntion(flag){
$scope.toggleEditCourseView = flag;
}
■ course_list.html 列表
...
<tr ng-repeat="course in courses">
<td>{{$index+1}}</td>
<td>{{course.name}}</td>
<td>{{course.category}}</td>
<td>{{course.timeline}}</td>
<td>{{course.price | currency}}</td>
<td><button ng-click="editCourse(course)">Edit</button></td>
<td><button ng-click="deleteCourse(course)">Delete</button></td>
</tr>
■ add_course.html 添加
<form>
<input type="text" ng-model = "course.name" />
<select ng-model="course.category">
<option>-Select-</option>
<option value="development">Development</option>
<option value="business">Business</option>
</select>
<input type="number" ng-model="course.timeline" />
<input type="number" ng-model="course.price"/> <button ng-click="addCourse(course)">Add</button>
<button ng-click="toggleAddCourse(false)">Cancel</button>
</form>
■ edit_course.html 更新
<form>
<input type="text" ng-model="courseToEdit.name" />
<select ng-model ="courseToEdit.category">
<option>-select-</option>
<option value="development">Development</option>
<option value="business">Business</option>
</select>
<input type="number" ng-model="courseToEdit.timeline"/>
<input type="number" ng-model="courseToEdit.price"/> <button ng-click="updateCourse(courseToEdit)">Update</button>
<button ng-click="toggleEditCourse(false)">Cancel</button>
</form>
当然还可以通过factory的方式创建一个服务,把有关增删改查的逻辑封装在里面。
myApp.factory("courseDataService", function($http, $q){
return {
getCourses: function(){
var deferred = $q.defer;
$http.get(url, config)
.success(function(data){
defered.resolve(data);
})
.error(function(error){
deferred.reject(error);
})
return deferred.promise;
},
addCourse: function(course){
var deferred = $q.defer(); $http.post(url, course, config)
.success(function(data){
deferred.resolve(data);
})
.error(function(error){
deferred.reject(error);
}); return defered.promise;
}
}
})
然后在controller中按如下引用:
myApp.controller("AppCtrl", function($scope, $http, courseDataService){
... $scope.loadCourses = courseDataService.getCourses()
.then(success, error); function success(data){
$scope.courses = data;
} function error(e){
console.log("error:", e);
} $scope.addCourse = function(course){
courseDataService.addCourse(course).then(
function(data){
$scope.loadCourses();
},
function(e){
console.log("error:" + e);
}
);
}
})
AngularJS中使用$http对MongoLab数据表进行增删改查的更多相关文章
- Mysql数据表的增删改查
---恢复内容开始--- Mysql数据表的增删改查 1.创建表 语法:CREATE TABLE 表名(字段1,字段2,字段3.......) CREATE TABLE `users` ( `us ...
- C# - VS2019 通过DataGridView实现对Oracle数据表的增删改查
前言 通过VS2019建立WinFrm应用程序,搭建桌面程序后,通过封装数据库操作OracleHelper类和业务逻辑操作OracleSQL类,进而通过DataGridView实现对Oracle数据表 ...
- mysql 数据表的增删改查 目录
mysql 表的增删改查 mysql 表的增删改查 修改表结构 mysql 复制表 mysql 删除表
- MySQL数据库 | 数据表的增删改查
MySQL数据的增删改查(crud) 本文结构 一.增加 create 二.修改 update 三.查询 retrieve(简单查询,下篇详细展开) 四.删除 delete 首先,创建简单的class ...
- python django对数据表的增删改查操作
新增操作:方式1:book = BookInfo(title='西游记',price=99)book.save() 方式2:BookInfo.objects.create(title='西游记',pr ...
- python利用xmlrpc方式对odoo数据表进行增删改查操作
# -*- encoding: utf-8 -*- import xmlrpclib #导入xmlrpc库,这个库是python的标准库. username ='admin' #用户登录名 pwd = ...
- Django学习笔记--数据库中的单表操作----增删改查
1.Django数据库中的增删改查 1.添加表和字段 # 创建的表的名字为app的名称拼接类名 class User(models.Model): # id字段 自增 是主键 id = models. ...
- MySQL数据库安装,MySQL数据库库的增删改查,表的增删改查,表数据的基本数据类型
一 MySQL的安装 MySQL现在属于甲骨文公司,所以和java语言匹配度较高,同时甲骨文公司的另一种数据库为Oracle,两者同为关系型数据库,即采用关系模型来组织数据,以行和列的方法来存储数据的 ...
- ORM 实现数据库表的增删改查
这次通过反射技术来实现一下数据库表的增删改查对象关系映射(英语:Object Relational Mapping,简称ORM,或O/RM,或O/R mapping) 注:引用时约束了以下几点: 数据 ...
随机推荐
- Ex 6_26 序列对齐..._第七次作业
- python接口自动化测试十九:函数
# 函数 a = [1, 3, 6, 4, 85, 32, 46]print(sum(a)) # sum,求和函数 def add(): a = 1, b = 2, return a + bprint ...
- 基于Linux平台的自动化运维Devops-----之自动化系统部署
一.自动化运维的背景网站业务上线,需要运维人员在短时间内完成几百台服务器部署,包括系统安装.系统初始化.软件的安装与配置.性能的监控......所谓运维自动化,即在最少的人工干预下,利用脚本与第三方工 ...
- Math对象的常用属性和方法
属性 描述 Math.PI 返回π(3.1415926) 方法 描述 Math.round() 将数字四舍五入到离它最近的整数 Math.sart(n) 返回平方根,例如Math.sart(9)返回3 ...
- 【C语言】 二叉树的基本运算
• 二叉树节点类型BTNode: typedef struct node { char data; struct node *lchild, *rchild; } BTNode; 创建二叉树 void ...
- hdu 1257 一共要多少套拦截系统 (LIS)
给出导弹的高度 拦截的导弹会比上一次低 至少要几套拦截系统才能防御所有导弹 求一套系统能防御的最大导弹数: 反向LIS求一共要多少套:正向LIS Sample Input8 389 207 155 3 ...
- 【BZOJ】3123: [Sdoi2013]森林
题解 ------------------ 我莫不是一个智障吧 我把testdata的编号 当成数据组数读进来 我简直有毒 以为哪里写错了自闭了好久 实际上这题很简单,只要愉悦地开个启发式合并,然后每 ...
- Go 语言 IDE 之 VSCode 配置使用
Gogland 是 JetBrains 公司推出的 Go 语言集成开发环境.Gogland 同样基于 IntelliJ 平台开发,支持 JetBrains 的插件体系.官方:https://www.j ...
- js中setInterval和setTimeout区别和用法
setTimeout setTimeout() //- 在指定时间后执行代码clearTimeout() //- 取消 setTimeout(),clearTimeout()方法的参数必须是由setT ...
- BZOJ1296 [SCOI2009]粉刷匠 动态规划 分组背包
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1296 题意概括 有 N 条木板需要被粉刷. 每条木板被分为 M 个格子. 每个格子要被刷成红色或蓝 ...