Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJS

Adrian
September 02, 2013

 AngularJS

AngularJS Vortrag vom Webentwickler-Paderborn Treffen

Adrian

September 02, 2013
Tweet

Other Decks in Programming

Transcript

  1. Was ist AngularJS • Open-Source JS-Framework von Google • Clientseitiges

    MVC-Framework für Single- Page- Apps • Deklarativ anstatt Imperativ • 29kb, keine Abhängigkeiten
  2. Warum AngularJS • Bidirektionales (Two-Way) Data-Binding zwischen HTML-View und JS-Model

    • 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,..
  3. View • View ist am Anfang durch ein Template repräsentiert

    • 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>
  4. Model ($scope) • Model ist single-source-of-truth • Vermittlungsschicht zwischen View

    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)
  5. Direktiven • erweitern HTML Vokabular in einer deklarativen Form •

    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
  6. Controller • Der Code hinter einer View • Erstellt das

    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'; }
  7. Service, Factory, Provider, DI • Angular Services sind Singletons •

    Auslagern von Funktionalität • Rest / Ajax / Websocket -Service • Shared Models • Mit Dependency Injection kann der Service in jedem Controller/Direktive/Service wiederverwendet werden