AngularJS 簡介
AngularJS 是由 Google 發起的一款開源的前端 MVC 指令碼架構，既適合做普通 WEB 應用也可以做 SPA（單頁面應用，所有的使用者操作都在一個頁面中完成）。與同為 MVC 架構的 Dojo 的定位不同，AngularJS 在功能上更加輕量，而相比於 jQuery，AngularJS 又幫您省去了許多機械的綁定工作。在一些對開發速度要求高，功能模組不需要太豐富的非企業級 WEB 應用上，AngularJS 是一個非常好的選擇。AngularJS 最為複雜同時也是最強大的部分就是它的資料繫結機制，這個機制協助我們能更好的將注意力集中在資料的模型建立和傳遞上，而不是對底層的 DOM 進行低級的操作。
在AngularJS中，可以從$rootScope中擷取資料來源，也可以把擷取資料的邏輯封裝在service中，然後注入到app.run函數中，或者注入到controller中。本篇就來整理擷取資料的幾種方式。
■ 資料來源放在$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中的某個欄位中，很容易被重寫。
■ 資料來源放在service中,把servie注入到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>
在html中似乎這樣寫比較好：
<input type="submit" ng-click=""TodoService.todos.addodo(newTodo) />
在service中增加一個方法：
app.service("TodoService", function(){this.todos = [{item:"",done:true},{item:"",done:false}];this.addTodo = fucntion(newTodo){this.todos.push({item:newTodo, done:false})}})
■ 資料來源放在service中,把servie注入到controller中
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>
■ 資料來源放在service中,把servie注入到controller中，與服務端互動
在實際項目中，service還需要和服務端互動。
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資料來源的多種擷取方式匯總，希望對大家有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
