AngularJS

Sebastian Mancke

Creative Commons BY-SA 3.0

AngularJS - Einordnung


Kernkonzepte

  • Umfassendes MVC Framework
  • Ausgerichtet auf Single Page Apps
  • Browser-Seitiges Templating
  • Designed auf Testbarkeit

Abgrenzung

  • zu JQuery: Deklarativ, wenig Hacking im DOM
  • zu Knockout.JS: Viel umfassender

AngularJS


Key concepts

  • Comprehensive MVC framework
  • Targeting single page apps
  • In browser templating
  • Designed for testability

Segregation

  • to JQuery: Declarative, without hacking in the DOM
  • to Knockout.JS: More comprehensive

Die Basics

Basics

Deklaration und Includes

Declaration and Includes


<html ng-app="presentation">
...
<script src="./lib/jquery.min.js"></script>
<script src="./lib/angular.min.js"></script>
<script>
var app = angular.module('presentation', []);
</script>

Einfache Bindings

Simple bindings

AngularJS ermöglicht ein Templating direkt im Browser.
AngularJS utilizes templating in the browser.

Demo: 

<h1 lang="de" style="display: none;">Einfache Bindings
  {{demo}}</h1>
<h1 lang="en">Simple bindings {{demo}}</h1>
<div lang="de" style="display: none;">AngularJS ermöglicht ein Templating direkt im
  Browser.</div>
<div lang="en">AngularJS utilizes templating in the browser.</div>
<p>Demo: {{demo}}</p>
<input class="form-control" type="text"
  ng-model="demo">

Bindings - weitere Beispiele

Bindings - further examples

AngularJS verfügt über eine Reihe praktischer Hilfsmittel für Bindings:
AngularJS has a lot of useful tools for the bindings:
ng-model, ng-if, ng-init 

<input type="checkbox" ng-model="state" ng-true-value="'enabled'"
  ng-false-value="'disabled'" ng-init="state='enabled'">
<p>State: {{state}}</p>
<select class="form-control" ng-model="state">
  <option value="enabled">enabled</option>
  <option value="disabled">disabled</option>
</select>
<h3 ng-if="state == 'enabled'">AngularJS is cool!</h3>

State: enabled

AngularJS is cool!

Bindings - classen und styles

Bindings - classes and styles

Für typische HTML-Aufgaben hat AngularJS passende Direktiven.
AngularJS has directives for all typical HTML styling work.

ng-class

<input type="checkbox" ng-model="everyThingOk" ng-init="everyThingOk=true"
 >
<span ng-class="{'alert-success':everyThingOk, 'alert-danger':!everyThingOk }"
  class="alert">This is the message</span>
This is the message

ng-style

<button class="btn" ng-click="myStyle={color:'red',
  'font-weight':'bold'}">red</button>
<button class="btn" ng-click="myStyle={'color':'blue'}">blue</button>
<span ng-style="myStyle">Sample text, myStyle={{myStyle}}</span>
Sample text, myStyle=

Controller

Logik ist in AngularJS in Controllern organisiert.

The logic is organized within controllers.

app.controller('BindingsCtrl1', function($scope) {
  console.log('init controller ..');
  $scope.answer = 42;
  $scope.anyFunction = function () {
    $scope.question = ' is the answer!';
  }});

42

<div ng-controller="BindingsCtrl1">
  <button type="button" class="btn" ng-click="anyFunction()">Click me</button>
  <h3>{{answer}}{{question}}</h3>
</div>

Formatter

Zur Formatierung von Werten gibt es Formater.

Formatters are used for displaying numbers and currencies.

app.controller('FormatterCtrl', function($scope) {
  $scope.number = 42;
  $scope.time = new Date();                
});
app.filter('custom', function() {
  return function(value) {
    return '-' + value +'.00 bli bla';
  }
})
<div>Number: {{number | number:4}}</div>
<div>Currency: {{number | currency}}</div>
<div>Custom: {{number | custom}}</div>
<div>Time: {{time | date:'medium'}}</div>
Number: 42,0000
Currency: 42,00 €
Custom: -42.00 bli bla
Time: 18.06.2025 05:53:33

Iteration über Daten

Iteration over data

Mit ng-repeat lassen sich einfach Tabellen und Listen aufbauen.

Tables can be created using ng-repeat.

