你的位置:首页 > Java教程

[Java教程]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>