Convert angular app to ionic

ionic-v1
1

I have a working angular + RequireJs application. I try to run it on Android using ionic. So I added the required dependencies:

  • ionic
  • ionic-angular
  • angular-animate
  • angular-sanitize
  • cordova

When I run it using genymotion emulator I get a blank page.

Q: Is there some kind of console to see what’s going on?

Here is the trace when running the app from the browser:

Serving HTTP on 0.0.0.0 port 8000 ...
3dns.adobe.com - - [14/May/2014 21:27:00] "GET / HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:00] "GET /lib/bootstrap.css HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:00] "GET /css/app.css HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:00] "GET /lib/require.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:01] code 404, message File not found
3dns.adobe.com - - [14/May/2014 21:27:01] "GET /lib/bootstrap.css.map HTTP/1.1" 404 -
3dns.adobe.com - - [14/May/2014 21:27:01] "GET /js/require-module.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:02] code 404, message File not found
3dns.adobe.com - - [14/May/2014 21:27:02] "GET /cordova.js HTTP/1.1" 404 -
3dns.adobe.com - - [14/May/2014 21:27:02] "GET /lib/ionic/js/ionic.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:02] "GET /lib/ionic/js/angular/angular.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:02] "GET /lib/jquery.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:02] "GET /lib/angular-ui-router.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:03] "GET /lib/angular-resource.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:03] "GET /lib/ui-bootstrap-tpls.min.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:03] "GET /lib/angular-translate.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:03] "GET /lib/ionic/js/angular/angular-animate.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:03] "GET /lib/ionic/js/angular/angular-sanitize.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:03] "GET /lib/dropdown.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:03] "GET /lib/angular-translate-loader-static-files.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:03] "GET /lib/ionic/js/ionic-angular.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:03] "GET /js/app.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:04] "GET /js/filters.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:04] "GET /js/services.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:04] "GET /js/directives.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:04] "GET /js/controllers.js HTTP/1.1" 200 -
3dns.adobe.com - - [14/May/2014 21:27:04] "GET /js/states.js HTTP/1.1" 200 -

The code to run the app:

require(['ionic','angular', 'cordova', 'myApp'], function (ionic, angular, cordova) {
    'use strict';
    angular.bootstrap(document, ['mean']);
});

and the app:

define([
	'angular',
	'filters',
	'services',
	'directives',
	'controllers',
	'states'
	], function (angular) {
		'use strict';

		var app = angular.module('mean', [
			'ionic',
			'ui.router.compat',
			'ngResource',
			'pascalprecht.translate',
			'ui.bootstrap',
			'mean.controllers',
			'mean.filters',
			'mean.services',
			'mean.directives',
			'mean.states'
		]);

		app.config(function ($translateProvider) {
			$translateProvider.useStaticFilesLoader({
				prefix: 'i18n/mean_',
				suffix: '.json'
			});
			$translateProvider.preferredLanguage('en');
		});

		app.config(['$locationProvider', function ($locationProvider) {
			$locationProvider.html5Mode(true);
		}
		]);

});
2

Can you run this in the browser at all?

3

In development mode in the browser, I also get a blank page because RequireJs does not find cordova.js which is required. If I remove that dependency in the browser, the application is working.

require(['ionic','angular', 'myApp'], function (ionic, angular) {
    'use strict';
    angular.bootstrap(document, ['mean']);
});

So I am wondering if it can be the same issue in Genymotion. But with no trace from the emulator it’s hard to find.