Rumah > Artikel > hujung hadapan web > Ringkasan pelbagai cara untuk mendapatkan sumber data AngularJS_AngularJS

Ringkasan pelbagai cara untuk mendapatkan sumber data AngularJS_AngularJS

WBOYasal: 2016-05-16 15:16:361094semak imbas

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>

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>

Nampaknya lebih baik untuk menulisnya seperti ini dalam html:

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

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

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

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

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>

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

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript melaksanakan kemahiran pemuatan gambar aliran air terjun principle_javascriptArtikel seterusnya：JavaScript melaksanakan kemahiran pemuatan gambar aliran air terjun principle_javascript

Artikel berkaitan

Lihat lagi