Dutch angularjs

963 views

Published on

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
963
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dutch angularjs

  1. 1. Mobile Development with AngularJS +Kees de Kooter Wednesday, July 3, 13
  2. 2. Wednesday, July 3, 13
  3. 3. Wednesday, July 3, 13
  4. 4. “The Web is the platform” Wednesday, July 3, 13
  5. 5. <html> Wednesday, July 3, 13
  6. 6. Wednesday, July 3, 13
  7. 7. Wednesday, July 3, 13
  8. 8. A Different Ballgame • fixed viewport • limited screen real estate • no keyboard & mouse - touch! Wednesday, July 3, 13
  9. 9. Design Choices • Native L&F • Cross-Platformy? • Custom? Wednesday, July 3, 13
  10. 10. Wednesday, July 3, 13
  11. 11. The Stack • Twitter Bootstrap CSS • FontAwesome icons • AngularJS • flot for graphs • Existing Java-Spring backend Wednesday, July 3, 13
  12. 12. Navigation Wednesday, July 3, 13
  13. 13. Directives <div class="row-fluid met-navbar"> <a class="met-toolbar-button met-float-left" href="#/" met-toolbar-button-active> <div class="met-toolbar-icon icon-home"></div> </a> <a class="met-toolbar-button met-float-left" href="#/history/" met-toolbar-button-active> <div class="met-toolbar-icon icon-archive"></div> </a> <a class="met-toolbar-button met-float-left" href="#/open-invoices/" met-toolbar-button-active> <div class="met-toolbar-icon icon-euro"></div> </a> </div> Wednesday, July 3, 13
  14. 14. metronomeApp.directive("metToolbarButtonActive", ['$location', function (location) { return function (scope, element, attrs) { var buttonHref = attrs.href.substr(1); scope.location = location; scope.$watch('location.path()', function (path) { if (path === buttonHref) { element.addClass("met-toolbar-button-active"); } else { element.removeClass("met-toolbar-button-active"); } }); }; }]); Wednesday, July 3, 13
  15. 15. Dialogs Wednesday, July 3, 13
  16. 16. <div class="container-fluid" met-show-app-header> <div class="met-header"> <div class="row-fluid"> <div class="span12 header"> <div met-header-logo></div> <div class="met-header-title ng-cloak">{{title}}</div> <div class="met-float-right"> <a id="addActivity" met-show-navigation                        class="icon-edit" href="#/edit-activity"></a> </div> </div> </div> Wednesday, July 3, 13
  17. 17. Data entry (demo) Wednesday, July 3, 13
  18. 18. Context Menu Wednesday, July 3, 13
  19. 19. Instant Update Wednesday, July 3, 13
  20. 20. // Activity Controller $scope.save = function () { $http.put('/metronome/m/activity', $scope.activity).then(function () { $rootScope.$broadcast("activitySaved"); window.history.back(); }); }; // Home Controller $rootScope.$on("activitySaved", function () { $scope.refresh(); }); Wednesday, July 3, 13
  21. 21. Security Wednesday, July 3, 13
  22. 22. $httpProvider.responseInterceptors.push(function ($rootScope, $q) { return function (promise) { return promise.then( //success -> don't intercept function (response) { return response; }, //error -> if 401 broadcast an event function (response) { if (response.status === 401) { ... var deferred = $q.defer(), req = { config: response.config, deferred: deferred }; $rootScope.$broadcast('event:loginRequired'); return deferred.promise; } return $q.reject(response); } ); }; }); Wednesday, July 3, 13
  23. 23. $rootScope.$on('event:loginRequired', function () { window.location.href = '/metronome/login.page'; }); Wednesday, July 3, 13
  24. 24. https://metronome.nl Free for single use Wednesday, July 3, 13

×