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);
            }
        );
    }
})