Home > Developer > JavaScript
Multiple methods of obtaining AngularJS data sources are summarized, and angularjs obtains the summary.
AngularJS Introduction
AngularJS is an open-source front-end MVC script framework initiated by Google. It is suitable for both common WEB applications and SPA (single page applications, all user operations are completed on one page ). Unlike the positioning of Dojo in the same MVC Framework, AngularJS is more lightweight in functionality. Compared with jQuery, AngularJS saves you a lot of mechanical binding work. AngularJS is a good choice for non-enterprise WEB applications that require high development speed and no rich functional modules. AngularJS's data binding mechanism is the most complex and powerful part. This mechanism helps us to focus more on Data Model Establishment and transmission, instead of performing low-level operations on the underlying DOM.
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 a summary of the AngularJS data sources shared by xiaobian. I hope it will be helpful to you.
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
