Dutch angularjs
Upcoming SlideShare
Loading in...5
×
 

Dutch angularjs

on

  • 1,063 views

 

Statistics

Views

Total Views
1,063
Views on SlideShare
1,063
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Dutch angularjs Dutch angularjs Presentation Transcript

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