Trois façons d'obtenir des sources de données dans AngularJS

Trois façons d'obtenir des sources de données dans AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:16:40

original

1145 Les gens l'ont consulté

Dans AngularJS, vous pouvez obtenir la source de données à partir de $rootScope, ou vous pouvez encapsuler la logique d'obtention des données en service, puis l'injecter dans la fonction app.run, ou l'injecter dans le contrôleur. Cet article présentera plusieurs façons d’obtenir des données.

■ La source de données est placée dans $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>

Copier après la connexion

Ci-dessus, la source de données est placée dans un champ de $rootScope, qui peut être facilement réécrit.

weight Placer la source de données dans le service et injecter le service dans la fonction run

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>

Copier après la connexion

Il semble préférable de l'écrire ainsi en html :

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

Copier après la connexion

Ajouter une méthode en service :

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

Copier après la connexion

■ Placer la source de données dans le service et injecter le servie dans le contrôleur

app.controller("TodoCtrl", function($scope, TodoService){
  this.TodoService = TodoServce;
})

Copier après la connexion

Dans le html correspondant :

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

Copier après la connexion

■ Placez la source de données dans le service, injectez le service dans le contrôleur et interagissez avec le serveur

Dans les projets réels, le service doit également interagir avec le serveur.

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;
})

Copier après la connexion

Ce qui précède est la méthode d'obtention de sources de données dans AngularJS. J'espère que cela sera utile à l'apprentissage de chacun.