本篇体验使用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);
}
);
}
})