Home >Web Front-end >JS Tutorial >Three ways to obtain data sources in AngularJS_AngularJS

Three ways to obtain data sources in AngularJS_AngularJS

WBOYOriginal: 2016-05-16 15:16:401166browse

In AngularJS, you can obtain the data source from $rootScope, or you can encapsulate the logic of obtaining data in service, and then inject it into the app.run function, or inject it into the controller. This article will sort out several ways to obtain data.

■ The data source is placed 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>

Above, the data source is placed in a field in $rootScope, which can be easily rewritten.

■ Place the data source in the service and inject the 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 it like this in html:

<input type="submit" ng-click=""TodoService.todos.addodo(newTodo) />

Add a method in service:

app.service("TodoService", function(){
  this.todos = [
    {item:"",done:true},
    {item:"",done:false}
  ];
  
  this.addTodo = fucntion(newTodo){
    this.todos.push({item:newTodo, done:false})
  }
   
})

■ Place the data source in the service and inject the 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 the servie into the controller, and interact with the server

In actual projects, 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();
    
    //模拟一个请求
    $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 of obtaining data sources in AngularJS. I hope it will be helpful to everyone's learning.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Various JQuery loop scrolling text and picture effect codes_jqueryNext article：Various JQuery loop scrolling text and picture effect codes_jquery

See more

Three ways to obtain data sources in AngularJS_AngularJS

Related articles