app.controller('RepeatController', function($scope) {
  $scope.persons = [
    {first: 'Arthur', last: 'Dent'},
    {first: 'Zaphod', last: 'Beeblebrox'},
    {first: 'Marvin', last: 'robot'},
  ]});
<table ng-controller="RepeatController">
  <tr ng-repeat="person in persons">
    <td>{​{person.first}}</td> <td>{​{person.last}}</td>
  </tr>
</table>
Arthur Dent
Zaphod Beeblebrox
Marvin robot

Iteration - Filter + Sortierung

Iteration - filter + sorting

Filter und Sortierung lassen sich einfach einbauen.

Filtering and sorting is very easy.

<select class="form-control" ng-model="orderField">
  <option value="first">first</option>
  <option value="last">last</option>
</select>
<input class="form-control" type="text"
  ng-model="filterText">
<tr ng-repeat="person in persons | orderBy:orderField | filter: filterText">

Arthur Dent
Zaphod Beeblebrox
Marvin robot

Scopes

Was sind Scopes?

  • Scopes sind die AngularJS-Datenobjekte, die das Modell beinhalten.
  • Jeder Ausdruck wird im Kontext eines Scope ausgeführt.

Child Scopes

  • Die Scopes sind hierarchisch entlang des DOM geschachtelt.
  • Geschachtelte Scopes erben Properties des übergeordneten Scope.
  • Eigene Properties sind nach außen nicht sichtbar.

Isolierte Scopes

  • Erben keine Daten.
  • Können aber Properties über ein Mapping an Parent Scope binden.

Scopes

What are scopes?

  • Scopes are the AngularJS data objects holding the model.
  • Every function call is done in the context of a scope.

Child scopes

  • Scopes can be nested along the DOM's hierarchy.
  • Nested scopes inherit the properties of the parent scope.
  • The self defined properties are not visible outside.

Isolated Scopes

  • They do not inherit properties by default,
  • but they can bind properties of the parent scope through a mapping.

Änderungen überwachen

Observing changes

$scope.$watch()

Mit $watch() kann das Datenmodell überwacht werden.

The model can be observed by $watch().

Verwendung:
Usage:
$watch(watchExpression, [listener], [objectEquality]);

$scope.$watchCollection()

Beobachtung der Inhalte von Collections.

Observing the contents of collections.

Verwendung:
Usage:
$watchCollection(obj, listener); 
$scope.$watch('backlogItems', function(newValue, oldValue) {
    console.log('user has modified "$scope.backlogItems" ..');
    ..
}, true);

$scope.$apply()

Manipulationen am Datenmodell müssen immer im Kontext von AngularJS erfolgen. Sonst erfolgt kein Update der View.


Dies kann über $scope.$apply() erzwungen werden.


Häufigste Anwendung:
  • window.setTimeout()
  • Native DOM-Events
  • Einbindung vorhandener Komponenten

$scope.$apply()

Manipulation of the model has to take place in the call context of AngularJS. Otherwise no view updates are triggered.


This can be forced by $scope.$apply().


Most common for:
  • window.setTimeout()
  • Native DOM-Events
  • Integration of existing components

AngularJS Spielereien mit SVG

AngularJS with SVG

Nicht nur HTML lässt sich mit Bindings versehen!

AngularJS bindings are not limited to HTML!

<svg width="280" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle ng-attr-cx="{{circle.x}}" ng-attr-cy="{{circle.y}}"
  ng-attr-r="{{circle.r}}" style="stroke:#7D7D7D;fill:#EBEBEB"></circle>
  <line ng-attr-x1="{{circle.x}}" ng-attr-y1="{{circle.y}}" ng-attr-x2="{{sec.x}}"
  ng-attr-y2="{{sec.y}}" style="stroke:#E16969;stroke-width:1"></line>
  <line ng-attr-x1="{{circle.x}}" ng-attr-y1="{{circle.y}}" ng-attr-x2="{{min.x}}"
  ng-attr-y2="{{min.y}}" style="stroke:#E16969;stroke-width:5"></line>
  <line ng-attr-x1="{{circle.x}}" ng-attr-y1="{{circle.y}}" ng-attr-x2="{{hour.x}}"
  ng-attr-y2="{{hour.y}}" style="stroke:#E16969;stroke-width:5"></line>
