AngularJS lernen – Teil 3 – AngularJS Models

Leider liegt der zweite Teil des AngularJS Tutorials jetzt wieder eine Weile zurück. Der Sommer kam dieses Jahr irgendwie ganz unerwartet dazwischen. Jetzt möchte ich gerne mit dem Tutorial fortfahren.

In zweiten Teil meines Tutorials bin ich auf das MVC Design Pattern eingegangen ohne dabei das M, also die Models ausführlich zu beschreiben. Das hole ich im dritten Teil dafür nach.

Mit Model(M) beschreibt man den Teil der Anwendung, der die Daten „besorgt“. In Javascript werden die Daten in der Regel im JSON Format geliefert. Die Daten sehen dann wie folgt aus:

{
  "obsts" : [{
    "id": "1",
    "name": "Erdbeeren",
    "kalorien": "32"
  },{
    "id": "2",
    "name": "Bananen",
    "kalorien": "107"
  },{
    "id": "3",
    "name": "Äpfel",
    "kalorien": "71"
  }]
}

Im folgenden Beispiel zeige ich die Verwendung des Models innerhalb einer Anwendung. Die Anwendung rechnet gegessene Lebensmittel zusammen und ermittelt den Kalorienwert.

Für den Test deklariere ich nicht die gesamte Seite als App, sondern nur einen Teil davon, genauer gesagt, ein DIV. Im weiteren Verlauf nenne ich diesen Teil nur noch View.

    

        {{obst.name}}: 
    
    

        Kalorien: 
    

AngularJS hält sich an das sogenannte Two-Way Data Binding. Das bedeutet, dass Änderungen in der View sich direkt im Model durchschlagen und umgekehrt. Das eröffnet natürlich ganz neue Interaktionsmöglichkeiten.

Die View ist soweit fertig. Was noch fehlt ist der Javascript bzw. AngularJS Teil mit dem Controller.

var kalorienzaehlerApp = angular.module('kalorienzaehlerApp', []);

kalorienzaehlerApp.controller('kalorienzaehlerController', ['$scope', function($scope){
    $scope.obsts = [
        {id: 1, name: 'Erdbeeren', anzahl:0, kalorien: 32},
        {id: 2, name: 'Bananen', anzahl:0, kalorien: 107},
        {id: 3, name: 'Äpfel', anzahl:0, kalorien: 71},
    ];

    $scope.kalorien = function() {
        var kalorien = 0;
        angular.forEach($scope.obsts, function(value, key){
            kalorien = kalorien + (value.anzahl * value.kalorien);
        });
        return kalorien;
    }
}]);

Durch die Angabe von ng-repeat=“obst in obsts“ in der View werden alle Einträge in $scope.obsts in die View gerendert.

Mit dem Ausfüllen der Formularfelder wird automatisch die gesamte Kalorienanzahl berechnet. Dies geschieht in der $scope.kalorien = function(). Hier werden alle Obstsorten durchlaufen und es wird alles zusammengerechnet.

Damit bin ich am Ende des dritten Teils meines AngularJS Tutorials. Es macht einfach Spaß mit AngularJS zu entwickeln.