Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library 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
Learning Ionic

Learning Ionic

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

Learning Ionic

4.4 (14)
By: Arvind 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
Lock 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
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
chevron up
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

Ionic CSS components

Ionic is a combination of a powerful mobile CSS framework and a bunch of awesome AngularJS directives and services. With these, the time taken to market any idea is quite minimal. The Ionic CSS framework consists of most of the components you need to build an app.

To test-drive the available CSS components, we will scaffold a blank starter template and then add the visual components of Ionic.

Before we start scaffolding, we will create a new folder named chapter3, and scaffold all the examples from this chapter in that folder.

Note

In this chapter, we will be scaffolding one app per component to understand it better. If you want, you can use one app for all the examples.

To scaffold a blank app, run this:

ionic start -a "Example 5" -i app.example.five example5 blank

The Ionic grid system

To get a fine grain control of your layout in terms of positioning the components on the page or aligning elements next to each other with consistency, you need a grid system, and...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Learning Ionic
End of Section 3
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

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

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon