Home > Developer > JavaScript
Obtain data sources from three AngularJS methods and three angularjs methods.
In AngularJS, you can obtain the data source from $ rootScope, encapsulate the data retrieval logic in the service, inject it into the app. run function, or inject it into the controller. This article describes several methods to obtain data.
■ Store the data source in $ 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>
Put the data source in a field in $ rootScope, which is easily overwritten.
■ Store the data source in the service and inject servie into the run function.
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>
It seems better to write in html as follows:
<input type="submit" ng-click=""TodoService.todos.addodo(newTodo) />
Add a method to the service:
app.service("TodoService", function(){ this.todos = [ {item:"",done:true}, {item:"",done:false} ]; this.addTodo = fucntion(newTodo){ this.todos.push({item:newTodo, done:false}) } })
■ Store the data source in the service and inject servie into the controller.
app.controller("TodoCtrl", function($scope, TodoService){ this.TodoService = TodoServce;})
In the corresponding 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>
■ Place the data source in the service, inject servie into the controller, and interact with the server
In actual projects, the service also needs to interact with the server.
Var app = angular. module ("app", []); app. service ("TodoService", function ($ q, $ timeout) {this. getTodos = function () {var d = $ q. defer (); // simulate a request $ 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 ;})
The above is the method for obtaining data sources in AngularJS, and I hope it will be helpful for your learning.
Articles you may be interested in: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
