Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:16:40
original
1099 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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!