Einführung in AngularJS

Sebastian Springer@basti_springer

Wednesday, June 26, 13

WER BIN ICH?

• Sebastian Springer

• https://github.com/sspringer82

• @basti_springer

• Teamlead @ Mayflower


https://github.com/sspringer82


INHALT

• Bootstrap

• Scope

• Controller

• Model

• View

• Direktiven

• Filter

• Dependency Injection

• Module

• Testing


ANGULAR?

• Open Source MVC Framework

• von Google

• sehr gut erweiterbar

• jQuery lite bundled

• ng-* Direktiven


INDEX.HTML


BOOTSTRAP

<!DOCTYPE html><html ng-app> <head> <title>Movie Database</title> <script src="/js/lib/angular.js"></script> </head> <body> Hello {{ 'World!' }} </body></html>


BOOTSTRAP



CONTROLLER

• Funktionen

• Kontrolliert das Verhalten der Applikation

• Verbindet Models und Views

• Scope als Verbindungselement


INDEX.HTML


CONTROLLER<!DOCTYPE html><html data-ng-app> <head> <title>Movie Database</title> <script src="/js/lib/angular.js"></script> <script src="/js/controllers.js"></script> </head> <body ng-controller="MovieListCtrl">

{{ name }}

</body></html>


CONTROLLER<!DOCTYPE html><html data-ng-app> <head> <title>Movie Database</title> <script src="/js/lib/angular.js"></script> <script src="/js/controllers.js"></script> </head> <body ng-controller="MovieListCtrl">

{{ name }}

</body></html>


JS/CONTROLLERS.JS


CONTROLLER

function MovieListCtrl($scope) {

$scope.name = 'Matrix';

}


SCOPE

• Änderungen in Models erkennen

• Ausführungskontext

• An Controller gebunden




}

SCOPE


<!DOCTYPE html><html data-ng-app> <head> <title>Movie Database</title> <script src="/js/lib/angular.js"></script> <script src="/js/controllers.js"></script> </head> <body ng-controller="MovieListCtrl">

{{ name }}

</body></html>

SCOPE



DATA-BINDING

• Das Model hält die Daten

• Die View erhält die Daten und stellt sie dar

• Scope als Verbindungsstück


TWO-WAY-DATA-BINDING

• Controller gibt den Wert für das Model vor

• Über das Model kann der Wert geändert werden


TWO-WAY-DATA-BINDINGfunction LoginCtrl($scope) {

$scope.username = 'stranger';

$scope.login = function () { if ($scope.username === 'admin' && $scope.password === 'test') { $scope.user = 'Administrator'; } }

}



MODEL


MODEL

• Daten zur Darstellung in der View

• keinerlei Vorgaben hinsichtlich des Aufbaus


MODEL


MODEL



}


VIEW


VIEW

• Darstellung der Modeldaten

• Zeigt Änderungen des Models sofort an

• Zugriff auf den Scope über {{ }}


VIEW


VIEW<!DOCTYPE html><html data-ng-app> <head> <title>Movie Database</title> <script src="/js/lib/angular.js"></script> <script src="/js/controllers.js"></script> </head> <body ng-controller="MovieListCtrl">

{{ name }}

</body></html>


DIREKTIVEN


DIREKTIVEN

• HTML Attribute

• Verhalten oder DOM Transformation

• Built-ins und eingene Direktiven

• Eigene Direktiven

• z.B. ngApp, ngController, ngRepeat


DIREKTIVEN


JS/CONTROLLERS.JS


DIREKTIVEN


$scope.films = [ {name: 'Matrix', year: 2005, genre: 'Sci-Fi'}, {name: 'Avatar', year: 2009, genre: 'Sci-Fi'}, {name: 'Gran Torino', year: 2008, genre: 'Drama'} ];}


INDEX.HTML


<table> <thead> <tr> <th>Name</th><th>Jahr</th><th>Genre</th> </tr> </thead>

<tbody>

<tr ng-repeat="film in films"> <td>{{film.name}}</td> <td>{{film.year}}</td> <td>{{film.genre}}</td> </tr>

</tbody></table>



FILTER


• Datentransformation

• Verbindung über das Pipe-Symbol

• Eigene Filter

• z.B. uppercase, json

FILTER


{{ 'Hello World' | uppercase }}

<input ng-model="search">


<tbody> <tr ng-repeat="film in films | filter: search"> <td>{{film.name}}</td> <td>{{film.year}}</td> <td>{{film.genre}}</td> </tr> </tbody></table>


{{ 'Hello World' | uppercase }}

<input ng-model="search">


<tbody> <tr ng-repeat="film in films | filter: search"> <td>{{film.name}}</td> <td>{{film.year}}</td> <td>{{film.genre}}</td> </tr> </tbody></table>



DEPENDENCY INJECTION



• Strukturierung - Komponenten für Model, View, Controller

