Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Learning Ionic
  • Table Of Contents Toc
  • Feedback & Rating feedback
Learning Ionic

Learning Ionic

By : Ravulavaru
4.4 (14)
Buy this Book
close
close
Learning Ionic

Learning Ionic

4.4 (14)
By: Ravulavaru
Buy this Book

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.
Table of Contents (12 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Free Chapter
1
1. Ionic – Powered by AngularJS
Icon
1. Ionic – Powered by AngularJS
Icon
Understanding the separation of concerns
Icon
AngularJS components
Icon
AngularJS directives
Icon
AngularJS services
Icon
AngularJS resources
Icon
Summary
2
2. Welcome to Ionic
chevron up
Icon
2. Welcome to Ionic
Icon
Mobile Hybrid Architecture
Icon
What is Apache Cordova?
Icon
What is Ionic?
Icon
Software setup
Icon
The platform guide
Icon
Hello Ionic
Icon
The browser developer tools setup
Icon
The Ionic project structure
Icon
Scaffolding the tabs template
Icon
Scaffolding the side menu template
Icon
generator-ionic
Icon
Summary
3
3. Ionic CSS Components and Navigation
Icon
3. Ionic CSS Components and Navigation
Icon
Ionic CSS components
Icon
The Ionic router
Icon
Summary
4
4. Ionic and SCSS
Icon
4. Ionic and SCSS
Icon
What is Sass?
Icon
Setting up SCSS in our Ionic project
Icon
Working with Ionic SCSS
Icon
Understanding the Ionic SCSS setup
Icon
The SCSS workflow
Icon
Building a swatch
Icon
Summary
5
5. Ionic Directives and Services
Icon
5. Ionic Directives and Services
Icon
Ionic directives and services
Icon
The Ionic Platform service
Icon
Content
Icon
Ionic loading
Icon
The ion-list and ion-item directives
Icon
Gesture directives and services
Icon
Summary
6
6. Building a Bookstore App
Icon
6. Building a Bookstore App
Icon
An introduction to the Bookstore application
Icon
The Bookstore architecture
Icon
Setting up the server
Icon
Building the application
Icon
Summary
7
7. Cordova and ngCordova
Icon
7. Cordova and ngCordova
Icon
Setting up a platform-specific SDK
Icon
Testing the setup
Icon
Getting started with Cordova plugins
Icon
The Ionic plugin API
Icon
The Cordova whitelist plugin
Icon
ngCordova
Icon
Summary
8
8. Building a Messaging App
Icon
8. Building a Messaging App
Icon
The Ionic Chat app
Icon
The application architecture
Icon
Developing the application
Icon
Testing the application
Icon
Summary
9
9. Releasing the Ionic App
Icon
9. Releasing the Ionic App
Icon
Preparing the app for distribution
Icon
The PhoneGap service
Icon
Generating installers using the Cordova CLI
Icon
The Ionic package
Icon
Summary
10
A. Additional Topics and Tips
Icon
A. Additional Topics and Tips
Icon
Ionic CLI
Icon
Ionic Creator
Icon
Ionic.io apps
Icon
Ionic Push
Icon
Ionic Deploy
Icon
Ionic Vagrant box
Icon
Ionic Sublime Text plugins
Icon
Summary
11
Index
Icon
Index

Hello Ionic

Now that we are done with the software setup, we will scaffold a few Ionic apps.

Ionic has three main/go-to templates using which we can quickly start developing apps:

  • Blank: This is a blank Ionic project with one page

  • Tabs: This is a sample app that is built using Ionic tabs

  • Side menu: This is a sample app that is built to consume side menu driven navigation

To understand the basics of scaffolding, we will start with the blank template.

To keep our learning process clean, we will create a folder structure to work with Ionic projects. Create a folder named ionicApps, and then create a folder inside it called chapter2.

Next, open a new terminal/prompt and change the directory (cd) to the ionicApps folder and from there to chapter2 folder. Now run the following command:

ionic start -a "Example 1" -i app.example.one example1 blank

In the preceding command:

  • -a "Example 1": This is the human-readable name of the app

  • –i app.example.one: This is the app ID/reverse domain name

  • example1: This...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
End of Section 12
Next Section

Create a Note

Modal Close icon
You need to login to use this feature.
notes
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Delete Note

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Edit Note

Modal Close icon
Write a note (max 255 characters)
Cancel
Update Note

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY