How to use $http to add, delete, modify and query MongoLab data tables in AngularJS

Main page:

Above, the content display of course_list.html, add_course.html and edit_course.html displayed on the page is related to the toggleAddCourseView and toggleEditCourseView values, and the toggleAddCourseView and toggleEditCourseView values will be controlled by methods.

Create databases and tables on Mongolab

→ https://mongolab.com
→ Register
→ Login
→ Create new
→ Select Single-node

Check the Sandbox and enter the Database name as myacademy.

→ Click on the newly created Database
→ Click Add collection

The name is course

→ Click on the course collection.
→ Click add document multiple times to add multiple pieces of data

Controller

 $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;
 //list
 $scope.loadCourses = function(){
 $http.get(url, config)
 .success(function(data){
 $scope.courses = data;
 });
 }
 //Add to
 $scope.addCourse = function(course){
 $http.post(url, course, config)
 .success(function(data){
 $scope.loadCourses();
 })
 }
 //Show changes
 $scope.editCourse = function(course){
 $scope.toggleEditCourseView = true;
 $scope.courseToEdit = angular.copy(course);
 }
 //Revise
 $scope.updateCourse = function(courseToEdit){
 var id = courseToEdit._id.$oid;
 $http.put(url + "/" + id, courseToEdit, config)
 .success(fucntion(data){
 $scope.loadCourses();
 })
 }
 //delete
 $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 list

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

add_course.html Add


 
 
 -Select-
 Development
 Business

edit_course.html Update


 
 
 -select-
 Development
 Business

The above is the knowledge shared by the editor about how to use $http to add, delete, modify and query MongoLab data tables in AngularJS. I hope it will be helpful to everyone.