Sign In Start Free Trial

Learning Ionic

By : Ravulavaru

4.4 (14)

Learning Ionic

4.4 (14)

By: Ravulavaru

Overview of this book

This book is intended for those who want to learn how to build hybrid mobile applications using Ionic. It is also ideal for people who want to explore theming for Ionic apps. Prior knowledge of AngularJS is essential to complete this book successfully.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Ionic – Powered by AngularJS

1. Ionic – Powered by AngularJS

Understanding the separation of concerns

AngularJS components

AngularJS directives

AngularJS services

AngularJS resources

Summary

2. Welcome to Ionic

2. Welcome to Ionic

Mobile Hybrid Architecture

What is Apache Cordova?

What is Ionic?

Software setup

The platform guide

Hello Ionic

The browser developer tools setup

The Ionic project structure

Scaffolding the tabs template

Scaffolding the side menu template

generator-ionic

Summary

3. Ionic CSS Components and Navigation

3. Ionic CSS Components and Navigation

Ionic CSS components

The Ionic router

Summary

4. Ionic and SCSS

4. Ionic and SCSS

What is Sass?

Setting up SCSS in our Ionic project

Working with Ionic SCSS

Understanding the Ionic SCSS setup

The SCSS workflow

Building a swatch

Summary

5. Ionic Directives and Services

5. Ionic Directives and Services

Ionic directives and services

The Ionic Platform service

Content

Ionic loading

The ion-list and ion-item directives

Gesture directives and services

Summary

6. Building a Bookstore App

6. Building a Bookstore App

An introduction to the Bookstore application

The Bookstore architecture

Setting up the server

Building the application

Summary

7. Cordova and ngCordova

7. Cordova and ngCordova

Setting up a platform-specific SDK

Testing the setup

Getting started with Cordova plugins

The Ionic plugin API

The Cordova whitelist plugin

ngCordova

Summary

8. Building a Messaging App

8. Building a Messaging App

The Ionic Chat app

The application architecture

Developing the application

Testing the application

Summary

9. Releasing the Ionic App

9. Releasing the Ionic App

Preparing the app for distribution

The PhoneGap service

Generating installers using the Cordova CLI

The Ionic package

Summary

A. Additional Topics and Tips

A. Additional Topics and Tips

Ionic CLI

Ionic Creator

Ionic.io apps

Ionic Push

Ionic Deploy

Ionic Vagrant box

Ionic Sublime Text plugins

Summary

Index

Index

Customer Reviews

4.4 (14)

5 star

64.3%

4 star

21.4%

3 star

7.1%

2 star

0

1 star

7.1%

Building the application

Now that we have our server set up and have an idea as to what we are going to build, let's start building it. We are going to perform the following steps, for us to easily build the app:

Scaffold the side menu template.
Refactor the template.
Build the authentication, local storage and REST API Factories.
Create controllers for each route and integrate them with the corresponding Factories.
Create templates and integrate with the Controller data.

Step 1 – Scaffolding the side menu template

The first thing we are going to do is scaffold a side menu template. Create a folder named chapter6. Open a terminal/prompt inside the chapter6 folder and run this:

ionic start -a "Ionic Book Store" -i app.bookstore.ionic book-store sidemenu

This will scaffold the side menu application. We will not be using theming in our Bookstore app, so there will be no SCSS setup.

Step 2 – Refactoring the template

In all the examples we have built so far, we have created components from scratch. But...

Search

Your notes and bookmarks