You are previewing Ionic Cookbook.
O'Reilly logo
Ionic Cookbook

Book Description

Over 35 exciting recipes to spice up your application development with Ionic

About This Book

  • Learn how to utilize the robust features of Ionic CLI and its framework to create, develop, and build your mobile app

  • Explore new integrations with various Backend-as-a-Services, along with AngularJS modules, for creative solutions

  • Use out-of-the-box Ionic functionalities, customize existing components, and add new components with this comprehensive, step-by-step guide

  • Who This Book Is For

    If you are a front-end developer and want to take advantage of your existing mobile application development skills to develop cross-platform mobile apps, this book is for you. You will build up your Ionic knowledge with in-depth recipes on Angular.js, Cordova, and Sass.

    What You Will Learn

  • Authenticate users using an e-mail password, Twitter, Facebook, Google+, and LinkedIn

  • Retrieve data and store it using Firebase

  • Access native device functionalities such as a camera, contact list, e-mail, and maps using ngCordova

  • Work with localStorage and SQLite for persistent data access on the client side

  • Communicate to and from your app using push notifications or SMS

  • Leverage AngularJS events and Ionic-specific events to communicate across pages, controllers, and directives

  • Customize the color and theme of your Ionic app

  • Create new custom directives as components

  • Compile your app for iOS, Android, and Windows Phone

  • In Detail

    The world of mobile development is extremely fragmented with many platforms, frameworks, and technologies available. Ionic is intended to fill that gap, by enabling developers to build apps that have a native feel to them, using web technologies such as HTML, CSS, and AngularJS. Ionic makes it easy for front-end developers to become app developers. The framework provides superior performance with deep Cordova integration and a comprehensive set of tools for prototyping, backend support, and deployment.

    Ionic Cookbook takes you through the process of developing a cross-platform mobile app using just HTML5 and the JavaScript-based Ionic.

    You will start with an introduction to the CLI and then move on to building and running an app. You will explore common features of real-world mobile apps such as authenticating a user, and getting and saving data using either Firebase or Local Storage. Next, the book covers how Ionic integrates with Cordova to support native device features using ngCordova, and you will discover how to take advantage of existing modules around its ecosystem. You will also delve into advanced topics, including how to extend Ionic to create new components. Finally, the book will walk you through customizing the Ionic theme and building the app so that it can be deployed to all platforms.

    Style and approach

    This book follows a recipe-based approach to cross-platform mobile app development, where each task is explained in a conversational and easy-to-follow style. Every topic explains individual features or components of Ionic, and provides extra details for readers to come up with custom solutions based on real-world applications.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of Contents

    1. Ionic Cookbook
      1. Table of Contents
      2. Ionic Cookbook
      3. Credits
      4. Foreword
      5. About the Author
      6. About the Reviewers
      7. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      8. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Sections
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Conventions
        6. Reader feedback
        7. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      9. 1. Creating Our First App with Ionic
        1. Introduction
        2. Setting up a development environment
          1. Getting ready
          2. How to do it…
          3. See also
        3. Creating a HelloWorld app via CLI
          1. How to do it…
          2. How it works…
        4. Creating a HelloWorld app via Ionic Creator
          1. Getting ready
          2. How to do it…
          3. There's more...
        5. Copying examples from Ionic Codepen Demos
          1. How to do it…
          2. There's more...
        6. Viewing the app using your web browser
          1. Getting ready
          2. How to do it…
          3. How it works...
        7. Viewing the app using iOS Simulator
          1. How to do it...
        8. Viewing the app using Xcode for iOS
          1. How to do it...
          2. There's more...
        9. Viewing the app using Genymotion for Android
          1. How to do it...
        10. Viewing the app using Ionic View
          1. How to do it...
        11. Customizing the app folder structure
          1. How to do it...
      10. 2. Managing States and Navigation
        1. Introduction
        2. Creating a tab interface with nested views
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Creating a multistep form with validation
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      11. 3. Adding Device Features Support
        1. Introduction
        2. Taking a photo using the device camera
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        3. Capturing video and allowing playback
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        4. Composing an email with an attachment from an app
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        5. Picking and adding a contact
          1. How to do it...
          2. How it works...
          3. See also
        6. Adding Google Maps with geocoding support
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      12. 4. Offline Data Storage
        1. Introduction
        2. Creating a to-do app using ngStorage for Local Storage
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Creating a social networking app using SQLite
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
      13. 5. Handling Gestures and Events
        1. Introduction
        2. Detecting drag events with a gesture coordinate
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Communication between a view, controller, and directive using events
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      14. 6. App Theme Customization
        1. Introduction
        2. Customizing themes for specific platforms
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
          5. See also
        3. Creating an introduction screen with a custom header
          1. Getting ready
          2. How to do it...
          3. How it works...
      15. 7. Extending Ionic with Your Own Components
        1. Introduction
        2. Creating a scroll progress bar directive
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Creating a custom filter
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        4. Animating an app using requestAnimationFrame with event binding
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
      16. 8. User Registration and Authentication
        1. Introduction
        2. Configuring a Facebook app with Firebase authentication
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        3. Configuring a Twitter app with Firebase authentication
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Configuring a Google+ project with Firebase authentication
          1. Getting ready
          2. How to do it...
          3. How it works...
        5. Creating an Ionic social authentication project for Facebook using $firebaseAuth
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        6. Creating a LinkedIn app and configuring authentication in Auth0
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        7. Integrating Auth0's LinkedIn authentication in an Ionic project
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      17. 9. Saving and Loading Data Using Firebase
        1. Introduction
        2. Saving array data to Firebase
          1. Getting ready
          2. How to do it...
          3. How it works...
        3. Rendering a large Firebase data set using collection-repeat
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. There's more...
        4. Saving form data to Firebase
          1. Getting ready
          2. How to do it...
          3. How it works...
      18. 10. Finalizing Your Apps for Different Platforms
        1. Introduction
        2. Building and publishing an app for iOS
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
        3. Building and publishing an app for Android
          1. Getting ready
          2. How to do it...
          3. How it works...
        4. Using PhoneGap Build for cross-platform applications
          1. Getting ready
          2. How to do it...
          3. How it works...
          4. See also
      19. Index