Trois façons d'obtenir des sources de données dans AngularJS-js tutoriel-php.cn

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

不言

Libérer： 2018-07-02 15:03:23

original

1711 Les gens l'ont consulté

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>

Copier après la connexion

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>

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

Copier après la connexion

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

Copier après la connexion

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!