How to use $http to Angularjs in the Mongolab data table _angularjs

Main Page:

<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>

Above, the page shows course_list.html,add_course.html and Edit_ The contents of the course.html are related to the Toggleaddcourseview and Toggleeditcourseview values, while the Toggleaddcourseview and Toggleeditcourseview values are controlled by the method.

Creating databases and tables on Mongolab

→https://mongolab.com
→ Registration
→ Login
→create New
→ Select Single-node

Check the sandbox and enter the name of the database name Myacademy.

→ Click on the newly created database
→ Click Add Collection

Name is course

→ Click Course this collection.
→ Click Add document more than once, adding more than one 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 $s Cope.addcourse = function (course) {$http. Post (URL, course, config). Success (function (data) {$scope. loadcourses ();})}/ /display Modify $scope. Editcourse = function (course) {$scope. Toggleeditcourseview = true; $scope. Coursetoedit = Angular.copy (
Course); }//Modify $scope. Updatecourse = function (Coursetoedit) {var id = coursetoedit._id. $oid; $http. Put (url + "/" + ID, Coursetoedi
T, config). Success (Fucntion (data) {$scope. loadcourses ();})} Delete $scope. Deltecourse = function (course) {var id = course._id. $oid; $http. Delete (url+ "/" + ID, config). Success (Functio
N (data) {$scope. loadcourses ();}) $scope. Toggleaddcourse = function (flag) {$scope. toggleaddCourseview = Flag; $scope. Toggleeditcourse = fucntion (flag) {$scope. Toggleeditcourseview = Flag;}

course_list.html List

<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 add

<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 Update

<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>

The above is a small set to share the ANGULARJS in how to use $http to mongolab data table for the relevant knowledge of the screening, I hope to help.