Dieses Tutorial beschäftigt sich ausschließlich mit der Nutzung von AngularJS in Kombination mit RequireJS und dem Ionic Framework. Wer noch keinen Einblick in AngularJS oder RequireJS hat, sollte sich daher zunächst unser Tutorial über AngularJS zum Einstieg und AngularJS + RequireJS anschauen.
Warum ein Tutorial über drei verschiedene Frameworks?
Dieses kleine Tutorial ist entstanden, da ich selbst in das eine oder andere Fettnäpfchen bei der Kombination dieser Technologien getreten bin.
Was ist Ionic Framework?
Ionic Framework ist noch ein relativ junges, aber schon recht umfangreiches Framework für die Erstellung mobiler Apps. Es wird vor allem in Verbindung mit AngularJS genutzt. Dokumentation, Beispiele und Hilfe dazu gibt es auf der Projekt Homepage.
Voraussetzungen
- AngularJS
- ionic-angular.min.js, ionic.min.js (und die Abhängigkeiten) – nicht das Bundle!
- RequireJS
- App mit RequireJS
Umsetzung bis Version 1.0.0-beta12
Zuerst muss ionic-angular.min.js in die Abhängigkeiten von RequireJS aufnehmen.
Dazu wird die Konfigurationsdatei geöffnet und wie folgt angepasst:
require.config({
baseUrl: 'app',
paths: {
'angular': '../lib/angular.min',
'angular_ionic': '../lib/ionic-angular.min'
...
},
shim: {
'angular' : { 'exports' : 'angular' },
'angular_ionic': [...]
},
priority: [
'angular',
'angular-ionic'
],
callback: function () {
'use strict';
require([
'angular',
'routes'
], function (angular) {
// init app
angular.bootstrap(document, ['app']);
});
}
});
Nun muss die ionic.min.js in der index.html vor RequireJS eingebunden werden.
<!DOCTYPE html>
<html>
<head>
<script src="lib/ionic.min.js" type="text/javascript"></script>
<script src="lib/requirejs/requirejs.min.js" data-main="app/main"></script>
</head>
<body>
</body>
</html>
Als letztes können wir angular-ionic und ionic zu den Abhängigkeiten unserer App hinzufügen.
define([
'angular',
'angular_ionic'
], function (angular) {
'use strict';
return angular.module('app', [
'ionic'
]);
});
Benutzt man das ionic-bundle oder versucht die ionic Quelle nicht über die index.html, sondern auch über RequireJS einzubinden, kommt es zu Seiteneffekten zwischen AngularJS und Ionic.
Diese äußern sich unter anderem dadurch, dass z.B. Klick-Events mehrfach ausgelöst werden.
Anwendungsfälle
Das Ionic Framework steht noch in der Anfangsphase, hat aber großes Potential. Wer schon immer mal eine mobile App mit AngularJS erstellen wollte, kann sich Ionic ruhigen Gewissens einmal anschauen.
Update: 21.12.2014 – v1.0.0-beta.14 “magnesium-mongoose”
Neue Umsetzung
In der Zwischenzeit hat sich einiges getan. Nun ist es möglich auch die ionic(.min).js über RequireJS zu laden. Dadurch wird die index.html noch aufgeräumter und unsere RequireJS-Konfigurationsdatei kann an das Ende vom Body-Tag verschoben werden.
<pre class="lang:default decode:true" title="main.js">require.config({
baseUrl: 'app',
paths: {
'angular': '../lib/angular.min',
'angular_ionic': '../lib/ionic-angular.min',
'ionic': '../lib/ionic.min',
...
},
shim: {
'angular' : { 'exports' : 'angular' },
'ionic': { deps: ['angular'], exports: 'ionic' },
'angular_ionic': ['angular', 'ionic', 'angular_sanitize', 'angular_animate', 'angular_route', 'angular_uirouter'],
},
priority: [
'angular',
'angular-ionic',
],
callback: function () {
'use strict';
require([
'angular',
'routes'
], function (angular) {
// init app
angular.bootstrap(document, ['app']);
});
}
});</pre>
Unsere index.html sieht dann wie folgt aus:
<!DOCTYPE html>
<html>
<head>
<title>Meine App</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Style -->
<link rel="stylesheet" href="resources/css/app.css">
<!-- Scripts -->
<script src="phonegap.js" type="text/javascript"></script>
</head>
<body>
<!-- Seiteninhalt -->
<script src="lib/requirejs/requirejs.min.js" data-main="app/main"></script>
</body>
</html>
