Download as PDF, PPTX
![Defining a module
angular
.module('app', [
'module',
'feature'
]);
// Name your module...
// … Extend it with
// other modules](https://image.slidesharecdn.com/presentation-141112124609-conversion-gate01/85/A-gently-introduction-to-AngularJS-20-320.jpg)
![$injecting a service into a
controller
// angular magic
angular
.module('app')
.controller('Persons', Persons);
Persons.$inject = ['dataAccess'];
function Persons(dataAccess) {
}](https://image.slidesharecdn.com/presentation-141112124609-conversion-gate01/85/A-gently-introduction-to-AngularJS-27-320.jpg)
More Related Content
Similar to A gently introduction to AngularJS
A gently introduction to AngularJS
- 2. Gregor Woiwode @GregOnNet Software must fit user needs, not vice versa! #empathic-business FAVORITE 1
- 3. Web Apps?! Ican’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 dowe 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 inthe box? {{ }} Data Binding two way one way change tracking
- 11. What is inthe box? Modules controllers factories, services, providers directives, filter
- 12. What is inthe box? Dependency Injection
- 13. What is inthe box? Routing
- 14. What is inthe box? Testing
- 15. What is inthe box? Community 31.3k Stars ~ 96k Videos ~ 63k Questions 11th of November 2014 angularjs.org Documentation and Tutorials
- 16. Let’s get intocode <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 aboutdirectives 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 manyfilters 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 serviceinto a controller // angular magic angular .module('app') .controller('Persons', Persons); Persons.$inject = ['dataAccess']; function Persons(dataAccess) { }
- 28. $injecting a serviceinto a controller angular .module('app') .controller('Persons', Persons); // still works without $inject function Persons(dataAccess) { }
- 29. $injecting a serviceinto 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.