Hybrid Mobile Apps with Ionic and AngularJS
JEREMY WILKEN
©2016 by Manning Publications Co.
Table of Contents
1 Introducing Ionic and hybrid apps 1
1.1 What is Ionic? 2
1.2 Types of mobile experiences 3
Native mobile apps 3 ■ Mobile websites (web apps) 5
Hybrid apps 6
1.3 Understanding how the Ionic stack works 7
Ionic: user interface framework 8 ■ Angular: web application
framework 10 ■ Cordova: hybrid app framework 10
1.4 Why Ionic? 11
Why Ionic is good for developers 11 ■ Drawbacks of using
Ionic 12
1.5 Prerequisites for building apps with Ionic 13
Experience with HTML, CSS, and JavaScript 13 ■ Experience
with web applications and Angular 13 ■ Access to a mobile
device 13
1.6 Supported mobile devices and platforms 14
Apple iOS 14 ■ Google Android 15
1.7 Summary 15
2 Setting up your computer to build apps 16
2.1 Quick-start guide 17
Setting up your development environment 18 ■ Starting a new
project 20 ■ Project folder structure 21 ■ Previewing in a
browser 22
2.2 Setting up previewing environments 23
Installing platform tools 23 ■ Setting up emulators 25
Setting up a connected device 29 ■ Adding a platform to the
project 30 ■ Previewing in an emulator 31 ■ Previewing
on a mobile device 32
2.3 Summary 34
3 What you need to know about AngularJS 35
3.1 AngularJS at a glance 37
Views and templates: describing the content 38 ■ Controllers,
models, and scope: managing data and logic 39 ■ Services:
reusable objects with methods 41 ■ Two-way data binding:
sharing between controller and view 41
3.2 Setting up for the chapter project 41
Getting the project files 42 ■ Starting the development server 43
3.3 Basics for an Angular app 44
3.4 Controllers: for controlling data and business logic 45
3.5 Loading data: using the controller to load and display
data in the view 48
Filters: convert data to display in the view 51
3.6 Handling click events to select a note 51
3.7 Create a directive to parse a note with Markdown 54
3.8 Using models to manage content editing 56
3.9 Saving and deleting a note 59
Adding the save() method 60 ■ Using Angular forms for
validation 61 ■ Adding the remove method 61
3.10 Continuing with Angular 62
3.11 Chapter challenges 63
3.12 Summary 63
4 Ionic navigation and core components 64
4.1 Set up chapter project 66
Create a new app and add code manually 66 ■ Clone the
finished app and follow along 66
4.2 Setting up the app navigation 66
Designing good app navigation 67 ■ Declaring the app
views with the state provider 69
4.3 Building the home view 72
Creating a content container 72 ■ Using CSS components
and adding a simple list of links 74 ■ Adding icons to the
list items 75
4.4 Using a controller and model for the reservation view 76
4.5 Loading data into the weather view 80
Adding the template for the weather view 81 ■ Create weather
controller to load external data 82 ■ Adding a loading indicator
to the weather view 84
4.6 Infinite scroll with cards for the restaurants view 86
4.7 Using the slidebox component for app intro tour 89
4.8 Chapter challenges 92
4.9 Summary 93
5 Tabs, advanced lists, and form components 94
5.1 Set up chapter project 96
Create a new app and add code manually 96 ■ Clone the
finished app and follow along 96
5.2 ionTabs: adding tabs and navigation 96
Adding tabs container and three tabs to the app 98
5.3 Adding ionNavView for each tab 98
5.4 Loading and displaying current Bitcoin rates 103
5.5 Display a currency’s details in the same tab view 107
5.6 Refresh the Bitcoin rates and display help 111
ionRefresher: pull-to-refresh the rates 112 ■ $ionicPopover:
showing help in a popover 113
5.7 Charting historical data 116
Setting up third-party libraries 116 ■ History tab template using
Highcharts and a select box to toggle currency 117 ■ History tab
controller loads data and sets up chart 118
5.8 Currencies tab with list reordering and toggles 121
ionReorderButton: adding reordering to a list 122 ■ ionToggle:
adding toggles to list items 123
5.9 Chapter challenges 124
5.10 Summary 124
6 Weather app, using side menus, modals, action sheets,
and ionScroll 126
6.1 Setting up the chapter project 128
6.2 Setting up the side menu and views 128
6.3 Searching for locations 131
6.4 Adding settings view and data services 133
Create services for locations and settings 133 ■ Show favorites
in side menu list 135 ■ Adding the settings template 136
Settings view controller 138
6.5 Setting up the weather view 139
Get a Forecast.io API key 140 ■ Using Ionic CLI proxies 140
Add the weather view controller and template 141
6.6 ionScroll: building custom scrolling content 142
Using ionScroll with paging 143 ■ Creating filters for forecast
data 148
6.7 Action sheet : displaying a list of options 150
6.8 ionModal: displaying the sunrise and sunset chart 153
Setting up a modal 154 ■ Collection repeat: making the sunrise
and sunset list fast 156
6.9 Popup: alert and confirm changes to favorites 159
6.10 Chapter challenges 161
6.11 Summary 162
7 Advanced techniques for professional apps 163
7.1 Set up chapter project 164
Get the code 164
7.2 Custom Ionic styling using Sass 164
Setting up Sass 164 ■ Customize Ionic with Sass variables 165
Using Sass for your own styling 167
7.3 How to support online and offline mode 167
7.4 Handling gesture events in Ionic 169
Listen for events with Ionic event directives 169 ■ Listen for events
with $ionicGesture service 171 ■ Available gesture events 174
7.5 Storing data for persistence 175
Using localStorage 175 ■ Using Web SQL, IndexedDB, and
SQLite 178 ■ Other options from Cordova plugins 179
7.6 Building one app for multiple platforms 179
One size doesn’t always fit all 179 ■ Adapt styling for a
platform or device type 180 ■ Adapt behavior for a platform
or device type 182
7.7 Modify default behaviors with $ionicConfigProvider 184
7.8 Summary 185
8 Using Cordova plugins 186
8.1 Cordova plugins 187
Considerations when using plugins 188 ■ Installing
plugins 188 ■ Using plugins 189 ■ Using plugins with
emulators 190 ■ Plugins and platform limitations 190
Angular and Cordova gotchas 191 ■ Solutions to common issues
with devices or emulators 192
8.2 ngCordova 194
Installing ngCordova 194
8.3 Using a camera and photos in the resort app 194
Setting up the camera project 195 ■ Adding the camera
plugin 196 ■ Creating the photo book view 196
8.4 Using geolocation in the weather app 198
Setting up the geolocation example 199 ■ Adding the geolocation
plugin and ngCordova 200 ■ Requesting a user’s location 200
Improving the weather app 202
8.5 Chapter challenges 204
8.6 Summary 204
9 Previewing, debugging, and automated testing 206
9.1 The differences among previewing, debugging,
and testing 207
Why testing is important 208
9.2 Setting up the chapter example 208
9.3 Additional ways to preview apps 209
Ionic Lab 209 ■ Ionic View 210
9.4 Debugging from a device 212
Debugging from an Android device 213 ■ Debugging from an
iOS device or emulator 213
9.5 Automated testing 218
Unit tests with Jasmine and Karma 219 ■ Integration tests
with Protractor and WebDriver 225
9.6 More test examples 229
9.7 Summary 230
10 Building and publishing apps 231
10.1 Building for production: an overview 232
10.2 Building icons and splash-screen assets 233
Creating the primary icons 234 ■ Creating the splash-screen
images 235
10.3 Preparing your app for production 236
10.4 Building Android apps and publishing to
Google Play 237
Setting up for signing your apps 237 ■ Build the release app
file 238 ■ Signing the APK file 238 ■ Optimize the APK 238
Building an updated version of your app 239 ■ Creating the app
listing and uploading the app to the Play Store 239 ■ Updating the
app listing or uploading a new version 240 ■ Using alternative
Android stores 241
10.5 Building iOS apps and publishing to the AppStore 241
Set up certificates and ID 242 ■ Set up an app ID identifier 242
Create listing in iTunes Connect 243 ■ Build and upload app
with Xcode 243 ■ Complete the iTunes Connect app listing 244
Updating the app 244
10.6 Summary 245
appendix Additional resources 247
index 249
foreword
This book is the result of nine months of dedicated work by Jeremy Wilken, a top Ionic developer with whom we’ve had the pleasure of collaborating since we built Ionic and open sourced it in 2013. This book provides an excellent introduction to the Ionic Open Source SDK, and it also offers plenty of rich information for experienced Ionic developers.
Jeremy built three Ionic apps for this book, using just about every Ionic component in existence. Because of that, the book is a solid reference for using the components in an integrated way. The first app, which a resort might use to provide value for guests, incorporates our slidebox, lists, cards, content containers, and basic navigation. The second, a Bitcoin market app, provides real-time currency rates for Bitcoin and uses pull-to-refresh, popovers, tabs, charts, advanced lists, and nested views. The third, a weather app, uses modals, a custom scroll area (paginated scrolling), externally loaded data, side menus, and a search view.
The apps are unique and robust. They are 80% developed for deployment to an app store, with the obvious missing pieces listed at the end of the chapter to challenge readers to complete them.
For experienced developers, the book explains how to target a platform if, for example, they want to use the action sheet in iOS and the popover in Android. The book also provides background about the Ionic ecosystem, explaining how to leverage Cordova and plugins; discussing Ionic’s platform services, such as Ionic View; and providing instruction about how to improve Ionic development with advanced techniques and testing. Jeremy provides great examples and insight into how to set up and write your own tests.
Prior to creating Ionic with Max Lynch and Ben Sperry, I joined their company to help develop their already successful products, including Codiqa, which was a jQuery Mobile drag-and-drop interface builder. As we worked on Codiqa, we realized devices and browsers were not being used to their full potential, and users were continually asking for more from our tools. Eventually, we decided to create our toolkit for hybrid applications, in order to push mobile devices to their limits. With the added power of Angular, we’ve been able to bring hybrid mobile app development to a place where it presents a viable challenge to native application development. Since we released the alpha version of Ionic in 2013, I couldn’t be more proud of how quickly the development community has embraced Ionic and helped to grow it even further. The part I’m most excited about is that Ionic is only getting started, and we’ll continue to grow and support it, so that developers can build high-performing apps quickly and easily.
You’ll find this book to be both an informative introduction to Ionic and an indepth guide to building better apps, depending on your experience with Ionic and your needs. Thank you for being part of the Ionic community.
Enjoy!
ADAM BRADLEY
COCREATOR OF THE IONIC FRAMEWORK
preface
The importance of mobile may be clear today, but even just a few years ago it was debatable if building mobile apps was worth the time and cost. As of 2015 the number of mobile apps available in the Apple App and Google Play Stores is well over a million.
Over six times more phones are sold than desktop/laptop devices, and the number of tablets sold should exceed desktop/laptop devices in 2015. Mobile is here, and here to stay.
Back in 2013, the world of mobile app development was focused primarily on building native apps. These native apps were written in Java or Objective C, and required developers to learn those languages, platform tools, SDKs, and so forth. For a web developer like myself, this presented a barrier to getting into mobile app development.
It seemed like the mobile web was focused on building responsive websites, not mobile apps. The idea of a hybrid app (which is a native app built using web technologies) was usually given very little credit due to the quality of older devices and browsers that made hybrid apps sluggish, and design practices that made the apps have a visual disconnect from native apps.
The founders of Ionic saw an opportunity. They realized that mobile devices were improving, quite rapidly in fact, and that hybrid apps could be a serious contender with native apps. They aimed to open the door for developers who want to build native-feeling mobile apps, while using the same languages they already know from web development. Ionic builds on the shoulders of other open source projects, Cordova and Angular. Ionic leverages these projects into a more unified platform for building hybrid mobile apps.
As of version 1.0, it’s clear that Ionic has come of age and empowers web developers to build mobile apps. The Ionic team has become fond of calling Ionic the “missing SDK” for hybrid apps. As I’ve finished this journey of writing Ionic in Action, I can see the full vision of Ionic coming to life. The core of what makes Ionic so powerful is the open source components explored in this book. In addition, a platform of services is being built around it for features such as push notifications, analytics, beta testing, and more. I hold open source projects with well-managed development and community input in high regard, and Ionic is certainly in this category (in the top 40 starred projects on GitHub, and it uses Angular, which is in the top 3 as of this writing). Hundreds of thousands of apps have been created with Ionic, and several apps have even been featured in the major app stores.
Writing a book about Ionic was a logical extension of my desire to share my learning experience on how to become a mobile app developer. I started with writing the core parts of this book around a learning pathway that talked about each feature of Ionic and explored them each in isolation. I got up to six chapters done, but it felt like the wrong approach. I like to see something working that I can interact with, and even touch, as is possible in the case of mobile apps.
So after writing the first draft of the three core chapters in the book, I threw them aside and rewrote them from scratch using a very direct, build-the-app-as-you-go approach. It feels much more like the kind of learning path I followed when I built my first Ionic app, and I hope that you find the chapters approachable. In fact, I hope you find that same care applied to all of the chapters in this book.
I learned about Ionic through trial and error, since the documentation has always been a good guide. When I had a project at work that required a mobile app, I was able to put Ionic into service and build a prototype within a day. Working through the early days of Ionic, I regularly updated my app to keep up with the changes and new features, and I was often impressed with the attention to detail and rapid pace of innovation.
Over the months of beta releases, Ionic matured its API and design into the polished and consistent form it is today. The future of Ionic is one that includes even more community-driven contributions and components, more platform services, and continued progress in performance and quality. I can’t wait to see what you build, and I’m glad to be with you on your own journey to become a mobile app developer with Ionic.
about this book
Ionic brings together several existing projects with its own set of tools so web developers can build mobile apps. Ionic has gained a strong following and is a top choice for mobile app developers. Ionic in Action is a hands-on, example-driven guide to Ionic. During the course of the book, you’ll build several nearly complete apps that showcase almost every feature of Ionic. The documentation for Ionic is very good, but it doesn’t provide much direction on how to orchestrate a large app.
When you build an app with Ionic, you actually use a combination of technologies (primarily Angular and Cordova). To ensure you’re really capable of building mobile apps with Ionic, the book provides chapters on those technologies. There’s much more that could be said about Angular and Cordova, which is why entire books have been written about them, but this book tries to do them justice and provides enough foundational knowledge to get you started.
Mobile apps often require access to external data. It’s helpful to understand how APIs are able to provide data for web applications. Ionic in Action covers how to utilize RESTful APIs through several of the examples.
Who should read this book
This book is intended for web developers who have a foundation in building web applications. Knowledge of CSS, HTML, and JavaScript is expected. You should understand how to write HTML to structure your content and how to use CSS to modify the styling.
JavaScript experience should include concepts such as asynchronous behavior, objects, and primitives. No prior knowledge of Cordova or Angular is required. It’s helpful to have some background in building web applications in a browser with JavaScript, but this experience can also be gained through careful study of the book examples.
Access to a mobile device is necessary to properly build and test apps. For Ionic, the device needs to be an iOS or Android device. Having one of each is very helpful!
How the book is organized
In the 10 chapters, I cover the entire process from setting up your environment to publishing your finished app:
Chapter 1 is a detailed overview of Ionic, the other technologies used together to create hybrid apps, and why Ionic is a great choice.
Chapter 2 gets you through the setup process for all of the tools used in the book, and helps you create your first mobile app using one of the default starter templates.
Chapter 3 provides a primer for developers who aren’t familiar with Angular or who’d like to brush up on their knowledge because Ionic is built with Angular.
Chapter 4 walks you through creating a mobile app for a fictitious resort that includes basic app navigation and uses a number of visual components such as cards, a list with infinite scrolling, loading indicators to gracefully load data, and a slidebox. You’ll learn about the basics of building an Ionic app using a hands-on approach while building your first app.
Chapter 5 takes you through building another mobile app for tracking Bitcoin currency prices. The Bitcoin app uses tabs, a pull-to-refresh feature, several form components, advanced lists with swipe options, and a chart for quotes over time. The focus in this chapter is how to structure an app using tabs, and how to leverage many more Ionic components.
Chapter 6 helps you build a weather app. The chapter digs into using the side menu for navigation, modals for presenting tangential information, action sheets to display option buttons, and a custom scrolling behavior. This chapter rounds out your understanding of the Ionic components and primary design elements used in Ionic apps.
Chapter 7 introduces you to some advanced techniques that are useful for building hybrid apps. You’ll learn about how to persist user data, customize Ionic components, work in online or offline mode, configure Ionic’s default settings, adapt your apps to have platform-specific functionalities, and handle gesture events.
Chapter 8 looks at how to use Cordova to allow Ionic apps to support platform features, such as sensor data. The chapter uses two of the apps you built in earlier chapters to demonstrate how to add support for geolocation for the weather app and camera support for the resort app. You’ll learn about ngCordova and how to easily integrate with any Cordova plugin.
Chapter 9 helps you set up testing for your Ionic app. The chapter introduces two primary testing approaches: unit testing for testing your business logic, and integration testing for testing the overall app functionality. You’ll also learn
about Ionic View and Ionic Lab to help you preview your apps.
Chapter 10 walks you through the process of submitting your apps to the stores.
It covers tips and techniques for preparing your apps for production, adding necessary graphics and assets, and ultimately how to properly build your apps for both iOS and Android.
Code
All of the code for this book is found on GitHub at github.com/ionic-inaction. The source code is open source, so you’re able to modify it for your own purposes. I only ask that you don’t try to publish the example apps to the app stores. Most of the code is found in code listing blocks, except in cases where the code is short and should already be familiar. The code is well annotated to provide context and descriptions for individual lines. Sometimes code is in bold font to highlight code that has changed from previous steps in the chapter, such as when a new feature adds to an existing line of code. Author Online
Purchase of Ionic in Action includes free access to a private web forum run by Manning Publications where you can make comments about the book, ask technical questions, and receive help from the author and from other users. To access the forum and subscribe to it, point your web browser to manning.com/books/ionic-in-action.
This page provides information on how to get on the forum once you’re registered, what kind of help is available, and the rules of conduct on the forum. Manning’s commitment to our readers is to provide a venue where a meaningful dialog between individual readers and between readers and the author can take place. It’s not a commitment to any specific amount of participation on the part of the author, whose contribution to the forum remains voluntary (and unpaid). We suggest you try asking the author some challenging questions lest his interest stray!
The Author Online forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.
