本篇体验使用AngularJS中的$http对MongoLab数据表进行增删改查。

主页面：

 

Load CourseAdd New Course
     
      
      
     

 

以上，页面上显示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 列表

 

...    {
   {$index+1}}    {
   {course.name}}    {
   {course.category}}    {
   {course.timeline}}    {
   {course.price | currency}}    Edit    Delete

 

■ add_course.html 添加

 

     
    
          
              -Select-        Development        Business        
          
              
      Add    
      Cancel
     

 

■ edit_course.html 更新

 

     
    
          
              -select-        Development        Business        
          
              
      Update    
      Cancel
     

 

当然还可以通过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);            }        );    }})