Nachdem wir im ersten Teil des Tutorials ein ionic Projekt erstellt und es in der Preview angeschaut haben werfen wir nun einen Blick auf die index.html im www Ordner in der die Struktur der App zu finden ist.

Wie üblich werden im <head> die verwendeten .css und .js Dateien referenziert. In dem generierten Beispiel ist sehr schön kommentiert welche Dateien eingebunden werden und welchen Zweck sie erfüllen. Soweit ist das noch halbwegs unspektakulär. Die “cordova.js” die eingebunden wird verursacht beim Starten der App durch ein ionic serve einen 404 Error, da die Datei plattformabhängig beim build der App hinzugefügt wird. Entsprechende Fehlermeldungen können also beruhigt ignoriert werden.
Wirklich interessant ist der <body> der html Seite:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>

Mit dem attribut ng-app="starter" wird die zugrunde liegende Angular Applikation initialisiert. Diese ist in der Datei js/app.js definiert.

Der tag <ion-nav-bar> ist die Direktive für die Navigationsleiste. Das dafür genutzte Template liegt unter templates/tabs.html. Die weiteren Templates die in dem Ordner liegen werden basierend auf die Navigation in der Direktive ion-nav-view zur Darstellung gebracht.

Navigation
Die einzelnen Navigationselemente setzten einen Status der von der Angular Applikation ausgewertet wird. Anhand des Status wird definiert welche Ansicht der Applikation dargestellt wird.

1
2
3
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>

Inhalt

Der eigentliche Inhalt wird anhand der Angular Routers definiert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.config(function($stateProvider, $urlRouterProvider) {

// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('tab.sessions', {
url: '/sessions',
views: {
'tab-sessions': {
templateUrl: 'templates/tab-sessions.html',
controller: 'SessionCtrl'
}
}
})

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/sessions');

})

Hier wird angegeben durch welches Template in das html Tag

1
<ion-nav-view></ion-nav-view>

gerendert werden soll. Also in dem Beispiel für die Route /sessions das Fragment /templates/tab-sessions.html. In dem Code Beispiel kann man auch erkennen das es sich bei der Route /tab/sessions um die default Route handelt die genutzt wird wenn kein anderer State zutrifft.