AngularJS 데이터 소스를 얻는 다양한 방법 요약_AngularJS
- WBOY원래의
- 2016-05-16 15:16:361116검색
AngularJS 소개
AngularJS는 Google에서 시작한 오픈 소스 프런트엔드 MVC 스크립트 프레임워크로 일반 WEB 애플리케이션과 SPA(단일 페이지 애플리케이션, 모든 사용자 작업이 한 페이지에서 완료됨)에 모두 적합합니다. MVC 프레임워크이기도 한 Dojo의 위치 지정과 달리 AngularJS는 jQuery에 비해 기능이 더 가볍습니다. AngularJS는 기계적 바인딩 작업을 많이 줄여줍니다. AngularJS는 높은 개발 속도가 필요하고 너무 풍부한 기능 모듈이 필요하지 않은 일부 비엔터프라이즈 수준 WEB 애플리케이션에 매우 좋은 선택입니다. AngularJS의 가장 복잡하고 강력한 부분은 데이터 바인딩 메커니즘입니다. 이 메커니즘은 기본 DOM에서 하위 수준 작업을 수행하는 대신 모델 설정 및 데이터 전달에 더 집중할 수 있도록 도와줍니다.
AngularJS에서는 $rootScope에서 데이터 소스를 얻을 수도 있고, 서비스에서 데이터를 얻는 로직을 캡슐화한 후 app.run 함수에 주입하거나 컨트롤러에 주입할 수도 있습니다. 이 기사에서는 데이터를 얻는 여러 가지 방법을 정리합니다.
■ 데이터 소스는 $rootScope
에 위치합니다.
var app = angular.module("app",[]);
app.run(function($rootScope){
$rootScope.todos = [
{item:"",done:true},
{item:"",done:false}
];
})
<div ng-repeat="todo in todos">
{{todo.item}}
</div>
<form>
<input type="text" ng-model="newTodo" />
<input type="submit" ng-click=""todos.push({item:newTodo, done:false}) />
</form>
위에서 데이터 소스는 쉽게 다시 작성할 수 있는 $rootScope의 필드에 배치됩니다.
■ 데이터 소스를 서비스에 배치하고 서비스를 실행 기능에 삽입
app.service("TodoService", function(){
this.todos = [
{item:"",done:true},
{item:"",done:false}
];
})
app.run(function($rootScope, TodoService){
$rootScope.TodoService = TodoService;
})
<div ng-repeat="todo in TodoService.todos">
{{todo.item}}
</div>
<form>
<input type="text" ng-model="newTodo" />
<input type="submit" ng-click=""TodoService.todos.push({item:newTodo, done:false}) />
</form>
html로 이렇게 작성하는 것이 좋을 것 같습니다.
<input type="submit" ng-click=""TodoService.todos.addodo(newTodo) />
서비스 방법 추가:
app.service("TodoService", function(){
this.todos = [
{item:"",done:true},
{item:"",done:false}
];
this.addTodo = fucntion(newTodo){
this.todos.push({item:newTodo, done:false})
}
})
■ 데이터 소스를 서비스에 배치하고 서비스를 컨트롤러에 삽입
app.controller("TodoCtrl", function($scope, TodoService){
this.TodoService = TodoServce;
})
해당 HTML에서:
<body ng-app="app" ng-controller="TodoCtrl as todoCtrl">
<div ng-repeat="todo in todoCtrl.TodoService.todos">
{{todo.item}}
</div>
</body>
<form>
<input type="text" ng-model="newTodo" />
<input type="submit" ng-click="todoCtrl.TodoService.addTodo(newTodo)"/>
</form>
■ 데이터 소스를 서비스에 배치하고, 서비스를 컨트롤러에 삽입하고, 서버와 상호 작용합니다.
실제 프로젝트에서는 서비스도 서버와 상호 작용해야 합니다.
var app = angular.module("app",[]);
app.service("TodoService", function($q, $timeout){
this.getTodos = function(){
var d = $q.defer();
//模拟一个请求
$timeout(function(){
d.resolve([
{item:"", done:false},
...
])
},3000);
return d.promise;
}
this.addTodo = function(item){
this.todos.push({item:item, done:false});
}
})
app.controller("TodoCtrl", function(TodoService){
var todoCtrl = this;
TodoService.getTodos().then(function(result){
todoCtrl.todos = result;
})
todoCtrl.addTodo = TodoService.addTodo;
})
위는 편집자가 공유한 AngularJS 데이터 소스를 얻는 다양한 방법을 요약한 내용입니다. 모든 분들께 도움이 되기를 바랍니다.