WJAX 2012 - Web Apps With AngularJS
1 like589 views
This document introduces AngularJS, a JavaScript framework for building web applications in the browser. It discusses key AngularJS concepts like dependency injection, data binding, directives and services. It provides examples of how AngularJS implements dependency injection similarly to Java frameworks but without explicit scopes. The document demonstrates features like data binding, controllers and filters. It describes how AngularJS extends HTML with directives and handles views and routing. In conclusion, it highlights AngularJS benefits like separation of concerns, integration with other frameworks and an active community.
![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 };
}](https://image.slidesharecdn.com/wjax2012-webappswithangularjs-140224085828-phpapp02/85/WJAX-2012-Web-Apps-With-AngularJS-10-320.jpg)
![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 };
}](https://image.slidesharecdn.com/wjax2012-webappswithangularjs-140224085828-phpapp02/85/WJAX-2012-Web-Apps-With-AngularJS-11-320.jpg)
![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 };
}]](https://image.slidesharecdn.com/wjax2012-webappswithangularjs-140224085828-phpapp02/85/WJAX-2012-Web-Apps-With-AngularJS-12-320.jpg)
![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);](https://image.slidesharecdn.com/wjax2012-webappswithangularjs-140224085828-phpapp02/85/WJAX-2012-Web-Apps-With-AngularJS-13-320.jpg)
WJAX 2012 - Web Apps With AngularJS
- 2. About Me Philipp Burgmer Senior Software Engineer / Consultant WeigleWilczek GmbH burgmer@w11k.com Focus: Frontend, Web Technologies
- 3. 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
- 4. 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
- 5. 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
- 6. Core Concepts Model View Controller Pattern Two Way Data-Binding Dependency Injection Modules Services Directives Filter Separation of Concerns Testable Code
- 7. 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)
- 8. 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 } }
- 9. 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);
- 10. 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 }; }
- 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(a) { 5 function somethingPrivate() { } 6 7 return function() { 8 somethingPrivate(); 9 a.close(); 10 11 }; }
- 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', ['$window', function(a) { 5 function somethingPrivate() { } 6 7 return function() { 8 somethingPrivate(); 9 a.close(); 10 11 }; }]
- 13. 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);
- 14. 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);
- 15. Directives extend HTML Tags, Attributes, CSS classes encapsulate DOM manipulations proceeded by AngularJS compiler
- 16. Demo Blink on Steroids Speed (http://jsbin.com/ekevip/41/edit?live) New Tags with Directives (http://jsbin.com/onacoh/11/edit?live)
- 17. 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>
- 18. Demo Small crud app (http://jsbin.com/exevex/14/edit?live) -> with own URL bar: local This Presentation
- 19. Built-in Features Extensibility Embeddable Testable Code Templating Localization Validation REST support Async Code with Promises ...
- 20. 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 ...
- 21. 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!
- 22. Philipp Burgmer burgmer@w11k.com www.w11k.com (http://www.w11k.com) www.thecodecampus.de (http://www.thecodecampus.de)