You are previewing Ionic Framework By Example.
O'Reilly logo
Ionic Framework By Example

Book Description

Build amazing cross-platform mobile apps with Ionic, the HTML5 framework that makes modern mobile application development simple

About This Book

  • Learn how to use one of the most exciting mobile development frameworks around to build even better apps

  • Follow the featured sample projects to experience Ionic’s impressive capabilities

  • Extend your developer skillset to build, test, and launch mobile apps with confidence

  • Who This Book Is For

    This book is for anyone who wants to see Ionic in action - and find out how it could transform the way they build mobile apps. If you’re a JavaScript web developer, you’ll be building great projects in no time.

    What You Will Learn

  • Learn Ionic by creating three complete mobile applications

  • Get to know the Ionic CLI

  • Add basic and advanced features to the Ionic framework

  • Connect an Ionic app with a Firebase back end

  • Integrate PhoneGap plugins with NG-Cordova

  • Test your apps to improve and optimize performance

  • In Detail

    Change doesn’t have to be challenging. Sometimes it can be simple – sometimes it just makes sense. With Ionic, mobile development has never been so simple, so elegant and obvious. By helping developers to harness AngularJS and HTML5 for mobile development, it’s the perfect framework for anyone obsessed with performance, and anyone that understands just how important a great user experience really is.

    This book shows you how to get started with Ionic framework immediately. But it doesn’t just give you instructions and then expect you to follow them. Instead it demonstrates what Ionic is capable of through three practical projects you can follow and build yourself.

    From a basic to-do list app, a London tourist app, to a complete social media app, all three projects have been designed to help you learn Ionic at its very best. From setting up your project to developing on both the server side and front end, and best practices for testing and debugging your projects, you’ll quickly become a better mobile developer, delivering high performance mobile apps that look awesome.

    Ionic Framework by Example is for people who don’t want to learn now, build later – it’s for people who want to learn and build at the same time – so they can meet today’s mobile development challenges head on and deliver better products than anyone else.

    Style and approach

    This book isn’t just an instruction manual. It doesn’t just tell you what to do – it shows you. Featuring three sample projects, it’s been created so you can get started with Ionic immediately.

    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 If you purchased this book elsewhere, you can visit and register to have the code file.

    Table of Contents

    1. Ionic Framework By Example
      1. Table of Contents
      2. Ionic Framework By Example
      3. Credits
      4. About the Author
      5. Acknowledgments
      6. About the Reviewer
        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. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      9. 1. First Look at Ionic
        1. The beginning
          1. The problem
        2. Apache Cordova
          1. Early hybrid apps
        3. What is Ionic?
          1. Short history of Ionic
            1. Features of Ionic
              1. CSS features
              2. JavaScript features
              3. The Ionic CLI
          2. Setting up Ionic
        4. Summary
      10. 2. To-Do List App
        1. Creating our first application
          1. Creating our to-do list app
        2. The Ionic workflow
          1. In-depth look at our project
          2. Envisioning our app
          3. Building our todo app
            1. Creating the UI
            2. The code
            3. Wiring things up
        3. Summary
      11. 3. Running Ionic Apps
        1. Running our todo app
          1. The ionic serve technique
            1. Emulating with Chrome
          2. Ionic serve labs
          3. The Ionic view
            1. Testing todo app with the Ionic view
          4. Device
            1. Android
            2. iOS
        2. Summary
      12. 4. Ionic Components
        1. Creating a new to-do list application
          1. Overview of the Bucket-List app
            1. Breaking down the app
          2. Designing the UI
            1. Implementing the input box
            2. Implementing the ion-list application
              1. Using ion-list for our Bucket-List app
                1. The ion-list component
                2. ion-item
                  1. ion-option-button
          3. Writing the Angular code for our Bucket-List app
            1. Coding our input box
              1. Creating the controller
              2. Creating the input box model
              3. Creating an array for the Bucket-List items
              4. Implementing code for the Add button
              5. Implementing the Delete button
            2. Wire it all up
              1. Binding the controller
              2. Binding the input box model
              3. Wiring up the Add button
              4. Binding ion-item
                1. Using ng-repeat to render the list
                2. Wiring up the ion-option-button element
          4. Testing our Bucket-List app
        2. Summary
      13. 5. The London Tourist App
        1. Introduction to the London Tourist App
          1. Creating the London Tourist app
            1. The side menu app design
            2. Using the Ionic side menu template
            3. Seeing the LTA side menu app in action
            4. Exploring the LTA side menu app's code
              1. The index.html file
              2. The menu.html file
                1. The <ion-side-menus>element
                2. The <ion-side-menu-content>element
                3. The <ion-side-menu>element
            5. Developing the LTA application
              1. The local JSON database
                1. Creating the local JSON database file
                2. Populating the JSON file
              2. Designing the view
                1. Wiring up the data
                2. Retrieving the data with the $http service
        2. Summary
      14. 6. Advanced Ionic Components
        1. The Ionic Popover
          1. Implementing the popover
            1. Adding the menu button
            2. Coding the popover
            3. Adding the $ionicPopover service
              1. Finishing the popover code
            4. Creating the popover.html file
            5. Wiring up the popover
        2. The Ionic Modal
          1. Creating the modal
          2. Implementing the modal
          3. Creating the modal.html file
          4. Wiring up the modal
        3. Summary
      15. 7. Customizing the App
        1. Customizing the look and feel of your app
          1. Ionic styles with SASS
        2. Ionic SCSS overview
          1. The file
          2. Setting up SCSS
          3. Customizing the SCSS
        3. $ionicConfigProvider
        4. Summary
      16. 8. Building a Simple Social App
        1. The Ionic tabs application
          1. Creating an Ionic tabs application
            1. Running the tabs-app application
            2. Overview of the tabs-app application
            3. Overview of the tabs.html file
        2. The <ion-tab> element
          1. Adding tabs to the tabs-app application
            1. Adding the state for the new tab
          2. Creating the tab-wall.html file
          3. Creating the WallController controller
          4. Creating the tab
        3. Summary
      17. 9. Connecting to Firebase
        1. Extending our tabs-app Ionic app
          1. Implementing the post wall feature
            1. The backend challenge
        2. Firebase
          1. Setting up a new Firebase account
          2. Integrate Firebase into tabs-app application
            1. Adding Firebase and Angular-Fire scripts
            2. Implementing Firebase to our app
            3. Pulling from database
              1. Adding to database
        3. Summary
      18. 10. Roundup
        1. Uncovered features of Ionic
          1. Appcamp.IO
          2. The Ionic documentation
          3. The Ionic creator
          4. The Ionic code pen
          5. Ionic.IO
          6. The Ionic playground
          7. The Ionic community
        2. Useful resources
        3. Summary
      19. Index