Karlsruher Entwicklertag 2013
Web Applications with
About Me
Philipp Burgmer
Senior Software Engineer / Consultant
WeigleWilczek GmbH
burgmer@w11k.com
Focus: Frontend, Web Te...
About Us
WeigleWilczek / W11k
Software Design, Development & Maintenance
Consulting and Coaching
Web Applications
Eclipse ...
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...
Web Apps from now on
Frontend runs completely in the browser
Stateful UI, stateless server
Server delivers static resource...
What is AngularJS?
HTML enhanced for web apps!
angularjs.com
client / browser JS framework
rich browser applications
bring...
Core Concepts
Model View Controller Pattern
Two Way Data-Binding
Dependency Injection
Modules
Services
Directives
Filter
S...
Demo
Two Way Data-Binding (http://jsbin.com/atufut/14/edit?live)
Add Logic with a Controller (http://jsbin.com/igoxuj/15/e...
Dependency Injection
Java with Google Guice
1 // no dependency management
2 public class MyModule extends AbstractModule {...
Dependency Injection
Java with Google Guice
1 @Singleton
2 public class ServiceImpl {
3

@Inject

4

public ServiceImpl(fi...
Dependency Injection
JavaScript with AngularJS
1 // dependency management and di configuration
2 angular.module('myModule'...
Dependency Injection
JavaScript with AngularJS
1 // dependency management and di configuration
2 angular.module('myModule'...
Dependency Injection
JavaScript with AngularJS
1 // dependency management and di configuration
2 angular.module('myModule'...
Dependency Injection
JavaScript with AngularJS
1 var service = function(a) {
2

return function() {

3
4

a.close();
}

5 ...
Dependency Injection
Additional parameters and overridden DI values
1 // get the injector via static call
2 var $injector ...
Directives
extend HTML
Tags, Attributes, CSS classes
encapsulate DOM manipulations
proceeded by AngularJS compiler
Demo
Blink on Steroids Speed (http://jsbin.com/ekevip/41/edit?live)
New Tags with Directives (http://jsbin.com/onacoh/11/e...
Views & Routes
Deep linking
Partial Views / Templating
1 angular.module('route.something').config(function ($routeProvider...
Demo
Small crud app (http://jsbin.com/exevex/14/edit?live) -> with own URL bar: local
This Presentation
Animations
new in Version 1.2
easy to use
plain CSS Animations and Transitions
CSS classes for 'enter', 'move' and 'leave'...
Demo
ng-repeat (http://jsbin.com/upedez/7/edit?live)
ng-view (http://jsbin.com/ixapay/4/edit?live)
Fancy stuff: bouncy bal...
Built-in Features
Extensibility
Embeddable
Testable Code
Templating
Localization
Validation
REST support
Async Code with P...
Built-in Features
Directives
ng-click
ng-class
ng-show / ng-hide
ng-include
ng-view
ng-pluralize
ng-repeat
ng-submit
...

...
Eco System

(http://www.gruntjs.com)

Bower (http://www.bower.io)

Bootstrap (http://www.git-scm.com)

Task Runner / Build...
Conclusion
Clean separation of Frontend and Backend
Features like DI, MVC and DataBinding in the browser
Seamless integrat...
Philipp Burgmer
burgmer@w11k.com
www.w11k.com (http://www.w11k.com)
www.thecodecampus.de (http://www.thecodecampus.de)
Upcoming SlideShare
Loading in...5
×

Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS

575

Published on

Meine Präsentation über AngularJS für den Karlsruher Entwicklertag 2013.

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

No Downloads
Views
Total Views
575
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS

  1. 1. Karlsruher Entwicklertag 2013 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 easy to use plain CSS Animations and Transitions CSS classes for 'enter', 'move' and 'leave' custom JS functions possible directives must support ng-animate ng-repeat ng-view ng-include ng-show ng-hide
  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 ng-click ng-class ng-show / ng-hide ng-include ng-view ng-pluralize ng-repeat ng-submit ... Filter currency date filter json limitTo lowercase number orderBy uppercase Services http location log q resource route timeout window ...
  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)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×