Web Applications with AngularJS

1,013 views
842 views

Published on

An Introduction to the JavaScript MVC Framework AngularJS

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

  • Be the first to like this

No Downloads
Views
Total views
1,013
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Applications with AngularJS

  1. 1. Web Applications with
  2. 2. About Me Philipp Burgmer ▸ Senior Software Engineer / Consultant ▸ WeigleWilczek GmbH ▸ burgmer@w11k.com ▸ Focus: Frontend, Web Technologies
  3. 3. About Us WeigleWilczek / W11k ▸ Software Design, Development & Maintenance ▸ Consulting and Coaching ▸ Web Applications ▸ Eclipse RCP ▸ Java / JVM
  4. 4. Web Apps until now ▸ GWT ▪ UI in Java / XML ▪ hard to use JS libs / scatters ui logic ▪ "Java World" instead of "Web World" ▸ JSF ▪ UI on Server ▪ a lot HTTP requests just to update UI ▪ hard to use JS libs / scatters ui logic ▸ Flex ▪ based on Flash ▪ Adobe discontinues developement ▪ MXML and ActionScript instead of HTML and JavaScript
  5. 5. Web Apps from now on ▸ Frontend runs completely in the browser ▸ Stateful UI, stateless server ▸ Server delivers static resources ▸ Server delivers dynamic data ▸ HTML, CSS and JavaScript as UI Toolkit
  6. 6. What is AngularJS? HTML enhanced for web apps! angularjs.com ▸ client / browser JS framework ▸ rich browser applications ▸ brings core frontend concepts and features to the browser ▸ extends html instead of abstracting or wrapping it ▸ lets you extend html to fit your needs
  7. 7. Core Concepts ▸ Model View Controller Pattern ▸ Two Way Data-Binding ▸ Dependency Injection ▸ Modules ▸ Services ▸ Directives ▸ Filter ▸ Separation of Concerns ▸ Testable Code
  8. 8. Demo ▸ Two Way Data-Binding (http://jsbin.com/atufut/14/edit?live) ▸ Add Logic with a Controller (http://jsbin.com/igoxuj/15/edit?live) ▸ Format Values with Filters (http://jsbin.com/esavog/13/edit?live)
  9. 9. Dependency Injection Java with Google Guice 1 // no dependency management 2 public class MyModule extends AbstractModule { 3 protected void configure() { 4 // bind with interface 5 bind(Service.class).to(ServiceImpl.class); 6 // bind with scope 7 bind(OtherService.class).in(Singleton.class); 8 // bind with alias 9 bindConstant().annotatedWith(Names.named("port")).to(8080); 10 11 } }
  10. 10. Dependency Injection Java with Google Guice 1 @Singleton 2 public class ServiceImpl { 3 @Inject 4 public ServiceImpl(final OtherService otherService) { } 5 } 1 // manual or by configured framework 2 final Injector injector = Guice.createInjector(new MyModule()); 3 final Service service = injector.getInstance(Service.class);
  11. 11. Dependency Injection JavaScript with AngularJS 1 // dependency management and di configuration 2 angular.module('myModule', ['moduleOfOtherLibrary']) 3 // no scopes, services are singletons by definition 4 .service('usefulService', function($window) { 5 function somethingPrivate() { } 6 7 return function() { 8 somethingPrivate(); 9 $window.close(); 10 11 }; }
  12. 12. Dependency Injection JavaScript with AngularJS 1 // dependency management and di configuration 2 angular.module('myModule', ['moduleOfOtherLibrary']) 3 // no scopes, services are singletons by definition 4 .service('usefulService', function(a) { 5 function somethingPrivate() { } 6 7 return function() { 8 somethingPrivate(); 9 a.close(); 10 11 }; }
  13. 13. Dependency Injection JavaScript with AngularJS 1 // dependency management and di configuration 2 angular.module('myModule', ['moduleOfOtherLibrary']) 3 // no scopes, services are singletons by definition 4 .service('usefulService', ['$window', function(a) { 5 function somethingPrivate() { } 6 7 return function() { 8 somethingPrivate(); 9 a.close(); 10 11 }; }]
  14. 14. Dependency Injection JavaScript with AngularJS 1 var service = function(a) { 2 return function() { 3 4 a.close(); } 5 } 6 service.$inject = ['$window']; 7 8 angular.module('myModule', ['moduleOfOtherLibrary']) 9 .service('usefulService', service);
  15. 15. Dependency Injection Additional parameters and overridden DI values 1 // get the injector via static call 2 var $injector = angular.injector(); 3 // or via injection 4 function($injector) { } 1 var functionA = function(serviceA) { }; 2 $inject.invoke(functionA); 3 4 var functionB = function(serviceA, nonDIValue) { }; 5 var locals = { nonDIValue: 1 }; 6 $inject.invoke(functionB, locals);
  16. 16. Directives ▸ extend HTML ▸ Tags, Attributes, CSS classes ▸ encapsulate DOM manipulations ▸ proceeded by AngularJS compiler
  17. 17. Demo ▸ Blink on Steroids Speed (http://jsbin.com/ekevip/41/edit?live) ▸ New Tags with Directives (http://jsbin.com/onacoh/11/edit?live)
  18. 18. Views & Routes ▸ Deep linking ▸ Partial Views / Templating 1 angular.module('route.something').config(function ($routeProvider) { 2 $routeProvider.when('/something/:id/', { 3 templateUrl : "route/something.tpl.html", 4 controller : 'SomethingCtrl' 5 }) 6 }); 1 angular.module('myApp').config(function ($routeProvider) { 2 $routeProvider.otherwise({ 3 redirectTo: '/home' 4 }); 1 <div class="header">...<&div> 2 <div class="content"> 3 <div ng-view></div> 4 </div> 5 <div class="footer">...<&div>
  19. 19. Demo ▸ Small crud app (http://jsbin.com/exevex/14/edit?live) -> with own URL bar: local ▸ This Presentation
  20. 20. Animations ▸ new in Version 1.2 ▸ ng-repeat ▸ easy to use ▸ ng-view ▸ plain CSS Animations and Transitions ▸ ng-include ▸ CSS classes for 'enter', 'move' and 'leave' ▸ ng-show ▸ custom JS functions possible ▸ ng-hide ▸ directives must support ng-animate
  21. 21. Demo ▸ ng-repeat (http://jsbin.com/upedez/7/edit?live) ▸ ng-view (http://jsbin.com/ixapay/4/edit?live) ▸ Fancy stuff: bouncy balls (http://jsbin.com/uwiyer/21/edit?live)
  22. 22. Built-in Features ▸ Extensibility ▸ Embeddable ▸ Testable Code ▸ Templating ▸ Localization ▸ Validation ▸ REST support ▸ Async Code with Promises ▸ ...
  23. 23. Built-in Features Directives Filter Services ▸ ng-click ▸ currency ▸ http ▸ ng-class ▸ date ▸ location ▸ ng-show / ng-hide ▸ filter ▸ log ▸ ng-include ▸ json ▸ q ▸ ng-view ▸ limitTo ▸ resource ▸ ng-pluralize ▸ lowercase ▸ route ▸ ng-repeat ▸ number ▸ timeout ▸ ng-submit ▸ orderBy ▸ window ▸ ... ▸ uppercase ▸ ...
  24. 24. Eco System (http://www.gruntjs.com) Bower (http://www.bower.io) Bootstrap (http://www.git-scm.com) Task Runner / Build System Dependency Management for 3rd party libs Front-End Framework Styling & Layout (http://www.git-scm.com) (http://www.nodejs.org) (http://www.git-scm.com) CSS Extension Language Version Control System Runtime for Dev Tools / Backend Environment
  25. 25. Conclusion ▸ Clean separation of Frontend and Backend ▸ Features like DI, MVC and DataBinding in the browser ▸ Seamless integration with other frameworks ▸ Lets you use all the cool new Web / JS tools ▸ Easy to learn ▸ Documentation with a lot of runnable examples ▸ Large community and fast growing eco system ▸ powered and used by Google Try it!
  26. 26. Philipp Burgmer burgmer@w11k.com www.w11k.com (http://www.w11k.com) www.thecodecampus.de (http://www.thecodecampus.de)

×