An Introduction to AngularJS
•
0 likes•1,140 views
A Tutorial given at JUG Saxony, November 7th, 2013; Leipzig.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to An Introduction to AngularJS
Similar to An Introduction to AngularJS (20)
More from Falk Hartmann
More from Falk Hartmann (9)
Recently uploaded
Recently uploaded (20)
An Introduction to AngularJS
- 1. An Introduction to AngularJS Falk Hartmann November 7th, 2013 2/12/13 1 Copyright 2013 Demandware, Inc. Anc. ther ther rights reserved. Copyright 2013 Demandware, I ll o All o rights reserved.
- 2. My Main Areas of Expertise • • • • • Java Markup Languages Identity and Access Management OSGi ActionScript/MXML Demandware • • • • November 7th, 2013 Develops and operates an enterprise-class cloud commerce platform since 2004 160 retail brands with more than 665 sites world-wide Offices in Jena, Burlington (MA), Munich, Paris, London Technologies - Java, JEE, Spring - Oracle, MongoDB, Redis, ElasticSearch - Demandware Script (a JavaScript variant) 2 Copyright 2013 Demandware, Inc. All other rights reserved.
- 3. Agenda • • • • • • November 7th, 2013 What is AngularJS? Challenges & solutions Terminology Sample App I: Hello Sample App II: Zwitschermaschine Conclusion 3 Copyright 2013 Demandware, Inc. All other rights reserved.
- 4. What is AngularJS? • • • • Client-side JavaScript framework (i.e., runs in a browser) “Superheroic JavaScript MVW Framework” W = Whatever works for you Model View Controller vs. Model View View-Model • Not a breakthrough, but a smart selection of best of breed approaches • • Started by Google in 2009 Released as 1.0 in 2012 November 7th, 2013 4 Copyright 2013 Demandware, Inc. All other rights reserved.
- 5. Challenges & solutions November 7th, 2013 5 Copyright 2013 Demandware, Inc. All other rights reserved.
- 6. Challenges & solutions Boilerplate code Single page applications Rich user interface Development speed Forms Maintainability Browser incompatibilities Testability November 7th, 2013 5 Copyright 2013 Demandware, Inc. All other rights reserved.
- 7. Challenges & solutions Dependency injection REST Boilerplate code Single page applications Partials/routing Templates Rich user interface Development speed MVC Maintainability Directives Forms (Bidirectional) data binding Browser incompatibilities Unit tests Testability (Abstraction) services End to end tests November 7th, 2013 5 Copyright 2013 Demandware, Inc. All other rights reserved.
- 8. Terminology Module • Unit for the specification of dependencies (high-level) Directive • (UI) Control (defined by yourself or third parties) View • HTML page with special tags (“directives”) Controller • (Client-side) backend to a view Scope • View Model, shared object between view and controller • Hierarchical Service • other application components (defined by AngularJS, yourself or third parties), e.g., for communicating with backend services or for using browser functionality in a browser independent way November 7th, 2013 6 Copyright 2013 Demandware, Inc. All other rights reserved.
- 9. Sample App I: Hello Minimum Angular Application • index.html • app.js Demo November 7th, 2013 7 Copyright 2013 Demandware, Inc. All other rights reserved.
- 10. Summary Bootstrapping Angular • Declaring the DOM part to be processed: ng-app=”<module-name>” • Include Angular: <script src="angular.js"></script> • Include Angular module: <script src=”app.js”></script> Client-side templates • Parts of DOM are bound to values in the scope • Standard Syntax: {{expression}} Bidirectional data-binding • • • • November 7th, 2013 Button: ng-click Input: ng-model Title: ng-bind-template Image: ng-href 8 Copyright 2013 Demandware, Inc. All other rights reserved.
- 11. Summary Naming of attributes/elements defined by/with AngularJS • • • • November 7th, 2013 ng-model ng:model (XML) data-ng-model (HTML 5) x-ng-model (XHTML) 9 Copyright 2013 Demandware, Inc. All other rights reserved.
- 12. Sample App II: Zwitschermaschine November 7th, 2013 10 Copyright 2013 Demandware, Inc. All other rights reserved.
- 13. Step 1: Partials/Routing Demo November 7th, 2013 11 Copyright 2013 Demandware, Inc. All other rights reserved.
- 14. Summary Dependency Injection • Controller is registered at module along with its dependencies • Syntax: controller('Controller', ['dep1', 'dep2', ..., function(dep1, dep2, ...) { ... } ]) • Array of size n+1 containing - n Strings defining dependencies (by name) - a function with n parameters Partials/routing • • • • November 7th, 2013 Single page application: constant frame with variable content Variable content selected via URL Insertion point for partial pages: ng-view Configuration of content: $routeProvider 12 Copyright 2013 Demandware, Inc. All other rights reserved.
- 15. Step 2: Adding a Form Demo November 7th, 2013 13 Copyright 2013 Demandware, Inc. All other rights reserved.
- 16. Summary Controller • Defines scope for associated form • Syntax: ng-controller Bidirectional data binding • Retrieval a value first from controller’s scope, than from $rootScope • Setting a value to the controller’s scope November 7th, 2013 14 Copyright 2013 Demandware, Inc. All other rights reserved.
- 17. Step 3: REST communication Demo November 7th, 2013 15 Copyright 2013 Demandware, Inc. All other rights reserved.
- 18. Summary ngResource • Separate AngularJS module • Powerful abstraction of REST communication Client-side templates • Loops: ng-repeat • Filters: {{ expression | filter }} • Forcing an update of the view: $scope.$apply November 7th, 2013 16 Copyright 2013 Demandware, Inc. All other rights reserved.
- 19. Step 4: Directives Demo November 7th, 2013 17 Copyright 2013 Demandware, Inc. All other rights reserved.
- 20. Summary Directives • Registration at module • Usage as element, attribute, class or comment: restrict: ’EAMC’ - Element (E) <custom-ctrl title=”Title”/> - Attribute (A) <div custom-ctrl=”Title”/> <div class=”custom-ctrl:Title”/> - Class (C) - Comment (M) <!-- directive: custom-ctrl Title --> • Isolated scope: scope {attributeName: ’@|=|&’} - Fosters reusability - Value (@) Pass attribute value as string literal - Bound (=) Establish data binding between directive and parent scope - Function (&) Pass a function in the parent scope November 7th, 2013 18 Copyright 2013 Demandware, Inc. All other rights reserved.
- 21. Summary Directives • Defining the content - Template: template: { ... } / templateUrl: { ... } Can replace the directive: replace: true Can add to the directive’s parent element: replace: false Can include the directive’s content: transclude: true + ng:transclude - Pair of compile/link functions compile function is invoked once on the directive link function is invoked once per use of the directive • Communication between directives • Priority definition to influence evaluation order • Existing directives: charting, grids etc. November 7th, 2013 19 Copyright 2013 Demandware, Inc. All other rights reserved.
- 22. Step 5: Testing Demo November 7th, 2013 20 Copyright 2013 Demandware, Inc. All other rights reserved.
- 23. Summary Unit tests • Jasmine syntax to specify tests: describe/it • Karma for test execution - Browser configurable (Chrome, Firefox, Safari, IE, PhantomJS) - auto-watch possible End-to-end tests • Capabilities to mock HTTP servers • UI introspection using jquery selectors • Karma for test execution November 7th, 2013 21 Copyright 2013 Demandware, Inc. All other rights reserved.
- 24. Conclusion Logic at the right place • JSP “This shouldn’t be done here!” • Angular “This is the right place!” Well-thought aggregation of established techniques • Dependency injection as new mean in the JavaScript technological space • Adaption of known best-of-breed approaches Under development • Sometimes libraries change (too) fast November 7th, 2013 22 Copyright 2013 Demandware, Inc. All other rights reserved.
- 25. Thank you! November 7th, 2013 23 Copyright 2013 Demandware, Inc. All other rights reserved.
- 26. Predefined Services $rootScope Access to the parent of all scopes (“root scope”) $location Access to URL in address bar $routeProvider Definition of URL/partials mapping $compile Compiles HTML with angular directives $http Service for low-level HTTP communication $resource High-level REST communication $log Abstraction of console.log ... November 7th, 2013 24 Copyright 2013 Demandware, Inc. All other rights reserved.
- 27. Module API config(configFn) Configuration function to be executed during module loading constant(name, object) Registration of an application-wide constant controller(name, ctor) Registration of a controller directive(name, ctor) Registration of a directive filter(name, ctor) Registration of a filter run(initFn) Run function to be executed directly before the application gets accessible by the user service(name, ctor) Registration of a constructor method that new is invoked on to retrieve an object factory(name, factory) Registration of a function that is responsible for creating an object provider(name, factory) Combination of factory and service, only providers are accessible in config invocations November 7th, 2013 25 Copyright 2013 Demandware, Inc. All other rights reserved.
- 28. Configuring couchdb CouchDB & Futon • Used version: 1.3.1 default.ini • Enable CORS [httpd] enable_cors = true [cors] origins = * November 7th, 2013 26 Copyright 2013 Demandware, Inc. All other rights reserved.