karlsruher entwicklertag 2013 to use plain css animations and transitions css class names for...
TRANSCRIPT
Web Applications with
Karlsruher Entwicklertag 2013
Philipp BurgmerSenior Software Engineer / ConsultantWeigleWilczek [email protected] Focus: Frontend, Web Technologies
About me
GWTUI in Java / XMLhard to use JS libs / scatters ui logic"Java World" instead of "Web World"
JSFUI on Servera lot HTTP requests just to update UIhard to use JS libs / scatters ui logic
Flexbased on FlashAdobe discontinues developement
Web Apps until now
MXML and ActionScript instead of HTML and JavaScript
Frontend runs completely in the browserStateful UI, stateless serverServer delivers static resourcesServer delivers dynamic dataHTML, CSS and JavaScript as UI Toolkit
Web Apps from now on
HTML enhanced for web apps!angularjs.com
client / browser JS frameworkrich browser applicationsbrings core frontend concepts and features to the browserextends html instead of abstracting or wrapping itlets you extend html to fit your needs
What is AngularJS?
Model View Controller PatternTwo Way Data-BindingDependency InjectionModulesServicesDirectivesFilter
Separation of ConcernsTestable Code
Core Concepts
Two Way Data-BindingAdd Logic with a ControllerFormat Values with FiltersAdjust markup with Filters
Demo
extend HTMLTags, Attributes, CSS classesencapsulate DOM manipulationsproceeded by AngularJS compiler
Directives
Blink on Steroids SpeedNew Tags with Directives
Demo
Deep linkingPartial Views / Templating
angularjs.com
Views & Routes
function $RouteProvider(){
this.when = function(path, route) { };
this.otherwise = function(params) { );
this.$get = function($rootScope, $location, $routeParams, $q, $injector, $http, $templateCache) {
...
return $route;
};
}
Small crud app -> with own URL bar: localFancy stuff: bouncy ballsThis Presentation
Demo
new in Version 1.2easy to useplain CSS Animations and TransitionsCSS class names for 'enter', 'move' and 'leave'custom JS functions possibleopen for animation libsdirectives must support ng-animate
ng-repeatng-viewng-includeng-showng-hide
Animations
ng-repeatng-view
Demo
ExtensibilityTemplatingLocalizationValidationREST supportEmbeddableTestable
Built-in Features
Directivesng-clickng-classng-show / ng-hideng-includeng-viewng-pluralizeng-repeatng-submit...
FiltercurrencydatefilterjsonlimitTolowercasenumberorderByuppercase
Serviceshttplocationlogqresourceroutetimeoutwindow...
Built-in Features
Clean separation of Frontend and BackendFeatures like DI, MVC and DataBinding in the browserSeamless integration with other frameworksLets you use all the cool new Web / JS tools
Easy to learnDocumentation with a lot of runnable examplesLarge community and fast growing eco systempowered and used by Google
Try it!
Conclusion
Philipp [email protected]
Java with Google Guice
Dependency Injection
// no dependency management
public class MyModule extends AbstractModule {
protected void configure() {
// bind with interface
bind(Service.class).to(ServiceImpl.class);
// bind with scope
bind(OtherService.class).in(Singleton.class);
// bind with alias
bindConstant().annotatedWith(Names.named("port")).to(8080);
}
}
Java with Google Guice
Dependency Injection
@Singleton
public class ServiceImpl {
@Inject
public ServiceImpl(final OtherService otherService) { }
}
// manual or by configured framework
final Injector injector = Guice.createInjector(new MyModule());
final Service service = injector.getInstance(Service.class);
JavaScript with AngularJS
Dependency Injection
// dependency management and di configuration
angular.module('myModule', ['moduleOfOtherLibrary'])
// no scopes, services are singletons by definition
.service('usefulService', function($window) {
function somethingPrivate() { }
return function() {
somethingPrivate();
$window.close();
}
};
JavaScript with AngularJS
Dependency Injection
// dependency management and di configuration
angular.module('myModule', ['moduleOfOtherLibrary'])
// no scopes, services are singletons by definition
.service('usefulService', function(a) {
function somethingPrivate() { }
return function() {
somethingPrivate();
a.close();
}
};
JavaScript with AngularJS
Dependency Injection
// dependency management and di configuration
angular.module('myModule', ['moduleOfOtherLibrary'])
// no scopes, services are singletons by definition
.service('usefulService', ['$window', function(a) {
function somethingPrivate() { }
return function() {
somethingPrivate();
a.close();
}]
};
JavaScript with AngularJS
Dependency Injection
var service = function(a) {
return function() {
a.close();
}
}
service.$inject = ['$window'];
angular.module('myModule', ['moduleOfOtherLibrary'])
.service('usefulService', service)
.constant('port', 80)
Additional parameters and overridden DI values
Dependency Injection
// get the injector via static call
var $injector = angular.injector();
// or via injection
function($injector) { }
var functionA = function(serviceA) { };
$inject.invoke(functionA);
var functionB = function(serviceA, nonDIValue) { };
var locals = { nonDIValue: 1 };
$inject.invoke(functionB, locals);
Philipp [email protected]