Going Mobile: AngularJS and PhoneGap

15
+ Irman Abdić Informatics, TU München Going Mobile

Transcript of Going Mobile: AngularJS and PhoneGap

Page 1: Going Mobile: AngularJS and PhoneGap

+

Irman AbdićInformatics, TU München

Going

Mobile

Page 2: Going Mobile: AngularJS and PhoneGap

Phonegap

Easily create apps using the web technologies you know and love.

Page 3: Going Mobile: AngularJS and PhoneGap

+ AngularJs

...

<script src="angular.min.js"></script><script src="angular-touch.min.js"></script><script src="ng-cordova.js"></script><script src="cordova.js"></script>

</body>

var myapp = angular.module("app", ["ngCordova", "ngTouch"]);

Page 4: Going Mobile: AngularJS and PhoneGap

Development

Page 5: Going Mobile: AngularJS and PhoneGap

Phonegap Developer App

Page 6: Going Mobile: AngularJS and PhoneGap

ngTouch

ngClickngSwipeRight

ngSwipeLeft

Page 7: Going Mobile: AngularJS and PhoneGap

$parent

<div ng-controller="ParentCtrl"><ng-view></ng-view>

</div>

$routeProvider.when('/dashboard', {templateUrl: 'template/dashboard.html', controller: 'DashboardCtrl'})...

$scope.$parent.<variable>

USE CAREFULLY

Page 8: Going Mobile: AngularJS and PhoneGap

module.controller('MyCtrl', function($scope, $cordovaContacts) {$scope.addContact = function() {

$cordovaContacts.save($scope.contactForm).then(function(result) {

// Contact saved }, function(err) { // Contact error }); };

// Dummy comment});

Page 9: Going Mobile: AngularJS and PhoneGap
Page 10: Going Mobile: AngularJS and PhoneGap

Do not...

...refer to online static resources.

style.css:

@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans);

Page 11: Going Mobile: AngularJS and PhoneGap

Do not...

...use .ready(...);

Use .onDeviceReady(...); instead.

Page 12: Going Mobile: AngularJS and PhoneGap

Do not...

...expect fluent animations / transitions.

Page 13: Going Mobile: AngularJS and PhoneGap

Do not...

...use jQuery Mobile.

...especially together with jqm-angular-adapter!

Page 14: Going Mobile: AngularJS and PhoneGap

Further Discussion

Irman Abdićirmanabdic.comhttps://twitter.com/irmanabdichttps://linkedin.com/in/irmanabdic

Page 15: Going Mobile: AngularJS and PhoneGap

Testing Phonegap

https://wiki.apache.org/cordova/RunningTests

The device api tests live in a project called mobile-spec.

They run in an Apache Cordova shell:Create an Apache Cordova project and include the test suite in the www folder. The tests will run when the application is launched.

There are two parts to the Mobile Spec:

1. a suite of Jasmine tests that assert things about the Cordova JavaScript API.Load mobile-spec up on your device, hit the "Automatic Tests" button, select which specific API to test (or select "all" to run them all).

2. a series of "manual" tests.Linked from the project's root page. Run through each one to make sure baseline functionality works as expected.