The superheroic framework

Martin Hilscher / mh@xinitrc.de / @xinitrc

AngularJS

  • Web-Framework
  • Single Page App
  • Model-View-Controll(er) Konzept
  • Nutzt (wenn möglich) HTML5 Feature
  • Google
  • Aktuelle Versionen
    • monochromatic-rainbow (stable 1.0.7)
    • triangle-squarification (unstable 1.1.5)

Legende

  • Miško Hevery
  • 20% Projekt
  • Rewrite Google Foundation
    • 17 000 LOC → 1 500 LOC
    • In 3 Wochen

Declarative Programming

… don't tell me HOW to do it

Declarative Programming (detour)

  • Problembeschreibung im Vordergrund
  • Lösungsweg automatisch generiert
  • Beispiele
    • Funktional Programmiersprachen (Lisp, ML, …)
    • Logik Programmiersprachen (Prolog, …)
    • Transformationssprachen (XSLT, …)
    • Abfragesprachen (SQL, …)
    • … ursrpüngliche Idee hinter Javascript

Erstes Beispiel

  • Weiß
  • Rot
  • Grün
  • Blau
                        
<html ng-app>
  ⋮
  
    
    
  • White
    • 
    
  • Red
    • 
    
  • Green
    • 
    
  • Blue
    • 
  

  

  ⋮
</html>

Zweites Beispiel

Hallo {{tb1}}

<html ng-app>
  ⋮
  <input type="text" ng-model="tb"/>
  <div>Hallo {{tb}}</div>
  ⋮
</html>

Zweites Beispiel

Hallo {{tb2}} 

<html ng-app>
  ⋮
  <input type="text" ng-model="tb"/>
  <div ng-show="tb.length">Hallo {{tb}}</div>
  ⋮
</html>

Controllers

… couldn't remain all that easy

Aufbau einer AngularJS-App

  • Eine angularjs.module (ng-app)
  • Ein Controller pro funktionaler Einheit
    • Menu
    • Eingabemaske
    • View
    • …
  • (Benutzerdefinierter Directives)
  • Datenhaltung im Hintergrund

Drittes Beispiel

{{remaining()}} of {{todos.length}} Aufgaben sind noch offen
  • {{todo.text}}
Abgeschlossene löschen

Dependency Injection

… infuse magic

Dependency Injection (detour)

  • Präzisierung von "Inversion of Control"
  • Abhängigkeiten extern gemanaged
  • Komponenten noch stärker entkoppelt
  • Üblicherweise statisch typisierten Sprachen
  • Erleichtert Test

DI in AngularJS

  • Stellt Komponenten zur Verfügung (z.B. $scope)
  • Matching von Name "$foo" auf "fooProvider"
  • Aufruf von fooProvider.$get(…)
  • Erzeugtes Objekt wird übergeben
  • Fallback für Minification (app.inject([…])

Einige Standard Services

  • $scope
  • $rootScope
  • $location
  • $route
  • $routeParams
  • $resource
  • $log
  • $parse
  • $http
  • $q

DI-Hilfsmethoden für eigene Services

constantKonstanten
valueVariablen
servicefür Singletons
decoratorDecorator für Services
factoryfür Factories
(provider)Die generische Methode

Directives

… say it in your own words

Demo

Zweites Beispiel on Steroids

Hallo 

<html ng-app>
  ⋮
  <input type="text" ng-model="tb"/>
  <div ng-show="tb.length">Hallo
  <span ng-model="tb" contenteditable></span>
  ⋮
</html>

Zweites Beispiel on Steroids

Hallo 
                            
.directive('contenteditable', function () {
  return {
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
      elm.bind('blur', function() {
        scope.$apply(function() {
          ctrl.$setViewValue(elm.html());
        });
      });
      ctrl.$render = function() {
        elm.html(ctrl.$viewValue);
      };
      ctrl.$render();
    }
  };
});

Views

… the tale of building a single page app

Aufbau der Hauptkomponente

  • Ein ng-view pro ng-app (mehr geht nicht)
  • Controller abhängig von Route
  • Route kann parametrisiert werden
  • Full HTML5 Bells'n'whistles
    • History Push API
    • …

Demo

Animations

… frosting on the cake

Animierbare Directives

  • ng-show/ng-hide
  • ng-repeat
  • ng-view
  • ng-switch
  • ng-include

Ressourcen

… gimme some more

There is more

  • $scope Hierarchie
  • $index, $event, $log
  • Transclusion
  • Isolierte scopes
  • Filter
  • Kommunikation zwischen Controllern
  • Promises
  • Andwendungen mit mehreren Controllern
  • …

Web, Videos & Books

Danke

Martin Hilscher / mh@xinitrc.de / @xinitrc