Anatomy of the Ionic-Angular-Cordova App
The Ionic template relies heavily on AngularJS. We covered Angular back in Chapter 18; however, we want to illustrate here how Angular is used inside this Cordova project. First, Figure 25.15 showed how the various script libraries are loaded for the project. Ionic and Angular are loaded by ionic.bundle.js. Next, the code for the application follows the Angular pattern. It gets loaded by the three .js files you added to scripts. The following provides a refresher on each of these:
app.js—This is the main code file for your application. It defines the Angular module (as angular.module()); Ionic has called the module starter. Remember, the module is essentially the name of your application. This module is then used inside the markup of index.html. The <body> tag (line 26 in Figure 25.15) includes the directive ng-app="starter".
The same line of code in app.js that creates the module also defines the controllers (starter.controllers) and the services (starter.services). We will look at these files next.
This file also includes a .run function. This function works as the Ionic equivalent of the Cordova onDeviceReady() function you saw in the prior sample. You use it for app initialization code.
The .config function uses the Angular UI router to load partial pages (called templates in Angular) as a user navigates through the app.
controllers.js—This file contains the AngularJS controllers for the application. Recall that controllers work to bind the model data, or $scope, to the views (or templates). In this case, the model data is served by calling methods of services.js.
Controllers are bound to your page templates using the .config method inside app.js (and not through a directive on the page as you saw in the samples in Chapter 18). This is how the Angular router works. It loads the requested page and its controller. The controller then loads the required model data (from services.js as $scope).
services.js—This script file defines the services that your application uses to retrieve and save data for your application. This Ionic template simply reads data from an array. However, your applications would likely get and save data from either device local storage or from a Web API service (or both).
All the Ionic UI elements are built as Angular directives. Your markup, for instance, will use these directives such as <ion-view> and <ion-content>. This makes your UI code much easier to write, read, and maintain. Notice that index.html (refer to Figure 25.15) includes the line near the bottom of the page: <ion-nav-view>. The Angular UI router will load the pages from the templates directory into this container.
The Template files themselves represent just the markup required for the requested view. This markup is loaded into index.html. Listing 25.2 shows an example. Notice the use of the many Ionic Angular directives (<ion...>). You can also see that this template takes advantage of Angular binding using the syntax {{chat.name}}. In addition, the template uses the Angular directive ng-click to bind code from the button to a method in the app.
LISTING 25.2 The tab-chats.html Template Page Built with Angular-Ionic
<ion-view view-title="Chats">
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right"
ng-repeat="chat in chats" type="item-text-wrap"
href="#/tab/chats/{{chat.id}}">
<img ng-src="{{chat.face}}">
<h2>{{chat.name}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
The page shown in Listing 25.2 is loaded by the Angular UI router found inside app.js. The code for loading this page is as follows. Notice that it uses a url route (/chats) to point to the actual page using templateUrl. It then uses controller to bind the controller to the template.
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
This is the standard way most Angular and Ionic Cordova apps are built. We will further examine this application pattern as we build on the tabs template throughout the rest of this chapter.