Ringkasan pelbagai cara untuk mendapatkan sumber data AngularJS

Ringkasan pelbagai cara untuk mendapatkan sumber data AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:16:36

asal

1129 orang telah melayarinya

Pengenalan kepada AngularJS

AngularJS ialah rangka kerja skrip MVC bahagian hadapan sumber terbuka yang dimulakan oleh Google Ia sesuai untuk kedua-dua aplikasi WEB biasa dan SPA (aplikasi halaman tunggal, semua operasi pengguna diselesaikan pada satu halaman). Berbeza daripada kedudukan Dojo, yang juga merupakan rangka kerja MVC, AngularJS lebih ringan dalam fungsi Berbanding dengan jQuery, AngularJS menjimatkan banyak kerja pengikatan mekanikal. AngularJS ialah pilihan yang sangat baik untuk beberapa aplikasi WEB bukan peringkat perusahaan yang memerlukan kelajuan pembangunan tinggi dan tidak memerlukan modul berfungsi yang terlalu kaya. Bahagian yang paling kompleks dan berkuasa AngularJS ialah mekanisme pengikatan datanya Mekanisme ini membantu kami menumpukan lebih baik pada penubuhan model dan penghantaran data, daripada melaksanakan operasi peringkat rendah pada DOM yang mendasari.

Dalam AngularJS, anda boleh mendapatkan sumber data daripada $rootScope, atau anda boleh merangkum logik untuk mendapatkan data dalam perkhidmatan, dan kemudian menyuntiknya ke dalam fungsi app.run, atau menyuntiknya ke dalam pengawal. Artikel ini akan menyusun beberapa cara untuk mendapatkan data.

■ Sumber data diletakkan dalam $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>

Salin selepas log masuk

Di atas, sumber data diletakkan dalam medan dalam $rootScope, yang boleh ditulis semula dengan mudah.

■ Letakkan sumber data dalam perkhidmatan dan masukkan servie ke dalam fungsi run

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>

Salin selepas log masuk

Nampaknya lebih baik untuk menulisnya seperti ini dalam html:

<input type="submit" ng-click=""TodoService.todos.addodo(newTodo) />

Salin selepas log masuk

Tambah kaedah dalam perkhidmatan:

app.service("TodoService", function(){
this.todos = [
{item:"",done:true},
{item:"",done:false}
];
this.addTodo = fucntion(newTodo){
this.todos.push({item:newTodo, done:false})
}
})

Salin selepas log masuk

■ Letakkan sumber data dalam perkhidmatan dan masukkan servie ke dalam pengawal

app.controller("TodoCtrl", function($scope, TodoService){
this.TodoService = TodoServce;
})

Salin selepas log masuk

Dalam html yang sepadan:

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

Salin selepas log masuk

■ Letakkan sumber data dalam perkhidmatan, suntikan servie ke dalam pengawal dan berinteraksi dengan pelayan

Dalam projek sebenar, perkhidmatan juga perlu berinteraksi dengan pelayan.

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;
})

Salin selepas log masuk

Di atas adalah ringkasan pelbagai cara untuk mendapatkan sumber data AngularJS yang dikongsi oleh editor saya harap ia akan membantu semua orang.