</svg>
18.06.2025 05:53:33

SVG Spielereien mit AngularJS

SVG with AngularJS 

app.controller('SVGCtrl', function($scope) {
  var shift = 135;
  $scope.circle = { r:130, x: shift, y: shift };

  function update() {
    $scope.date = new Date();       

    var sec = $scope.date.getSeconds()  + $scope.date.getMilliseconds()/1000;
    var min = $scope.date.getMinutes() + $scope.date.getSeconds()/60;
    var h = $scope.date.getHours()%12 + $scope.date.getMinutes()/60;

    $scope.sec = { x: shift + 100 * Math.cos(sec/60 * Math.PI * 2 - Math.PI/2),
                   y: shift + 100 * Math.sin(sec/60 * Math.PI * 2 - Math.PI/2)};
    $scope.min = { x: shift + 100 * Math.cos(min/60 * Math.PI * 2 - Math.PI/2),
                   y: shift + 100 * Math.sin(min/60 * Math.PI * 2 - Math.PI/2)};
    $scope.hour = { x: shift + 40 * Math.cos(h/12 * Math.PI * 2 - Math.PI/2),
                    y: shift + 40* Math.sin(h/12 * Math.PI * 2 - Math.PI/2)};

    window.setTimeout(function() {$scope.$apply(update)}, 100);
  }       
  update();
});

Provider

Geteilte Daten oder zentrale Funktionalität der Controller werden in singleton Objekte ausgelagert.

Provider

  • Provider sind die allgemeinste Form
  • Können beim Start der App konfiguriert werden
  • Aufwändige Schreibweise
app.provider('helloProvider', function() {
  this.$get = function() {
    return {
      sayHello: function() {
        return "Hello, Provider!"
      }
    }
  }
});
Shared data can be externalized to singleton objects.

Provider

  • Providers are the most general form
  • They can be configured on startup
  • Complex syntax
app.provider('helloProvider', function() {
  this.$get = function() {
    return {
      sayHello: function() {
        return "Hello, Provider!"
      }
    }
  }
});

Factories, Services, ..

Einfachere Schreibweisen für Provider.
Simple notation for providers.

Factories

app.factory('helloFactory', function() {
  return {
    sayHello: function() {
      return "Hello, Factory!"; 
    }
  }});

Services

app.service('helloService', function() {
  this.sayHello = function() {
    return "Hello, Service! "; 
  };
});

Value, Constant

app.value('helloValue', "Hello, Value! ");

Dependency injection

Abhängigkeiten in controllern werden 'injected':

The dependencies of controllers can be 'injected':

app.controller('DependencyInjection1', function($scope, helloProvider, helloValue,
  helloService, helloFactory) {
  console.log(helloValue);
  console.log(helloProvider.sayHello());
  console.log(helloService.sayHello());
  console.log(helloFactory.sayHello());
});

Alternative Schreibweise:

Alternative syntax:

app.controller('DependencyInjection2', ['$scope', 'helloService', 'helloFactory', 
                                        function($scope, helloService, helloFactory)
  {
  console.log(helloService.sayHello())
  console.log(helloFactory.sayHello());
}]);

Eigene Direktiven

Custom directives

AngularJS stellt viele HTML-Erweiterungen (Direktiven) zur Verfügung.

AngularJS has many HTML extensions (directives) build in.

Eigene Direktiven lassen sich sehr einfach bauen.

It is very easy to build your own directives.

app.directive('name', function () {
  return {
    restrict: ..
    template: ..
    replace: ..
    templateURL: ..
    transclude: ..
    link: ..
    scope: ..
  }
});

Über die Parameter der Direktiven sind sehr unterschiedliche Anwendungsfälle abbildbar.

By using the parameters, different use cases can be achieved.

Direktiven - restrict:

Directives - restrict:

Verwendung als Element

Usage as element

app.directive('myDirective', function () {
  return {
    restrict: 'E',
}});
<my-directive ...></my-directive>
Attention: <my-directive .../> does not work properly!

Verwendung als Attribut

Usage as attribute

restrict: 'A',
<div my-directive=".." ...></div> oder <div my-directive></div>

Verwendung als Klasse

Usage as class

restrict: 'C',
<div class="my-directive" ...></div>

Die Kombination der Optionen geht auch, z.B. restrict: 'AE';

