How to obtain data sources in three AngularJS Methods _ AngularJS-js tutorial

This article mainly introduces three ways to obtain data sources in AngularJS. For more information, see get data sources from $ rootScope in AngularJS, you can also encapsulate the data retrieval logic in the service and inject it to the app. run function, or inject it into 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 the method for obtaining data sources in AngularJS, and I hope it will be helpful for your learning.