Your SlideShare is downloading. ×
  • Like
Dutch angularjs
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
686
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobile Development with AngularJS +Kees de Kooter Wednesday, July 3, 13
  • 2. Wednesday, July 3, 13
  • 3. Wednesday, July 3, 13
  • 4. “The Web is the platform” Wednesday, July 3, 13
  • 5. <html> Wednesday, July 3, 13
  • 6. Wednesday, July 3, 13
  • 7. Wednesday, July 3, 13
  • 8. A Different Ballgame • fixed viewport • limited screen real estate • no keyboard & mouse - touch! Wednesday, July 3, 13
  • 9. Design Choices • Native L&F • Cross-Platformy? • Custom? Wednesday, July 3, 13
  • 10. Wednesday, July 3, 13
  • 11. The Stack • Twitter Bootstrap CSS • FontAwesome icons • AngularJS • flot for graphs • Existing Java-Spring backend Wednesday, July 3, 13
  • 12. Navigation Wednesday, July 3, 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. 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. Dialogs Wednesday, July 3, 13
  • 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. Data entry (demo) Wednesday, July 3, 13
  • 18. Context Menu Wednesday, July 3, 13
  • 19. Instant Update Wednesday, July 3, 13
  • 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. Security Wednesday, July 3, 13
  • 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. $rootScope.$on('event:loginRequired', function () { window.location.href = '/metronome/login.page'; }); Wednesday, July 3, 13
  • 24. https://metronome.nl Free for single use Wednesday, July 3, 13