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數據源的多種獲取方式匯總，希望對大家有所幫助。
新聞熱點
疑難解答
