• Code-Reduktion durch Automatisierung von Standardaufgaben • HTML-Vokabular wird mit Direktiven erweitert (eigene Elemente, Attribute) • Angular-Models sind einfache JS-Objekte, müssen nicht von bestimmten Typ sein • Viele Features: Auto Form Validation, Routing,..
• Mit Hilfe eines Models wird es in den DOM gerendert <html ng-app="app"> <head>...</head> <body> <input ng-model="name"> <p>{{name}}</p> </body> </html>
und Controller • Variablen müssen nicht unbedingt initialisiert werden • Bietet einen Ausführungskontext für Expressions • Scopes werden geschachtelt, anhand der vorgegebenen Controller-Schachtelung im HTML • Angular nutzt Dirty-Checking (anstelle von getter/setter)
werden getriggert durch Custom HTML-Attribute (oder Elementnamen, Klassen, Kommentaren) • beschreiben ein Verhalten oder eine DOM Transformation (UI-Logik) • Angular bringt direkt einige Direktiven mit • ng-model, ng-repeat, ng-controller, ng-click, ng- change, ng-show, ng-if
Model und stellt dieses der View zur Verfügung (per Scope) • wird mit Direktive ng-controller="controllerName" eingebunden • Controller ist eine normale JS-Funktion die einen eigenen scope definiert function MainController($scope) { $scope.name = 'AngularJS'; }
Auslagern von Funktionalität • Rest / Ajax / Websocket -Service • Shared Models • Mit Dependency Injection kann der Service in jedem Controller/Direktive/Service wiederverwendet werden