Zur Natur einer Single Page Web Applikation gehört es, Daten im Webbrowser zu sortieren oder zu filtern. Das SPA Framework Angular.JS bietet zu diesem Zweck vordefinierte Filter. Zusätzlich können die Listenelement sehr einfach animiert werden, wenn ein Eintrag aus verschwindet. Dabei überrascht der gewählte Technologie Ansatz der Google Framework Entwickler durchaus.
Im ersten Schritt wird ein sehr einfach gehaltenes UI per HTML deklariert. Eine Liste von PKW in der gefiltert werden kann. Per Bootstrap ein wenig aufgehübscht. Um das Beispiel klein zu halten, wird auf den Angular typischen Controller verzichtet und ein Array im HTML Code per ng-init deklariert. Eigentlich ein MVx Affront.
Die Liste wird im View per ng-repeat durchlaufen. Dabei wird der Wert suchtext aus dem Input Feld, gebunden und als Filter verwendet.
Dieses Angular Beispiel stammt aus meinem Angular Training.
1: <bodyng-app="App"
2: ng-init="marken=['Audi', 'Bmw','Chevrolet', 'Chrylser',
'Fiat', 'Ford', 'Honda', 'Mercedes', 'Opel', 'Range Rover'];">
3: <divclass="well"style="margin-top: 30px;
margin-left: 30px; width: 150px; overflow: hidden;">
4: <divclass="input-group">
5: <inputtype="text"class="form-control"
placeholder="Filter"ng-model="suchtext">
6: <spanclass="input-group-btn">
7: <buttonclass="btn btn-default"type="button">
8: <spanclass="glyphicon glyphicon-search"></span>
9: </button>
10: </span>
11: </div>
12: 13: <ulclass="nav nav-pills nav-stacked">
14: <liclass="list-item"
ng-repeat="name in marken | filter:suchtext">
15: {{name}}16: </li>
17: </ul>
18: 19: </div>
Wenn der Benutzer einen Buchstaben tippt, soll die Ergebnismenge in der Liste geringer werden. Die verbleibenden Einträge werden dann per Animation zusammen geschoben, Dabei geht Angular.js seit der Version 1.2 einen neuen Weg (der so nebenbei nicht abwärtskompatibel ist).
Das Modul ngAnimate nutzt nun ausschließlich CSS Klassen, die einer bestimmten Konvention folgend deklariert werden müssen. Das ganze erinnert eher an Jquery Mobile als an Angular. Im vorigen HTML Beispiel wurde dafür die class liste-item definiert (Zeile 14). Dieser Name ist völlig frei wählbar.
Damit die Angular Animationen überhaupt nutzbar sind, braucht es zwei Dinge. Eine Referenz auf die JavaScript Datei angular-animate.js und eine Injection des Services ins Modul. Um es in der nicht Angular Sprache auszudrücken, der App muss die Animation Library bekannt gemacht werden,
1: angular.module('App', ['ngAnimate'])
2: Nun fehlen nur noch die CSS Klassen. Diese müssen der Namenskonvention folgend erstellt werden. Prefix ist der Name des CSS list-item aus Zeile 14. Gefolgt von der Funktion wie ng-leave oder ng-enter. Je nachdem welches Angular gebundes DOM Element animiert werden soll, stehen unterschiedliche Animationen bereit. Hier eben leave, enter und auch noch move
1: .list-item.ng-enter, 2: .list-item.ng-leave { 3: -webkit-transition: all linear 0.5s; 4: transition: all linear 0.5s; 5: } 6: 7: .list-item.ng-leave.ng-leave-active, 8: .list-item.ng-enter { 9: opacity: 0; 10: max-height: 0; 11: } 12: 13: .list-item.ng-leave, 14: .list-item.ng-enter.ng-enter-active { 15: opacity: 1; 16: max-height: 30px; 17: }Damit ist die Aufgabe auch schon erledigt. Positiv daran ist, das nachträglich durch den Designer Animationen hinzugefügt werden können. Allerdings ist der Lösungsweg wenig intuitiv, selbst für den Angular Experten. Wenig begeistert bin ich von dem Design Bruch zu älteren Versionen. So findet man häufig nicht funktionierende Beispiele in diversen Blog Einträgen.