Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

A gently introduction to AngularJS

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

YouTube-Videos werden auf SlideShare nicht mehr unterstützt.

Original auf YouTube ansehen

Gregor Woiwode 
@GregOnNet 
Software must fit user needs, not vice versa! 
#empathic-business 
FAVORITE 
1
Web Apps?! 
I can’t! 
Of course, 
I can! 
discovers 
stunned

Hier ansehen

1 von 34 Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Ähnlich wie A gently introduction to AngularJS (20)

Anzeige

Aktuellste (20)

A gently introduction to AngularJS

  1. 1. Gregor Woiwode @GregOnNet Software must fit user needs, not vice versa! #empathic-business FAVORITE 1
  2. 2. Web Apps?! I can’t! Of course, I can! discovers stunned
  3. 3. Downloads Source Code https://github.com/GregOnNet/angular-starter-demos https://github.com/GregOnNet/angular-cups
  4. 4. https://single-page.app/#/list What do we expect from a Search... + single-page app? Reacting fast to user input Providing comprehensive interactions Using only one page?
  5. 5. https://single-page.app/#/card/one Mission accomplished - NOT! Card - One... Templating multiple views Routing between views Interacting with server side APIs Organizing app architecture that scales Binding & Presenting data Save Who cares about... Caching data
  6. 6. My personal pains A B D C Framework confetti
  7. 7. My personal pains A better A D Dependencies & Versioning
  8. 8. My personal salvation A B C D Choosing one pluggable ecosystem
  9. 9. What is in the box? {{ }} Data Binding two way one way change tracking
  10. 10. What is in the box? Modules controllers factories, services, providers directives, filter
  11. 11. What is in the box? Dependency Injection
  12. 12. What is in the box? Routing
  13. 13. What is in the box? Testing
  14. 14. What is in the box? Community 31.3k Stars ~ 96k Videos ~ 63k Questions 11th of November 2014 angularjs.org Documentation and Tutorials
  15. 15. Let’s get into code <html ng-app="demo"> // our awesome app </html>
  16. 16. Intermediate Function Expression - iife (function() { 'use strict'; // Isolation })();
  17. 17. Why iife? script.js var greet = 'Hi!'; conflict.js var greet = 'Bye!'; Last man standing
  18. 18. Why iife? script.js (function () { 'use strict'; var greet = 'Hi!'; })(); conflict.js (function () { 'use strict'; var greet = 'Bye!'; })(); SAVE
  19. 19. Defining a module angular .module('app', [ 'module', 'feature' ]); // Name your module... // … Extend it with // other modules
  20. 20. Defining a controller angular .module('app') .controller('Persons', Persons); function Persons() { }
  21. 21. Our first directive angular .module('app') .directive('semanticHtml', semanticHtml); function semanticHtml () { return { restrict : 'E | A | C', template : '<html-template>' }; } // Nearly the same like our // controller, right? // Watch out! // Directives return a new // object literal
  22. 22. Even more about directives function semanticHtml () { return { restrict : 'E | A | C', template : '<html-template>' templateUrl: scope: controller: link: }; }
  23. 23. Starting with filters angular .module('app') .filter('manipulate', manipulate); function manipulate() { return function(input, /* parameters */ ) { } } // Watch out! // Filters return a function.
  24. 24. There are many filters already implemented https://github.com/a8m/angular-filter
  25. 25. Defining a factory, service, whatever... angular .module('app') .factory('dataAccess', dataAccess); function dataAccess() { return { }; } // LEGO bricks the angular // way // Declaring the api of our // service
  26. 26. $injecting a service into a controller // angular magic angular .module('app') .controller('Persons', Persons); Persons.$inject = ['dataAccess']; function Persons(dataAccess) { }
  27. 27. $injecting a service into a controller angular .module('app') .controller('Persons', Persons); // still works without $inject function Persons(dataAccess) { }
  28. 28. $injecting a service into a controller angular .module('app') .controller('Persons', p); function p(a) { } // But a minifier will break // your app a cannot be resolved as dataAccess
  29. 29. events child controller parent controller $broadcast $emit $scope . $ e m i t ('eventName'); .$broadcast
  30. 30. events using $rootScope controller subscriber controller publisher $rootScope .$emit('eventName'); $rootScope .$on('eventName' , callback);
  31. 31. Join the AngularJS-World Make your first steps testing your apps Code cleaner with John Papa’s Style Guide Cheat Sheets help you to keep the overview Read Dan Wahlin’s AngularJS Magazin Use snippets provided by AngularJS Hub Subscribe to channels of AngularJS and NgEurope Stay up to date with the NG-Newsletter “click it”
  32. 32. Questions?

×