Dutch angularjs
-
Upload
kees-de-kooter -
Category
Technology
-
view
1.254 -
download
4
description
Transcript of Dutch angularjs
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.nlFree for single use
Wednesday, July 3, 13