Résumé des différentes manières d'obtenir des sources de données AngularJS

Résumé des différentes manières d'obtenir des sources de données AngularJS_AngularJS

WBOY

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

original

1129 Les gens l'ont consulté

Introduction à AngularJS

AngularJS est un framework de script MVC front-end open source initié par Google. Il convient aussi bien aux applications WEB ordinaires qu'aux SPA (application monopage, toutes les opérations utilisateur sont effectuées sur une seule page). Différent du positionnement de Dojo, qui est également un framework MVC, AngularJS est plus léger en fonction de jQuery, AngularJS vous évite beaucoup de travail de liaison mécanique. AngularJS est un très bon choix pour certaines applications WEB non professionnelles qui nécessitent une vitesse de développement élevée et n'ont pas besoin de modules fonctionnels trop riches. La partie la plus complexe et la plus puissante d'AngularJS est son mécanisme de liaison de données. Ce mécanisme nous aide à mieux nous concentrer sur l'établissement du modèle et la livraison des données, plutôt que sur l'exécution d'opérations de bas niveau sur le DOM sous-jacent.

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.

■ 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;
}) 
<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 un résumé des différentes manières d'obtenir les sources de données AngularJS partagées par l'éditeur. J'espère que cela sera utile à tout le monde.