• Lose Kopplung - DI löst Abhängigkeiten auf

• DI stellt Services zur Verfügung

• Caching Mechanismus





function MovieListCtrl($scope, $http) {

$http.get('/movies').success(function(data) { $scope.films = data; });

}



function MovieListCtrl($scope, $http) {


}


MODULE


• Geben den Bootstrap-Prozess einer Applikation vor

• Service Modul

• Directive Modul

• Filter Modul

• Application Modul

MODULE


MODULEvar myApp = angular.module('myApp', []);

myApp.controller('MovieListCtrl', ['$scope', '$http', function ($scope, $http) {


}]);


MODULEvar myApp = angular.module('myApp', []);

myApp.controller('MovieListCtrl', ['$scope', '$http', function ($scope, $http) {


}]);


TESTING


TESTS

• Karma als Testrunner

• sudo npm install -g karma

• Angular setzt auf Jasmine

• Zwei Arten von Tests

• Unittests

• E2E-Tests


UNITTESTS


UNITTESTS

• Testen Units of Code

• Grundlage für TDD

• Pfad: test/unit/*

• Konfiguration: config/karma.conf.js


TEST/UNIT/CONTROLLERSPEC.JS


describe('movieListCtrl', function(){

var scope, ctrl, $httpBackend;

beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) { $httpBackend = _$httpBackend_; $httpBackend.expectGET('data/movies.json').respond( [{"name": "Matrix", "year": 2005, "genre": "Sci-Fi"}] ); scope = $rootScope.$new(); ctrl = $controller(movieListCtrl, {$scope: scope}); }));


it ("should fetch a list with one movie", function () { expect(scope.films).toBeUndefined();

$httpBackend.flush();

expect(scope.films).toEqual( [{"name": "Matrix", "year": 2005, "genre": "Sci-Fi"}] ); });


UNITTESTS

$ ./scripts/test.sh

Starting Karma Server (http://karma-runner.github.io)-------------------------------------------------------------------INFO [karma]: Karma server started at http://localhost:9876/INFO [launcher]: Starting browser ChromeINFO [launcher]: Starting browser FirefoxINFO [Firefox 21.0 (Mac)]: Connected on socket id 8lw9q3ZBbNpAb7rc3RpSINFO [Chrome 27.0 (Mac)]: Connected on socket id KI5wy1rfgkIU32cP3RpRFirefox 21.0 (Mac): Executed 4 of 4 SUCCESS (0.134 secs / 0.037 secs)Chrome 27.0 (Mac): Executed 4 of 4 SUCCESS (0.157 secs / 0.044 secs)TOTAL: 8 SUCCESS


http://karma-runner.github.io


http://localhost:9876


UNITTESTS


UNITTESTS

INFO [watcher]: Changed file "/srv/angularMovieDB/app/js/controllers.js".

Watcher


E2E


E2E

• Testen zusammenhängende Units

• DOM-Manipulationen

• Pfad: test/e2e

• Konfiguration: config/karma-e2e.conf.js


TEST/E2E/SCENARIOS.JS


E2E

describe('Movie List', function() {

beforeEach(function() { browser().navigateTo('../../app/index.html'); });

it('should display 3 movies', function() { expect(repeater('table tbody tr').count()).toBe(3); });});


E2E

• Webserver ausführen

•./scripts/web-server.js

• Tests ausführen

•./scripts/e2e-test.sh


E2E

./scripts/e2e-test.sh

Starting Karma Server (http://karma-runner.github.io)-------------------------------------------------------------------[2013-06-22 10:26:07.404] [WARN] config - "/" is proxied, you should probably change urlRoot to avoid conflictsINFO [karma]: Karma server started at http://localhost:9876/INFO [launcher]: Starting browser ChromeINFO [Chrome 27.0 (Mac)]: Connected on socket id 4YaYP4NBBNKlOgDS_YbAChrome 27.0 (Mac): Executed 1 of 1 SUCCESS (0.385 secs / 0.189 secs)






E2E

• http://docs.angularjs.org/guide/dev_guide.e2e-testing


http://docs.angularjs.org/guide/dev_guide.e2e-testing

http://docs.angularjs.org/guide/dev_guide.e2e-testing

ANGULAR-SEED


ANGULAR-SEED

• Basisstruktur für Projekte

• https://github.com/angular/angular-seed


https://github.com/angular/angular-seed

https://github.com/angular/angular-seed

TIPPS & TRICKS

• Setzt Module ein

• Nutzt den Router

• Achtet auf den Scope

• Nutzt die Direktiven

• Schreibt Tests


FRAGEN?


KONTAKT

Sebastian [email protected]

Mayflower GmbHMannhardtstr. 680538 MünchenDeutschland

@basti_springer



mailto:[email protected]

mailto:[email protected]



Technology

Einführung in AngularJS