Tags:
create new tag
, view all tags

Angular JS

Angular lernen

Konventionen

  • Namen für Controller sind in CamelCaseCtrl
  • Namen für Controller enden auf Ctrl
  • Style Guide und Best Practices auf GitHub
  • CSS-Files gehören in den <head> Block (um mehrfaches Rendering zu vermeiden)
  • JavaScript-Files gehören hingegen ans Ende, weil sie paralleles Laden der einzelnen Seitenteile blockieren

Model

Das Model liefert die Daten und ist immer Ausgangslage für jede Anzeige. Wenn beispielsweise ein Textfeld Daten im Model ändert, wird zuerst das Model aktualisiert und anschliessend die Anzeige geändert:

  <input type="text" ng-model="message">
  <p>{{ message }}</p>

Im obigen Beispiel werden die Daten von Angular direkt in eine Variable geschrieben und anschliessend wieder ausgegeben. Das Model kann auch direkt im Javascript-Code definiert werden. Die Daten werden in der JSON Notation abgelegt:

<script>
    var myapp = angular.module('meineGruppenApp', []);

    // Model: meine Daten
    myapp.value( "MODEL",
        [
            {
                "grid": "111",
                "name": "group1",
                "description" : "Dies ist Admin-Gruppe eins",
                "projects": [
                    { "projid": "11", "name": "projekt eins-eins" },
                    { "projid": "12", "name": "projekt eins-zwei" }
                ],
                "prefix" : "uno"
            },
            {
                "grid": "222",
                "name": "group2",
                "description" : "Dies ist Admin-Gruppe zwei",
                "projects": [
                    { "projid": "21", "name": "projekt zwei-eins" },
                    { "projid": "22", "name": "projekt zwei-zwei" }
                ],
                "prefix" : "due"
            }
        ]
    );

    // Controller: Welche Daten werden welcher View zugewiesen
    myapp.controller('Projekte', function($scope, MODEL) {
        $scope.groups = MODEL;
        $scope.chosen_group = $scope.groups[0];
    } );


</script>

Binding Stolpersteine

<select>

Angenommen, man möchte eine Dropdown-Liste aller Projekte ausgeben, mit der grid als Value und name als Anzeige. Man muss Angular mit ng-options mitteilen, welche Werte man angezeigt haben möchte und wie. Im Internet findet man folgendes Beispiel:

    <select
        ng-options="group.grid as group.name for group in groups"
        ng-model="chosen_group"
    >
    </select>

Funktioniert zwar (abgesehen von der etwas schlechten Lesbarkeit), hat allerdings den Nachteil, dass nun eine Dropdown-Liste angezeigt wird mit einem leeren ersten Eintrag. Ich möchte aber, dass einfach das erste Element angezeigt wird. Mit track by funktioniert das interessanterweise ohne leeren ersten Eintrag:

    <select
        ng-options="group.name for group in groups track by group.grid"
        ng-model="chosen_group"
    >
    </select>

for group in groups nimmt jedes Element aus dem Array groups und weist es der Variable group zu.

Topic revision: r3 - 2015-06-02 - vermeul
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback