Going Mobile: AngularJS and PhoneGap

Post on 09-May-2015

378 views 0 download

Transcript of Going Mobile: AngularJS and PhoneGap

+

Irman AbdićInformatics, TU München

Going

Mobile

Phonegap

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

+ 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"]);

Development

Phonegap Developer App

ngTouch

ngClickngSwipeRight

ngSwipeLeft

$parent

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

</div>

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

$scope.$parent.<variable>

USE CAREFULLY

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

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

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

// Dummy comment});

Do not...

...refer to online static resources.

style.css:

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

Do not...

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

Use .onDeviceReady(...); instead.

Do not...

...expect fluent animations / transitions.

Do not...

...use jQuery Mobile.

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

Further Discussion

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

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.