Anton Shevchenko - Developing an Ionic Edge: HTML5 Cross-Platform Hybrid Apps

For this book, we, the authors, have developed a demo application for you to play around with and as a reference to the mentioned techniques and features of Ionic.

The application is open source and available for free to anyone. Just head over to https://github.com/trendicity/trendicity and get your hands dirty with the source code, or directly clone the repository with git:

In this book, we take you through the process of starting, developing and customizing a mobile application built with the Ionic framework and AngularJS. We start with covering some essential productivity tools such as the Ionic CLI. From there we dive into the development of Trendicity, the mobile application we developed to demonstrate as much of Ionics features as possible.

Its important to first get you started with the required and recommended tools and workflow for this and any future Ionic projects. The most important prerequisites such as installing Node.js, Git, and Ionic CLI are covered. Some generic uses of the Ionic CLI are detailed, and we start off by setting up our demo application project, Trendicity, using front end power tools like Gulp and Bower.

Well start off by lining out the actual Trendicity demo application. All views will be covered, and some core Ionic UI elements are mixed together to create a basic setup. From handling sidemenu madness to integrating a tab view inside of a nested view, this chapter has got you covered. In Trendicity, a user will be able to set up some favorite locations, check nearby Instagram posts on a map, or open up the previously defined favorites to check out Instagram posts in that area.

After we have outlined the big picture of Trendicity, we dive straight in and start working with some of the most commonly used Ionic directives. We discuss the side menu related directives, how to use them, and what they can do for your application. An honorable mention goes out to the menu-close directive, which allows you to easily toggle the sidemenu upon navigation. After discussing the side menu directives in detail, we continue on to lay out the applications routing using Angular UIs Router component. This is one of the few external components Ionic Framework depends upon. In the end we take a short peek at what the future of application routing in AngularJS will bring us.

What is a location-based application without favorite locations to store? Next in the book, we discuss how you can use the browsers local storage to store collections of data to allow users to save their favorite locations. Using Ionics modal service, the user will be able to fill out an address as a favorite location, which will be saved as a favorite location. Behind the scenes, the tailor-made `GeolocationService` are setup to convert that address to a geolocation object using the Google Maps API.

Integrating a map view in your project in general is by now a pretty straight forward task for most developers. There are many libraries out there that specialize in integrating maps into a project. But doing so within an Ionic project needs a little extra attention due to Ionics homemade tap/click handling. Of course the team behind Ionic has you covered, and thats how we are able to integrate the open source angular-google-maps library into the project.

Once we have most features in place, it is time to think about some security in our application. Most of the Trendicity application is freely usable without an account, but once a user starts interacting more with Instagram, it is time for some solid authentication. Thats where incorporating the angular-http-auth library comes in. We explain how we secured Trendicity with HTTP interceptors and OAuth authentication using the