O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Developing an Ionic Edge: HTML5 Cross Platform Hybrid Apps

Book Description

Ionic helps you develop rich and robust applications based with a powerful yet flexible framework at its core: AngularJS. With an emphasis on native performance, Ionic plays nice with Apache Cordova to build native-like hybrid mobile applications for both Android and iOS platforms. It even provides its own wrapping command-line interface (CLI) in order to build, test and deploy Cordova-based mobile applications. With tons of popular mobile components, typography, and a gorgeous and extensible base theme, Ionic has been designed to work and display beautifully and consistently on all current mobile devices. This book walks you through the process of starting, developing, customizing and deploying a mobile application built with the Ionic framework and AngularJS. The authors dive head first into the development of Trendicity, this book’s mobile application developed to demonstrate as much of Ionic’s features as possible. This book was written for anyone interested in developing cross platform mobile applications. Before reading this book, readers should have at least a basic knowledge of web (application) development in general, including HTML & CSS and Javascript. For a better understanding of our example code and Ionic’s features, it would be best if readers also have experience with JavaScript and in particular the AngularJS framework.

Table of Contents

  1. Preface
    1. Why use Ionic?
    2. What should readers know prior to reading this book?
    3. Source code/sample app
    4. What will this book teach you?
    5. The writing process
    6. Authors
    7. Acknowledgments
  2. 1. Introduction
    1. Ionic
  3. 2. Development environment, tooling, and workflow
    1. Installing prerequisites - Node.js & Git
      1. Installing Node.js
      2. Installing Git
    2. Installing Ionic
      1. Cordova
    3. Ionic Command Line Interface (CLI)
      1. Starting a new project
      2. Developing in the browser
      3. Adding a platform
      4. Creating a build
      5. Running your build on an emulator
      6. Running on a device
      7. Adding plugins
    4. Source control best practices
      1. Git and templated applications
      2. Root files
      3. Included directories
      4. Excluded directories
    5. Summary
  4. 3. TrendiCity
    1. Side menu
      1. Home
      2. Favorites
      3. About
      4. Login/Logout
    2. Search
      1. Loading service
    3. Map view tab
    4. Card view tab
      1. Working files
      2. Introductory popup
      3. Card view
      4. Card view controller
    5. List view tab
      1. Working files
      2. Template layout
      3. Refreshing the list of posts
      4. List of posts
      5. Liking posts
      6. Displaying options with action sheet
    6. Summary
  5. 4. Implementing a side menu and setting up the routes
    1. Introduction to Ionic’s side menu directives
      1. ion-side-menus
      2. ion-side-menu-content
      3. ion-side-menu
      4. ion-header-bar
      5. Wrapping up the side menu
    2. Handling routes with the AngularUI Router component
      1. About Angular UI
      2. The future of AngularJS application routing
      3. Setting up the application routes
      4. Defining a simple state
      5. Defining a state with named view and custom template and controller
      6. Abstract states
      7. Finished routing TrendiCity
  6. 5. Storing favorite locations in TrendiCity
    2. Setting up the routes
    3. Setting up the views
    4. Setting up the Favorites controller
    5. The Favorites service
    6. Adding a favorite
    7. Deleting a favorite
    8. Getting favorites
    9. Getting a single favorite
    10. Getting the views to update with the selected favorite
    11. Summary
  7. 6. Integrating a map view with Ionic
    1. Picking an AngularJS directive for Google Maps
      1. The candidates
    2. Creating the geolocation utility service
      1. Implementing ngCordova and the $cordovaGeolocation service
      2. $ionicPlatform.ready()
    3. Converting addresses to geolocation objects using the Google Maps Geocode API
    4. Setting up the map view inside a tab
      1. Touchstart, touchend, and click events on touch-enabled devices
      2. ui-gmap-google-map
      3. ui-gmap-marker
      4. ui-gmap-window
    5. Moving on to the controller and MapService
      1. Map View Controller
    6. Managing map madness with the MapService
      1. MapService.clearMarkers()
      2. MapService.addMarkersFromPosts()
      3. MapService.updateMarkerBounds()
    7. Summary
  8. 7. Authentication
    1. Desired user experience
    2. Incorporating angular-http-auth
      1. OAuth2 based approach
      2. Token based approach
    3. Cancel login
    4. Summary
  9. 8. Designing the application
    1. Layout components
      1. Designing TrendiCity
    2. Ionicons
      1. Creating native-looking applications
    3. Customizing Ionic with Sass
      1. Overriding Ionic design with Sass
      2. Using Sass in TrendiCity
      3. Gotchas
    4. Extending Ionic
    5. Summary
  10. 9. Instagram Service
    1. Authentication
      1. Login
      2. Logout
    2. CORS
    3. Non-Authenticated Requests
    4. Authenticated Requests
    5. Summary
  11. 10. What’s next?
    1. Promoting your Ionic application
    2. Prototyping with Ionic Creator
    3. Ionic’s evolution
      1. Ionic CLI
    4. Ionic as a platform
    5. Summary