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

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

不言original: 2018-07-02 15:03:231720parcourir

Cet article présente principalement trois façons d'obtenir des sources de données dans AngularJS. Les amis dans le besoin peuvent s'y référer

Dans AngularJS, vous pouvez obtenir la source de données depuis $rootScope, ou vous pouvez obtenir les données depuis The. la logique est encapsulée dans le service puis injectée dans la fonction app.run ou dans le contrôleur. Cet article présentera plusieurs façons d’obtenir des données.

■ Placez la source de données dans $rootScope

var app = angular.module("app",[]);

app.run(function($rootScope){
  $rootScope.todos = [
    {item:"",done:true},
    {item:"",done:false}
  ];
})


<p ng-repeat="todo in todos">
  {{todo.item}}
</p>

<form>
  <input type="text" ng-model="newTodo" />
  <input type="submit" ng-click=""todos.push({item:newTodo, done:false}) />
</form>

Ci-dessus, placez la source de données Dans un champ de $rootScope, il peut être facilement remplacé.

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

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

app.run(function($rootScope, TodoService){
  $rootScope.TodoService = TodoService;
}) 

<p ng-repeat="todo in TodoService.todos">
  {{todo.item}}
</p>

<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">
  <p ng-repeat="todo in todoCtrl.TodoService.todos">
    {{todo.item}}
  </p>
</body>

<form>
  <input type="text" ng-model="newTodo" />
  <input type="submit" ng-click="todoCtrl.TodoService.addTodo(newTodo)"/>
</form>

Mettre la source de données dans le service et injecter le service Accédez au 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 l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, s'il vous plaît. faites attention au site Web PHP chinois !

Recommandations associées :

Comment implémenter (sélectionner tout) le bouton de sélection multiple dans js

HMR angulaire (Hot Remplacement du module) méthode d'implémentation de la fonction

À propos de $apply et utilisation optimisée dans Angularjs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Comment implémenter (sélectionner tout) le bouton de sélection multiple dans jsArticle suivant：Comment implémenter (sélectionner tout) le bouton de sélection multiple dans js

Articles Liés

Voir plus