Maison >interface Web >js tutoriel >Trois façons d'obtenir des sources de données dans AngularJS_AngularJS

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

WBOYoriginal: 2016-05-16 15:16:401150parcourir

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>

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>

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

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

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

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

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>

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

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Divers codes d'effets de texte et d'image défilants en boucle JQuery_jqueryArticle suivant：Divers codes d'effets de texte et d'image défilants en boucle JQuery_jquery

Articles Liés

Voir plus