Entwicklung & Design

App-Entwicklung leicht gemacht: Mit Ionic, AngularJS und ngCordova zur mobilen Applikation

Seite 2 / 3

Erste Schritte

Ionic verfügt über einen eingebauten Webserver für die Entwicklung. Dieser überwacht Änderungen im Quellcode und aktualisiert automatisch den Browser (live­reload). Nach der Navigation zu unserem Projekt muss dieser Webserver nun gestartet werden:

Webserver starten

$ cd toDoApp 
$ ionic serve

Listing 3

Es öffnet sich der Standardbrowser unter dem betreffenden Link und zeigt unser Ionic-Projekt an.

To-dos anzeigen und anlegen

Um zusätzliche Logik definieren zu können, muss im body-Attribut mit ng­controller ein Controller angegeben werden. Dann werden die To-dos mit ng­repeat aus dem $scope ausgegeben.

Ausgabe der To-dos

[...] 
<body ng-app="starter" ng-controller="ToDoController">
          [...] 
          <ion-pane>
                     <ion-header-bar class="bar-stable"> 
                                 <h1 class="title">Ionic Blank Starter</h1>
                     </ion-header-bar> 
                     <ion-content>
                                 <ion-checkbox data-ng-repeat="toDo in toDos" 
                                                                  data-ng-model="toDo.done">
                                     <span data-ng-bind="toDo.title"></span>
                                 </ion-checkbox>
                     </ion-content>
          </ion-pane> 
</body>
[...]

Listing 4

Die Elemente ion­pane, ion­header­bar und ion­content sind AngularJS-Direktiven, die Ionic zur Verfügung stellt, erkennbar durch das Präfix „ion“. Die hier genutzten Direktiven sind relativ selbsterklärend und definieren die einzelnen Bereiche der Oberfläche.

Der folgende Code erstellt den Controller in JavaScript:

Controller

var app = angular.module('starter', ['ionic']);
app.controller("ToDoController", function($scope)
          $scope.toDos = [
                    {
                              title:"Müllrausbringen",
                              done:false 
                    },
                    {
                              title:"Bildaufhängen",
                              done:false
                    },
                    {
                              title:"Staubsaugen", 
                              done:false
                    }
           ];
});

Listing 5

Per ngrepeat werden die To-dos mit ihrem Status angezeigt. (Screenshot: ngCordova)

Per ngrepeat werden die To-dos mit ihrem Status angezeigt. (Screenshot: ngCordova)

Jetzt werden die ersten To-dos mit Checkboxen in unserer Liste angezeigt. Für das Anlegen neuer To-dos wird nun ein Button in die Header-Leiste eingefügt. Dieser öffnet einen Dialog zur Eingabe des Aufgabentitels. Die Integration des Buttons in die ion­header­bar-Direktive erfolgt mit den entsprechenden CSS-Klassen:

Button

[...]
<ion-header-bar class="bar-stable">
          <h1 class="title">Meine To Do Liste</h1> 
          <button class="buttonicon-leftion-plus"
                    data-ng-click="createToDo()">Hinzufügen</button> 
</ion-header-bar>
[...]

Listing 6

Im Popup-Dialog kann der Nutzer neue Aufgaben anlegen, die AngularJS anschließend automatisch der HTML-Liste hinzufügt. (Screenshot: ngCordova)

Im Popup-Dialog kann der Nutzer neue Aufgaben anlegen, die AngularJS anschließend automatisch der HTML-Liste hinzufügt. (Screenshot: ngCordova)

Die in ngClick angegebene Methode muss nun im Controller angelegt werden. Der Service $ionicPopup soll hier die Aufgabe übernehmen, das Popup anzuzeigen. Dieser muss als Parameter in der Controller-Funktion angegeben werden. Jetzt öffnet sich beim Tippen auf „Hinzufügen“ ein Popup. Nachdem der Nutzer den gewünschten Titel eingegeben hat, wird das To-do auf das Array gelegt, und AngularJS aktualisiert automatisch die Liste im HTML.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

6 Kommentare
Oliver

Wir nutzen für die Apps von http://www.gebraucht.de/kleinanzeigen-apps das „Framework“ Supersonic von http://www.appgyver.com , welches ähnlich wie die vorgestellte Methode letztendlich auf ionic, angular und cordova zurückgreift und diese noch durch einige Schnittstellen vereinfacht.

Wenn man schnell und mit überschaubaren Aufwand eine App für iOS und Android veröffentlichen möchte, ist die Entscheidung für eine HTML App auf dieser Basis meiner Meinung nach sehr zu empfehlen. Die Unterstützung und Geschwindigkeit auf iOS ist für einfache HTML Apps bereits gut bis sehr gut. Bei Android ist es aufgrund der vielen unterschiedlichen Geräte und Android Version sehr unterschiedlich und leider zum Teil noch nicht 100%ig zufriedenstellend.

Antworten
Sebastian
Sebastian

Danke Konstantin für den tollen Artikel!
Mich hätte an dieser Stelle mal ein Performance-Vergleich z.B. reguläres Cordova vs ngCordova vs Cordova + CocoonJS interessiert. Die Angabe „läuft schnell“ ist leider etwas subjektiv :)

Ansonsten guter Artikel! Danke.

Antworten
Tim
Tim

Schöner Artikel. Was denkst du über steroid.js von appgyver? jetzt mit eigenem framework namens „supersonic“ empfinde ich diese hybrid lösung als forschrifttlichste. der vorteil hier ist auch die nutzung nativer elemente…

Antworten
Jan

Ionic zusammen mit AngluarJS ist definitiv eine schöne und schnelle Lösung, in der sich sauber (MVC) entwickeln lässt. Steroids.js schauen wir uns aber auch gerade noch an. Ist aber so wie es aktuell aussieht primär für iOS Apps spannender.

Antworten
Michael

Vielen Dank für diesen Artikel, ich werde mir das mal genauer anschauen und testen, sobald ich Zeit habe.

Bisher setze ich auf Cordova, jQuery, backbone.js und underscore.js.

Und damit lassen sich wirklich sehr, sehr schnelle Apps entwickelt.

Antworten
Johanna.g
Johanna.g

Vielen Dank Konstantin für den super Bericht. Auch wir setzen auf plattformunabhängige App-Entwicklung und haben uns daher in dem Atemzug mit Ionic, AngularJS und RequireJS beschäftigt. Bisher sind dadurch leistungsstarke, nutzerorientierte und flexible Apps entstanden. In unserem Blog berichten wir über vermeintliche Probleme, Schwierigkeiten und weiteres Potenzial:
http://www.flyacts.com/blog/tutorial-angularjs-mit-requirejs-und-ionic-framework/

Habt ihr auch schon mit RequireJS in der Kombi gearbeitet? Welche Erfahrungen habt ihr damit gemacht?

Ich freu mich auf Feedback.

Johanna

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung