Multiple Ways to obtain AngularJS data sources _ AngularJS-js tutorial

There are many ways to obtain data sources in AngularJS. This article provides you with several ways to obtain data sources. If you are interested in angularjs's knowledge of how to obtain data sources, please join us. 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}];})
{{todo.item}}
 

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;}) 
{{todo.item}}
 

It seems better to write in html as follows:

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:

{{todo.item}}
 

■ 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.