本篇体验使用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数据表进行增删改查的更多相关文章

  1. Mysql数据表的增删改查

    ---恢复内容开始--- Mysql数据表的增删改查 1.创建表   语法:CREATE TABLE 表名(字段1,字段2,字段3.......) CREATE TABLE `users` ( `us ...

  2. C# - VS2019 通过DataGridView实现对Oracle数据表的增删改查

    前言 通过VS2019建立WinFrm应用程序,搭建桌面程序后,通过封装数据库操作OracleHelper类和业务逻辑操作OracleSQL类,进而通过DataGridView实现对Oracle数据表 ...

  3. mysql 数据表的增删改查 目录

    mysql 表的增删改查 mysql 表的增删改查 修改表结构 mysql 复制表 mysql 删除表

  4. MySQL数据库 | 数据表的增删改查

    MySQL数据的增删改查(crud) 本文结构 一.增加 create 二.修改 update 三.查询 retrieve(简单查询,下篇详细展开) 四.删除 delete 首先,创建简单的class ...

  5. python django对数据表的增删改查操作

    新增操作:方式1:book = BookInfo(title='西游记',price=99)book.save() 方式2:BookInfo.objects.create(title='西游记',pr ...

  6. python利用xmlrpc方式对odoo数据表进行增删改查操作

    # -*- encoding: utf-8 -*- import xmlrpclib #导入xmlrpc库,这个库是python的标准库. username ='admin' #用户登录名 pwd = ...

  7. Django学习笔记--数据库中的单表操作----增删改查

    1.Django数据库中的增删改查 1.添加表和字段 # 创建的表的名字为app的名称拼接类名 class User(models.Model): # id字段 自增 是主键 id = models. ...

  8. MySQL数据库安装,MySQL数据库库的增删改查,表的增删改查,表数据的基本数据类型

    一 MySQL的安装 MySQL现在属于甲骨文公司,所以和java语言匹配度较高,同时甲骨文公司的另一种数据库为Oracle,两者同为关系型数据库,即采用关系模型来组织数据,以行和列的方法来存储数据的 ...

  9. ORM 实现数据库表的增删改查

    这次通过反射技术来实现一下数据库表的增删改查对象关系映射(英语:Object Relational Mapping,简称ORM,或O/RM,或O/R mapping) 注:引用时约束了以下几点: 数据 ...

随机推荐

  1. Ex 6_26 序列对齐..._第七次作业

  2. python接口自动化测试十九:函数

    # 函数 a = [1, 3, 6, 4, 85, 32, 46]print(sum(a)) # sum,求和函数 def add(): a = 1, b = 2, return a + bprint ...

  3. 基于Linux平台的自动化运维Devops-----之自动化系统部署

    一.自动化运维的背景网站业务上线,需要运维人员在短时间内完成几百台服务器部署,包括系统安装.系统初始化.软件的安装与配置.性能的监控......所谓运维自动化,即在最少的人工干预下,利用脚本与第三方工 ...

  4. Math对象的常用属性和方法

    属性 描述 Math.PI 返回π(3.1415926) 方法 描述 Math.round() 将数字四舍五入到离它最近的整数 Math.sart(n) 返回平方根,例如Math.sart(9)返回3 ...

  5. 【C语言】 二叉树的基本运算

    • 二叉树节点类型BTNode: typedef struct node { char data; struct node *lchild, *rchild; } BTNode; 创建二叉树 void ...

  6. hdu 1257 一共要多少套拦截系统 (LIS)

    给出导弹的高度 拦截的导弹会比上一次低 至少要几套拦截系统才能防御所有导弹 求一套系统能防御的最大导弹数: 反向LIS求一共要多少套:正向LIS Sample Input8 389 207 155 3 ...

  7. 【BZOJ】3123: [Sdoi2013]森林

    题解 ------------------ 我莫不是一个智障吧 我把testdata的编号 当成数据组数读进来 我简直有毒 以为哪里写错了自闭了好久 实际上这题很简单,只要愉悦地开个启发式合并,然后每 ...

  8. Go 语言 IDE 之 VSCode 配置使用

    Gogland 是 JetBrains 公司推出的 Go 语言集成开发环境.Gogland 同样基于 IntelliJ 平台开发,支持 JetBrains 的插件体系.官方:https://www.j ...

  9. js中setInterval和setTimeout区别和用法

    setTimeout setTimeout() //- 在指定时间后执行代码clearTimeout() //- 取消 setTimeout(),clearTimeout()方法的参数必须是由setT ...

  10. BZOJ1296 [SCOI2009]粉刷匠 动态规划 分组背包

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1296 题意概括 有 N 条木板需要被粉刷. 每条木板被分为 M 个格子. 每个格子要被刷成红色或蓝 ...