$http를 사용하여 AngularJS_AngularJS에서 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 및ggleEditCourseView값과 관련되며,toggleAddCourseView 및ggleEditCourseView값은 메소드에 의해 제어됩니다.

Mongolab에서 데이터베이스 및 테이블 생성

→ https://mongolab.com
→ 등록
→ 로그인
→ 새로 만들기
→ 단일 노드 선택

샌드박스를 확인하고 데이터베이스 이름을 myacademy로 입력하세요.

→ 새로 생성된 데이터베이스를 클릭하세요
→ 컬렉션 추가 클릭

이름은 코스

→ 강좌 모음을 클릭하세요.
→ 여러 데이터를 추가하려면 문서 추가를 여러 번 클릭하세요

컨트롤러

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

위 내용은 $http를 사용하여 AngularJS에서 MongoLab 데이터 테이블을 추가, 삭제, 수정 및 쿼리하는 방법에 대해 편집자가 공유한 지식입니다. 모든 사람에게 도움이 되기를 바랍니다.