Heim > Artikel > Web-Frontend > Zusammenfassung verschiedener Möglichkeiten zum Abrufen von AngularJS-Datenquellen_AngularJS

Zusammenfassung verschiedener Möglichkeiten zum Abrufen von AngularJS-Datenquellen_AngularJS

WBOYOriginal: 2016-05-16 15:16:361100Durchsuche

Einführung in AngularJS

AngularJS ist ein von Google initiiertes Open-Source-Front-End-MVC-Skript-Framework. Es eignet sich sowohl für normale WEB-Anwendungen als auch für SPA (Einzelseitenanwendung, alle Benutzervorgänge werden auf einer Seite ausgeführt). Im Gegensatz zur Positionierung von Dojo, das ebenfalls ein MVC-Framework ist, ist die Funktion von AngularJS leichter. Im Vergleich zu jQuery erspart Ihnen AngularJS viel mechanische Bindungsarbeit. AngularJS ist eine sehr gute Wahl für einige WEB-Anwendungen außerhalb des Unternehmens, die eine hohe Entwicklungsgeschwindigkeit erfordern und keine zu umfangreichen Funktionsmodule benötigen. Der komplexeste und leistungsstärkste Teil von AngularJS ist sein Datenbindungsmechanismus. Dieser Mechanismus hilft uns, uns besser auf die Modellerstellung und Bereitstellung von Daten zu konzentrieren, anstatt Operationen auf niedriger Ebene am zugrunde liegenden DOM durchzuführen.

In AngularJS können Sie die Datenquelle von $rootScope abrufen oder die Logik zum Abrufen von Daten im Dienst kapseln und sie dann in die Funktion app.run oder in den Controller einfügen. In diesem Artikel werden verschiedene Möglichkeiten zum Abrufen von Daten erläutert.

■ Die Datenquelle wird in $rootScope
platziert

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>

Oben ist die Datenquelle in einem Feld in $rootScope platziert, das leicht umgeschrieben werden kann.

■ Platzieren Sie die Datenquelle im Dienst und fügen Sie den Dienst in die Ausführungsfunktion ein

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>

Es scheint besser, es so in HTML zu schreiben:

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

Fügen Sie eine Methode im Dienst hinzu:

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

■ Platzieren Sie die Datenquelle im Dienst und injizieren Sie den Dienst in den Controller

app.controller("TodoCtrl", function($scope, TodoService){
this.TodoService = TodoServce;
})

Im entsprechenden HTML:

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

■ Platzieren Sie die Datenquelle im Dienst, injizieren Sie den Dienst in den Controller und interagieren Sie mit dem Server

In tatsächlichen Projekten muss der Dienst auch mit dem Server interagieren.

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

Das Obige ist eine Zusammenfassung der verschiedenen Möglichkeiten, AngularJS-Datenquellen zu erhalten, die vom Herausgeber geteilt wurden. Ich hoffe, dass es für alle hilfreich ist.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript implementiert das Prinzip des Wasserfallflusses zum Laden von Bildern._Javascript-FähigkeitenNächster Artikel：JavaScript implementiert das Prinzip des Wasserfallflusses zum Laden von Bildern._Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen