Ionic is powered by the AngularJS framework (which is also commonly just called Angular), which drives the UI interactions, gestures, animations, and well, essentially the entire functionality of your app. Understanding it is crucial to the experience of working with Ionic.
Angular was initially developed by Google in 2009 in an effort to enhance HTML with dynamic data binding at the tag level (the name Angular refers to the angular brackets around the HTML tags). Its architectural philosophy is firmly grounded in the Model-View-Controller (MVC) pattern and centered around an augmented HTML syntax for building UIs and a feature-rich, modular core framework to create business logic.
Due to its extensive nature, writing a concise introduction to Angular is not easy. As we work our way through the coming chapters, we will gradually go deeper and increase our knowledge of the framework. Here, we will settle for an outline of the most important aspects of AngularJS so that you can understand how these aspects work in the context of Ionic.
As we work our way through this chapter and the ones that follow, you will very quickly realize that what you are building with Ionic are actually augmented Angular apps that are designed for mobile devices. Since this is the case, it is crucial that you understand how Angular apps are structured.
The most fundamental module of an Angular app is, well, the module. A module is a collection of services, controllers, and directives, which provide some specific functionality to your app. In fact, your Angular app is itself a module!
Defining a module is rather simple:
angular.module('starter', []);This creates a module named starter. The second argument is meant to contain a list of dependencies (more on this will be discussed later). This argument is left empty if the module does not depend on any other modules.
Modules can load other modules, incorporating their functionality into their own. This makes it very easy for developers to write and share utility modules, which can be used by other developers in their own apps (at the time of writing this book, there are literally tens of thousands of such modules hosted on GitHub, with many under active development).
Remember those empty brackets in the example that we saw just a bit earlier? This is where you list all the modules the current module should load for its own use. For example, in our Ionic apps, the ionic module is a fundamental component that we always want with us:
angular.module('myapp', ['ionic']);Now, whenever this module is loaded, Angular will automatically load its dependencies with it.
As mentioned before, the Angular modules contain other components, which provide various kinds of functionality to the app. Detailing them here would just clutter things, so we will introduce them as we go along (if not here, then in the later chapters, where they are needed). For now, it is sufficient that you just know that they exist and they together make up the functionality of an Angular module.
Now that we have a better understanding of how an Angular app is structured, it is time to look at how it actually works during runtime.
The functionality of an Angular app revolves around the following three core concepts:
- The view is what the user sees and the medium through which the user primarily interacts with and reads output from your application.
- The controller responds to the user interaction with the application and communicates with the model in order to produce appropriate data. It then updates the view to reflect that data.
- The model is a collection of data, libraries, services, and other things that make up your application's business logic. The model is responsible for the heavy processing in your app, and it is usually where most of your code will reside.
These three concepts make up the MVC pattern—model-view-controller. This is a very popular design pattern for modern web apps.
Now that we know how an Angular app functions, let's see how it realizes each of these three concepts.
In an Angular app, the view is composed predominantly of standard HTML, which is augmented by Angular-specific components in order to facilitate dynamic updates. The following are the two primary components:
- Directives: These are the custom HTML tags, whose function and behavior are defined from within AngularJS but written like plain HTML. For example, a tag like the following can be a directive that draws a map centered on a specific latitude and longitude:
<map lat="39.234" lng="43.453"></map>
- Expressions: These are the expressions that are surrounded by double curly braces, which evaluate to a given value during the runtime of the application. Unless specified otherwise, the output of an expression will be updated as soon as the model of the application changes. The following is an example of such an expression:
{{ person.firstname }}The preceding expression does something that is very common in Angular—resolve the value of some object's member. However, to do so, we first need to define where that object can be found. This is where controllers come into the picture.
In an Angular app, the controller is realized by special module components, which are fittingly called controllers. You can define them in a module in the following way:
angular.module('myapp.controllers', [])
controller('MyCtrl', function($scope) {})The first parameter is the name of the controller. The second parameter is a function that defines what the controller actually does. This function can take a variable number of arguments, which represent the dependencies that the controller will use, much like the way we defined dependencies for modules earlier.
Let's finish our brief tour of Angular by showing how to connect the various components that we have seen so far.
Consider a situation where you first navigate to the index.html, which is available at the following path myfirstionicapp/www/index.html:
When you navigate here, you will observe the following block of code:
<ion-nav-bar class="bar-stable"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar>
This block of code determines the header bar of the application, and this is one of the examples of the User Interface (UI) components, which can be managed through HTML5.
For documentation and reference purposes, you can refer to the Ionic UI components at http://ionicframework.com/docs/components.
As you further explore your project, you will see that the main controllers that will power the interactive functionality of your project are available at the following path:
myfirstionicapp | js | controllers.js