Showcase: De Kust www.extradeluxe.be

We’ll show you how we created the visual experience of De Kust Extra Deluxe (www.extradeluxe.be). An interesting project that showcases the power of AngularJS for creating immersive campaign websites. We’ll explain how we used promises to control the flow of the application and how we implemented html5 pushState and content versioning.

On April 9th 2014 we've shared our experiences in AngularJS with the Belgian AngularJS meetup group. 72 people joined us to see what we had to say. In case you missed it, don't worry you'll find everything you need here: http://bit.ly/angularmeetup

Transcript

3. How?
4. Directive Teach HTML new tricks http://docs.angularjs.org/guide/directive
5. Promises A promise represents the eventual result of an asynchronous operation. It can have three states: pending, resolved, rejected http://docs.angularjs.org/api/ng/service/$q
6. Animations angular.module('tvlKustApp') .constant('videos', { 'main': ['intro', 'loop'], 'de-panne': ['zoomIn', 'loop', 'zoomOut'], 'blankenberge': ['zoomIn', 'loop', 'zoomOut'], 'bredene': ['zoomIn', 'loop', 'zoomOut'], 'de-haan': ['zoomIn', 'loop', 'zoomOut'], 'knokke': ['zoomIn', 'loop', 'zoomOut'], 'koksijde': ['zoomIn', 'loop', 'zoomOut'], 'middelkerke': ['zoomIn', 'loop', 'zoomOut'], 'nieuwpoort': ['zoomIn', 'loop', 'zoomOut'], 'oostende': ['zoomIn', 'loop', 'zoomOut'], 'zeebrugge': ['zoomIn', 'loop', 'zoomOut'], 'competition': ['zoomIn', 'loop', 'zoomOut'] });
7. Media Directives
9. . . .
10. . . .
11. ZoomOu t
12. . . .
13. Preloader
14. . . . TVL Preloader updateToLoad Preloader Service 1 updateLoaded 2 getLoadedTotal 3 W 25%
15. . . . TVL Preloader START
16. Transition Route Brugge > Oostende
17. . . . TVL Preloader START
18. . . . TVL Preloader START
19. Route resolve angular.module('tvlKustApp') .constant('routes', { 'main': { 'route': '/', 'controller': 'MainCtrl', 'template': 'main.html', 'section': 'main' }, 'detail_de_panne': { 'route': '/de-panne', 'controller': 'DetailCtrl', 'template': 'detail.html', 'section': 'de-panne', 'config': true } ... }); var resolve = { 'video': ['$rootScope', 'videoService', 'preloaderService', $rootScope.playingAnimation = true; return preloaderService.finished().then(function() { return videoService.play(routeConfig.section).then(function() { $rootScope.playingAnimation = false; }); }); }] }; function($rootScope, videoService, preloaderService) {
20. . . . TVL Preloader START
21. . . . TVL Preloader START
22. . . . TVL Preloader START P P Play Play Zoom In
23. . . . TVL Preloader START P P Play Play Loop
24. . . . TVL Preloader START
25. . . . TVL Preloader START
26. HTML5 PushState Support
27. Dev environment var _ = require('lodash'), _s = require('underscore.string'), path = require('path'), pushState = require('grunt-connect-pushstate/lib/utils').pushState, mountFolder = function(connect, dir) { return connect.static(path.resolve(dir)); }; module.exports = function (grunt) { ... connect: { options: { port: 9000, hostname: '0.0.0.0', livereload: 35729 }, livereload: { options: { open: true, middleware: function(connect, options, middlewares) { middlewares PLGGOHZDUHV__Ǭ>@ middlewares.push(pushState()); middlewares.push(mountFolder(connect, '.tmp')); middlewares.push(mountFolder(connect, config.yeoman.app)); return middlewares; }
28. Prod environment (apache2) <IfModule mod_rewrite.c> RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} !index RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|svg|jpg|eot|ttf|woff|json) RewriteRule (.*) index.html [L] </IfModule>
29. Prod environment (Silex) Webserver in PHP - Inject some custom html in our index.html - Could also be done with Node.js
30. Content Revisioning
31. Content revisioning • grunt-filerev - keeps a mapping between filename and revved filename • custom grunt task - injects mapping in angular app • $http interceptor - checks mapping and rewrites url to revved url if necessary • custom ngSrc directive - also checks mapping
32. Q&A