Recommended
More Related Content
What's hot
What's hot (20)
Similar to A gently introduction to AngularJS
Similar to A gently introduction to AngularJS (20)
Recently uploaded
Recently uploaded (20)
A gently introduction to AngularJS
- 2. Gregor Woiwode @GregOnNet Software must fit user needs, not vice versa! #empathic-business FAVORITE 1
- 3. Web Apps?! I can’t! Of course, I can! discovers stunned
- 4. Downloads Source Code https://github.com/GregOnNet/angular-starter-demos https://github.com/GregOnNet/angular-cups
- 5. 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?
- 6. 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
- 7. My personal pains A B D C Framework confetti
- 8. My personal pains A better A D Dependencies & Versioning
- 9. My personal salvation A B C D Choosing one pluggable ecosystem
- 10. What is in the box? {{ }} Data Binding two way one way change tracking
- 11. What is in the box? Modules controllers factories, services, providers directives, filter
- 12. What is in the box? Dependency Injection
- 13. What is in the box? Routing
- 14. What is in the box? Testing
- 15. What is in the box? Community 31.3k Stars ~ 96k Videos ~ 63k Questions 11th of November 2014 angularjs.org Documentation and Tutorials
- 16. Let’s get into code <html ng-app="demo"> // our awesome app </html>
- 17. Intermediate Function Expression - iife (function() { 'use strict'; // Isolation })();
- 18. Why iife? script.js var greet = 'Hi!'; conflict.js var greet = 'Bye!'; Last man standing
- 19. Why iife? script.js (function () { 'use strict'; var greet = 'Hi!'; })(); conflict.js (function () { 'use strict'; var greet = 'Bye!'; })(); SAVE
- 20. Defining a module angular .module('app', [ 'module', 'feature' ]); // Name your module... // … Extend it with // other modules
- 21. Defining a controller angular .module('app') .controller('Persons', Persons); function Persons() { }
- 22. 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
- 23. Even more about directives function semanticHtml () { return { restrict : 'E | A | C', template : '<html-template>' templateUrl: scope: controller: link: }; }
- 24. Starting with filters angular .module('app') .filter('manipulate', manipulate); function manipulate() { return function(input, /* parameters */ ) { } } // Watch out! // Filters return a function.
- 25. There are many filters already implemented https://github.com/a8m/angular-filter
- 26. 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
- 27. $injecting a service into a controller // angular magic angular .module('app') .controller('Persons', Persons); Persons.$inject = ['dataAccess']; function Persons(dataAccess) { }
- 28. $injecting a service into a controller angular .module('app') .controller('Persons', Persons); // still works without $inject function Persons(dataAccess) { }
- 29. $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
- 30. events child controller parent controller $broadcast $emit $scope . $ e m i t ('eventName'); .$broadcast
- 31. events using $rootScope controller subscriber controller publisher $rootScope .$emit('eventName'); $rootScope .$on('eventName' , callback);
- 32. 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”
- 33. Questions?