The combination is also allowed, e.g. restrict: 'AE';

Direktiven - template:

Directives - template:

HTML-Templates können auf einfache Weise angegeben werden.
HTML templates can be used very easy.

Java Script

app.directive('myButton', function () {
  return {
    restrict: 'E',
    template: '<button type="button" class="btn">click me</button>',
  }});

Verwendung:

Usage:

<my-button></my-button>

Ergebnis im DOM

Result within the DOM

<my-button><button type="button" class="btn">click me</button></my-button>
Mit replace: true würde das umgebende Tag ersetzt werden.
With replace: true, the surrounding tag would be replaced.

Direktiven - templateURL:

Direktives - templateURL:

Templates können auch extern definiert werden.

Templates may also be defined externally.

Dabei sorgt ein $templateCache dafür, dies nur einmal zu laden.

The $templateCache is responsible for single loading.


Alternative 1: Externes laden von Templates:

Alternative 1: External template:

templateURL: '/myButton.html'

Alternative 2: Definition im <script/>-Tag

Alternative 2: Definition within <script/> tag

<script type="text/ng-template" id="/myButton.html">
  <button type="button" class="btn">click me</button>
</script>

Direktiven - transclude:

Directives - transclude:

Inhalte können auch in ein Template eingeschlossen werden.
Contents can also be enclosed by a template.

Java Script

app.directive('myButton2', function () {
  return {
    restrict: 'E',
    transclude: true,
    template: '<button type="button" class="btn">\
             <span ng-transclude></span></button>',
  }});

Verwendung

Usage

<my-button2>That's the <strong>label!</strong><my-button2/>

Direktiven - link:

Directives - link:

Mit dem link-Attribut kann beliebiger Code ausführt werden.

With the link attribute, custom code can be executed.

app.directive('myLinkedButton', function () {
  return {
    restrict: 'E',
    template: '<button type="button" class="btn">click me</button>',
    link: function (scope, elem, attrs) {
      elem.on('click', function() {
        alert(attrs.message);
      });
    }}});
<my-linked-button message="42, ist the answer!"></my-linked-button>

Direktiven - scope:

Directives - scope:

Direktiven können einen isolierten Scope besitzen.

Directives can have an isolated scope.

app.directive('myScopedButton', function () {
  return {
    restrict: 'E',
    scope: {
      myMessage: '@message', // read only mapping
      myModel: '=model', // two way binding 
      myAction: '&action', // function reference
    },
    template: '<input class="form-control" type="text" ng-model="myModel">\
   <button type="button" class="btn" ng-click="myAction()">{{myMessage}}</button>',
  }});
<my-scoped-button message="I'm a button!" model="anyVar" action="sayHello()"></my-scoped-button>
anyVar:

Routing - $routeProvider

Seiten können modular aufgebaut werden.

Pages can be created in a modular fashion.

Views werden in Templates ausgelagert.

Views may be externalized in templates.

Deep-Linking wird unterstützt.

Deep linking is supported.

defaultTemplate template1 template2

Default Template

Routing

<script type="text/ng-template" id="/defaultTemplate.html">
  <div style="background:grey; height: 150px; "><h3>Default Template
  {{demoData}}</h3></div>
</script>
<script type="text/ng-template" id="/template1.html">
  <div style="background:green; height: 150px;"><h3>Template 1
  {{demoData}}</h3></div>
</script>
<script type="text/ng-template" id="/template2.html">
  <div style="background:blue; height: 150px;"><h3>Template 2 {{demoData}}</h3></div>
</script>
app.config(function($routeProvider) {

  $routeProvider
 .when('/template1', {
    templateUrl: '/template1.html',
  }).when('/template2', {
    templateUrl: '/template2.html',
  }).otherwise({
    templateUrl: '/defaultTemplate.html',
  });       
});
<div ng-view></div>

Routing - ui-router

Sehr mächtiges Routing-Framework (defakto standard)

https://github.com/angular-ui/ui-router/

State 1 State 2

x
x

Routing - ui-router

