dutch angularjs

Mobile Development with AngularJS

+Kees de Kooter

Wednesday, July 3, 13

“The Web is the platform”


<html>


A Different Ballgame

• fixed viewport

• limited screen real estate

• no keyboard & mouse - touch!


Design Choices

• Native L&F

• Cross-Platformy?

• Custom?


The Stack

• Twitter Bootstrap CSS

• FontAwesome icons

• AngularJS

• flot for graphs

• Existing Java-Spring backend


Navigation


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>


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"); } }); };

}]);


Dialogs


<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>


Data entry(demo)


Context Menu


Instant Update


// 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();});


Security


$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); } ); }; });


$rootScope.$on('event:loginRequired', function () { window.location.href = '/metronome/login.page';});


https://metronome.nlFree for single use


https://metronome.nl

https://metronome.nl

dutch angularjs

Technology