Sebastian Springer@basti_springerWednesday, June 26, 13
WER BIN ICH?• Sebastian Springer• https://github.com/sspringer82• @basti_springer• Teamlead @ MayflowerWednesday, June 26, 13
INHALT• Bootstrap• Scope• Controller• Model• View• Direktiven• Filter• Dependency Injection• Module• TestingWednesday, Jun...
ANGULAR?• Open Source MVC Framework• von Google• sehr gut erweiterbar• jQuery lite bundled• ng-* DirektivenWednesday, June...
INDEX.HTMLWednesday, June 26, 13
BOOTSTRAP<!DOCTYPE html><html ng-app><head><title>Movie Database</title><script src="/js/lib/angular.js"></script></head><...
BOOTSTRAPWednesday, June 26, 13
Wednesday, June 26, 13
CONTROLLER• Funktionen• Kontrolliert dasVerhalten der Applikation• Verbindet Models undViews• Scope alsVerbindungselementW...
INDEX.HTMLWednesday, June 26, 13
CONTROLLER<!DOCTYPE html><html data-ng-app><head><title>Movie Database</title><script src="/js/lib/angular.js"></script><s...
CONTROLLER<!DOCTYPE html><html data-ng-app><head><title>Movie Database</title><script src="/js/lib/angular.js"></script><s...
JS/CONTROLLERS.JSWednesday, June 26, 13
CONTROLLERfunction MovieListCtrl($scope) {$scope.name = Matrix;}Wednesday, June 26, 13
SCOPE• Änderungen in Models erkennen• Ausführungskontext• An Controller gebundenWednesday, June 26, 13
function MovieListCtrl($scope) {$scope.name = Matrix;}SCOPEWednesday, June 26, 13
<!DOCTYPE html><html data-ng-app><head><title>Movie Database</title><script src="/js/lib/angular.js"></script><script src=...
Wednesday, June 26, 13
DATA-BINDING• Das Model hält die Daten• DieView erhält die Daten und stellt sie dar• Scope alsVerbindungsstückWednesday, J...
TWO-WAY-DATA-BINDING• Controller gibt den Wert für das Model vor• Über das Model kann der Wert geändert werdenWednesday, J...
TWO-WAY-DATA-BINDINGfunction LoginCtrl($scope) {$scope.username = stranger;$scope.login = function () {if ($scope.username...
Wednesday, June 26, 13
MODELWednesday, June 26, 13
MODEL• Daten zur Darstellung in derView• keinerleiVorgaben hinsichtlich des AufbausWednesday, June 26, 13
MODELWednesday, June 26, 13
MODELfunction MovieListCtrl($scope) {$scope.name = Matrix;}Wednesday, June 26, 13
VIEWWednesday, June 26, 13
VIEW• Darstellung der Modeldaten• Zeigt Änderungen des Models sofort an• Zugriff auf den Scope über {{ }}Wednesday, June 2...
VIEWWednesday, June 26, 13
VIEW<!DOCTYPE html><html data-ng-app><head><title>Movie Database</title><script src="/js/lib/angular.js"></script><script ...
DIREKTIVENWednesday, June 26, 13
DIREKTIVEN• HTML Attribute• Verhalten oder DOMTransformation• Built-ins und eingene Direktiven• Eigene Direktiven• z.B. ng...
DIREKTIVENWednesday, June 26, 13
JS/CONTROLLERS.JSWednesday, June 26, 13
DIREKTIVENfunction MovieListCtrl($scope) {$scope.films = [{name: Matrix, year: 2005, genre: Sci-Fi},{name: Avatar, year: 2...
INDEX.HTMLWednesday, June 26, 13
<table><thead><tr><th>Name</th><th>Jahr</th><th>Genre</th></tr></thead><tbody><tr ng-repeat="film in films"><td>{{film.nam...
Wednesday, June 26, 13
FILTERWednesday, June 26, 13
• Datentransformation• Verbindung über das Pipe-Symbol• Eigene Filter• z.B. uppercase, jsonFILTERWednesday, June 26, 13
{{ Hello World | uppercase }}<input ng-model="search"><table><thead><tr><th>Name</th><th>Jahr</th><th>Genre</th></tr></the...
{{ Hello World | uppercase }}<input ng-model="search"><table><thead><tr><th>Name</th><th>Jahr</th><th>Genre</th></tr></the...
Wednesday, June 26, 13
DEPENDENCY INJECTIONWednesday, June 26, 13
DEPENDENCY INJECTION• Strukturierung - Komponenten für Model,View, Controller• Lose Kopplung - DI löst Abhängigkeiten auf•...
DEPENDENCY INJECTIONWednesday, June 26, 13
DEPENDENCY INJECTIONfunction MovieListCtrl($scope, $http) {$http.get(/movies).success(function(data) {$scope.films = data;...
DEPENDENCY INJECTIONfunction MovieListCtrl($scope, $http) {$http.get(/movies).success(function(data) {$scope.films = data;...
MODULEWednesday, June 26, 13
• Geben den Bootstrap-Prozess einer Applikation vor• Service Modul• Directive Modul• Filter Modul• Application ModulMODULE...
MODULEvar myApp = angular.module(myApp, []);myApp.controller(MovieListCtrl,[$scope, $http, function ($scope, $http) {$http...
MODULEvar myApp = angular.module(myApp, []);myApp.controller(MovieListCtrl,[$scope, $http, function ($scope, $http) {$http...
TESTINGWednesday, June 26, 13
TESTS• Karma alsTestrunner• sudo npm install -g karma• Angular setzt auf Jasmine• Zwei Arten vonTests• Unittests• E2E-Test...
UNITTESTSWednesday, June 26, 13
UNITTESTS• Testen Units of Code• Grundlage fürTDD• Pfad: test/unit/*• Konfiguration: config/karma.conf.jsWednesday, June 26,...
TEST/UNIT/CONTROLLERSPEC.JSWednesday, June 26, 13
describe(movieListCtrl, function(){var scope, ctrl, $httpBackend;beforeEach(inject(function(_$httpBackend_, $rootScope,$co...
it ("should fetch a list with one movie", function () {expect(scope.films).toBeUndefined();$httpBackend.flush();expect(sco...
UNITTESTS$ ./scripts/test.shStarting Karma Server (http://karma-runner.github.io)-----------------------------------------...
UNITTESTSWednesday, June 26, 13
UNITTESTSINFO [watcher]: Changed file "/srv/angularMovieDB/app/js/controllers.js".WatcherWednesday, June 26, 13
E2EWednesday, June 26, 13
E2E• Testen zusammenhängende Units• DOM-Manipulationen• Pfad: test/e2e• Konfiguration: config/karma-e2e.conf.jsWednesday, Ju...
TEST/E2E/SCENARIOS.JSWednesday, June 26, 13
E2Edescribe(Movie List, function() {beforeEach(function() {browser().navigateTo(../../app/index.html);});it(should display...
E2E• Webserver ausführen• ./scripts/web-server.js• Tests ausführen• ./scripts/e2e-test.shWednesday, June 26, 13
E2E./scripts/e2e-test.shStarting Karma Server (http://karma-runner.github.io)---------------------------------------------...
E2E• http://docs.angularjs.org/guide/dev_guide.e2e-testingWednesday, June 26, 13
ANGULAR-SEEDWednesday, June 26, 13
ANGULAR-SEED• Basisstruktur für Projekte• https://github.com/angular/angular-seedWednesday, June 26, 13
TIPPS &TRICKS• Setzt Module ein• Nutzt den Router• Achtet auf den Scope• Nutzt die Direktiven• SchreibtTestsWednesday, Jun...
FRAGEN?Wednesday, June 26, 13
KONTAKTSebastian Springersebastian.springer@mayflower.deMayflower GmbHMannhardtstr. 680538 MünchenDeutschland@basti_spring...
Upcoming SlideShare
Loading in …5
×

Einführung in AngularJS

2,120 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,120
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Einführung in AngularJS

  1. 1. Sebastian Springer@basti_springerWednesday, June 26, 13
  2. 2. WER BIN ICH?• Sebastian Springer• https://github.com/sspringer82• @basti_springer• Teamlead @ MayflowerWednesday, June 26, 13
  3. 3. INHALT• Bootstrap• Scope• Controller• Model• View• Direktiven• Filter• Dependency Injection• Module• TestingWednesday, June 26, 13
  4. 4. ANGULAR?• Open Source MVC Framework• von Google• sehr gut erweiterbar• jQuery lite bundled• ng-* DirektivenWednesday, June 26, 13
  5. 5. INDEX.HTMLWednesday, June 26, 13
  6. 6. BOOTSTRAP<!DOCTYPE html><html ng-app><head><title>Movie Database</title><script src="/js/lib/angular.js"></script></head><body>Hello {{ World! }}</body></html>Wednesday, June 26, 13
  7. 7. BOOTSTRAPWednesday, June 26, 13
  8. 8. Wednesday, June 26, 13
  9. 9. CONTROLLER• Funktionen• Kontrolliert dasVerhalten der Applikation• Verbindet Models undViews• Scope alsVerbindungselementWednesday, June 26, 13
  10. 10. INDEX.HTMLWednesday, June 26, 13
  11. 11. 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>Wednesday, June 26, 13
  12. 12. 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>Wednesday, June 26, 13
  13. 13. JS/CONTROLLERS.JSWednesday, June 26, 13
  14. 14. CONTROLLERfunction MovieListCtrl($scope) {$scope.name = Matrix;}Wednesday, June 26, 13
  15. 15. SCOPE• Änderungen in Models erkennen• Ausführungskontext• An Controller gebundenWednesday, June 26, 13
  16. 16. function MovieListCtrl($scope) {$scope.name = Matrix;}SCOPEWednesday, June 26, 13
  17. 17. <!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>SCOPEWednesday, June 26, 13
  18. 18. Wednesday, June 26, 13
  19. 19. DATA-BINDING• Das Model hält die Daten• DieView erhält die Daten und stellt sie dar• Scope alsVerbindungsstückWednesday, June 26, 13
  20. 20. TWO-WAY-DATA-BINDING• Controller gibt den Wert für das Model vor• Über das Model kann der Wert geändert werdenWednesday, June 26, 13
  21. 21. TWO-WAY-DATA-BINDINGfunction LoginCtrl($scope) {$scope.username = stranger;$scope.login = function () {if ($scope.username === admin &&$scope.password === test) {$scope.user = Administrator;}}}Wednesday, June 26, 13
  22. 22. Wednesday, June 26, 13
  23. 23. MODELWednesday, June 26, 13
  24. 24. MODEL• Daten zur Darstellung in derView• keinerleiVorgaben hinsichtlich des AufbausWednesday, June 26, 13
  25. 25. MODELWednesday, June 26, 13
  26. 26. MODELfunction MovieListCtrl($scope) {$scope.name = Matrix;}Wednesday, June 26, 13
  27. 27. VIEWWednesday, June 26, 13
  28. 28. VIEW• Darstellung der Modeldaten• Zeigt Änderungen des Models sofort an• Zugriff auf den Scope über {{ }}Wednesday, June 26, 13
  29. 29. VIEWWednesday, June 26, 13
  30. 30. 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>Wednesday, June 26, 13
  31. 31. DIREKTIVENWednesday, June 26, 13
  32. 32. DIREKTIVEN• HTML Attribute• Verhalten oder DOMTransformation• Built-ins und eingene Direktiven• Eigene Direktiven• z.B. ngApp, ngController, ngRepeatWednesday, June 26, 13
  33. 33. DIREKTIVENWednesday, June 26, 13
  34. 34. JS/CONTROLLERS.JSWednesday, June 26, 13
  35. 35. DIREKTIVENfunction MovieListCtrl($scope) {$scope.films = [{name: Matrix, year: 2005, genre: Sci-Fi},{name: Avatar, year: 2009, genre: Sci-Fi},{name: Gran Torino, year: 2008, genre: Drama}];}Wednesday, June 26, 13
  36. 36. INDEX.HTMLWednesday, June 26, 13
  37. 37. <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>Wednesday, June 26, 13
  38. 38. Wednesday, June 26, 13
  39. 39. FILTERWednesday, June 26, 13
  40. 40. • Datentransformation• Verbindung über das Pipe-Symbol• Eigene Filter• z.B. uppercase, jsonFILTERWednesday, June 26, 13
  41. 41. {{ Hello World | uppercase }}<input ng-model="search"><table><thead><tr><th>Name</th><th>Jahr</th><th>Genre</th></tr></thead><tbody><tr ng-repeat="film in films | filter: search"><td>{{film.name}}</td><td>{{film.year}}</td><td>{{film.genre}}</td></tr></tbody></table>Wednesday, June 26, 13
  42. 42. {{ Hello World | uppercase }}<input ng-model="search"><table><thead><tr><th>Name</th><th>Jahr</th><th>Genre</th></tr></thead><tbody><tr ng-repeat="film in films | filter: search"><td>{{film.name}}</td><td>{{film.year}}</td><td>{{film.genre}}</td></tr></tbody></table>Wednesday, June 26, 13
  43. 43. Wednesday, June 26, 13
  44. 44. DEPENDENCY INJECTIONWednesday, June 26, 13
  45. 45. DEPENDENCY INJECTION• Strukturierung - Komponenten für Model,View, Controller• Lose Kopplung - DI löst Abhängigkeiten auf• DI stellt Services zurVerfügung• Caching MechanismusWednesday, June 26, 13
  46. 46. DEPENDENCY INJECTIONWednesday, June 26, 13
  47. 47. DEPENDENCY INJECTIONfunction MovieListCtrl($scope, $http) {$http.get(/movies).success(function(data) {$scope.films = data;});}Wednesday, June 26, 13
  48. 48. DEPENDENCY INJECTIONfunction MovieListCtrl($scope, $http) {$http.get(/movies).success(function(data) {$scope.films = data;});}Wednesday, June 26, 13
  49. 49. MODULEWednesday, June 26, 13
  50. 50. • Geben den Bootstrap-Prozess einer Applikation vor• Service Modul• Directive Modul• Filter Modul• Application ModulMODULEWednesday, June 26, 13
  51. 51. MODULEvar myApp = angular.module(myApp, []);myApp.controller(MovieListCtrl,[$scope, $http, function ($scope, $http) {$http.get(/movies).success(function(data) {$scope.films = data;});}]);Wednesday, June 26, 13
  52. 52. MODULEvar myApp = angular.module(myApp, []);myApp.controller(MovieListCtrl,[$scope, $http, function ($scope, $http) {$http.get(/movies).success(function(data) {$scope.films = data;});}]);Wednesday, June 26, 13
  53. 53. TESTINGWednesday, June 26, 13
  54. 54. TESTS• Karma alsTestrunner• sudo npm install -g karma• Angular setzt auf Jasmine• Zwei Arten vonTests• Unittests• E2E-TestsWednesday, June 26, 13
  55. 55. UNITTESTSWednesday, June 26, 13
  56. 56. UNITTESTS• Testen Units of Code• Grundlage fürTDD• Pfad: test/unit/*• Konfiguration: config/karma.conf.jsWednesday, June 26, 13
  57. 57. TEST/UNIT/CONTROLLERSPEC.JSWednesday, June 26, 13
  58. 58. 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});}));Wednesday, June 26, 13
  59. 59. 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"}]);});Wednesday, June 26, 13
  60. 60. UNITTESTS$ ./scripts/test.shStarting 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 SUCCESSWednesday, June 26, 13
  61. 61. UNITTESTSWednesday, June 26, 13
  62. 62. UNITTESTSINFO [watcher]: Changed file "/srv/angularMovieDB/app/js/controllers.js".WatcherWednesday, June 26, 13
  63. 63. E2EWednesday, June 26, 13
  64. 64. E2E• Testen zusammenhängende Units• DOM-Manipulationen• Pfad: test/e2e• Konfiguration: config/karma-e2e.conf.jsWednesday, June 26, 13
  65. 65. TEST/E2E/SCENARIOS.JSWednesday, June 26, 13
  66. 66. E2Edescribe(Movie List, function() {beforeEach(function() {browser().navigateTo(../../app/index.html);});it(should display 3 movies, function() {expect(repeater(table tbody tr).count()).toBe(3);});});Wednesday, June 26, 13
  67. 67. E2E• Webserver ausführen• ./scripts/web-server.js• Tests ausführen• ./scripts/e2e-test.shWednesday, June 26, 13
  68. 68. E2E./scripts/e2e-test.shStarting Karma Server (http://karma-runner.github.io)-------------------------------------------------------------------[2013-06-22 10:26:07.404] [WARN] config - "/" is proxied, you shouldprobably 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)Wednesday, June 26, 13
  69. 69. E2E• http://docs.angularjs.org/guide/dev_guide.e2e-testingWednesday, June 26, 13
  70. 70. ANGULAR-SEEDWednesday, June 26, 13
  71. 71. ANGULAR-SEED• Basisstruktur für Projekte• https://github.com/angular/angular-seedWednesday, June 26, 13
  72. 72. TIPPS &TRICKS• Setzt Module ein• Nutzt den Router• Achtet auf den Scope• Nutzt die Direktiven• SchreibtTestsWednesday, June 26, 13
  73. 73. FRAGEN?Wednesday, June 26, 13
  74. 74. KONTAKTSebastian Springersebastian.springer@mayflower.deMayflower GmbHMannhardtstr. 680538 MünchenDeutschland@basti_springerhttps://github.com/sspringer82Wednesday, June 26, 13

×