app.config(function($stateProvider) {
  $stateProvider
    .state('s1', {
    url: '/s1',
    views: {
      'left' : { templateUrl: '/defaultTemplate.html' },             
      'right' : { templateUrl: '/defaultTemplate.html'}
    }
  })
    .state('s2', {
    url: '/s2',
    views: {
      'left' : { templateUrl: '/template1.html' },             
      'right' : { templateUrl: '/template2.html'}
    }
  });
});
<div ui-view="left">x</div>
<div ui-view="right">x</div>

Input Validation

<form novalidate="" class="css-form">
  <style type="text/css">
   #css-form input.ng-invalid.ng-touched {
     background-color: #FA787E;
   }
   #css-form input..ng-touched {
     background-color: #78FA89;
   }
  </style>
  <input type="text" class="form-control"
  ng-model="var1" required="" placeholder="this is required">
  <input type="text" class="form-control"
  ng-model="var2" pattern="^\S+$" placeholder="no spaces here">
</form>

Zugriff auf REST Ressourcen

Accessing REST resources

$http

Einfache Api für HTTP-Operationen
Simple api for HTTP operations


app.controller('httpExample', function($scope, $http) {
  $http.get('/people')
       .success(function (result) {
    $scope.httpResult = result;
  });
});
httpResult: 

      

      
      
        
Zugriff auf REST Ressourcen

        
Accessing REST resources

        
$resource

        
        
        
<script src="./lib/angular-resource.min.js"/>
var app = angular.module('presentation', ['ngResource']);

        
app.controller('resourceExample', function($scope, $resource) {
  var Person = $resource('/people/:id', {id:'@id'});
  $scope.person = Person.get({id:1}, function() {
    $scope.person.first = 'new Name';
    $scope.person.$save();
  });       
});

        
person: 
{}

      

      
        

          
Unit Testing - mocking

          
AngularJS ist für gute Testbarkeit designed!

          
Durch Dependency-Injection lassen sich die Controller gut mocken.

          
angular-mocks.js stellt einige Mocks zum Testen bereit.

          
Beispiel: $httpBackend

        

        

          
Unit testing - mocking

          
AngularJS is designed for testability!

          
Controllers are mockable through dependency injection.

          
angular-mocks.js brings support for special mock objects.

          
Example: $httpBackend

        

        
app.run(function($httpBackend) {     
  var people = [{id: 0, first: 'Arthur', last: 'Dent'},
                {id: 1, first: 'Zaphod', last: 'Beeblebrox'}];
  $httpBackend.whenGET('/people').respond(people);
  $httpBackend.whenGET('/people/1').respond(people[1]);
  $httpBackend.expectPOST('/people/1').respond(function(data){return data});
  
  window.setTimeout(function() {
    $httpBackend.flush();
  }, 1000);
});

      

      
        
Unit Testing - Frameworks

        
Unit testing - frameworks

        
Jasmine: Behavior-Driven Testing Framework

        
Jasmine: Behavior driven testing framework

        
describe("A suite", function() {
  beforeEach(function() {
    ...
  });
  it("contains spec with an expectation", function() {
    expect(true).toBe(true);
  });
})

        
Karma: Testrunner

        
        
      

      
        

          
End-to-End Tests

          Klassischer selenium Ansatz hat Probleme mit waits und timeouts.
          
Protractor: Web-Testing Framework

          
Einfache Api, die im Hintergrund asynchron und auf Promises arbeitet.

          
    
            
  • node.js Applikation
    • 
            
  • Nutzung von Jasmine möglich
    • 
            
  • Basiert auf webDriver (standalone Selenium Server)
    • 
            
  • Managemenent der webDriver-Dependencies
    • 
          

        

        
 
          
End-to-end tests

          The normal selenium approach has too many problems with waits and timeouts.
          
Protractor: Web testing framework

          
Simple api which works asynchronously in the background and brings support for promise objects.

          
    
            
  • node.js applikation
    • 
            
  • Usage together with Jasmine
    • 
            
  • Based on webDriver
    • 
            
  • Management of the webDriver dependencies
    • 
          

        

      

      
        
Weitere Quellen

        
Further reading

        
http://angularjs.org/

        
https://docs.angularjs.org/api

        
AngularJS Youtube channel

        
Protractor/Selenium how to

        
The Hitchhiker’s Guide to the Directive

        
Quellen der Präsentation:

        
Sources of the presentation:

        
https://github.com/smancke/angularjs-intro

        
http://smancke.github.io/angularjs-intro

      

      

        de
        en