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%

Setting up SCSS in our Ionic project

Now we will see how to set up SCSS in an existing Ionic project. We will start off by scaffolding a new tabs project. Create a folder named chapter4 and inside that open a new terminal/prompt and run:

ionic start -a "Example 13" -i app.example.thirteen example13 tabs

We can set up SCSS in our project in two ways:

Manual setup
Ionic CLI task

The manual setup

To set up SCSS manually, we will follow these steps:

Using the cd command, step into the example13 folder:
```
cd example13
```
Install the required dependencies. The Ionic project that we scaffold from templates comes with a package.json file. This file already has all the dependencies needed to set up SCSS. Also, the project ships with a gulpFile.js, with the SCSS task defined, that watches for the changes in your SCSS files and builds the CSS file on-the-fly.
To set up these dependencies, run this:
```
npm install
```
Also, if you did not install Gulp globally earlier, you can do so by running the following command:
```
...
```

Search

Your notes and bookmarks