Book Image

Ionic Cookbook

By : Hoc Phan
Book Image

Ionic Cookbook

By: Hoc Phan

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Ionic Cookbook
Hoc Phan
Oct, 2015 | 264 pages
Small book image
Ionic 2 Cookbook
Hoc Phan
Nov, 2016 | 320 pages
Small book image
Ionic Framework By Example
Sani Yusuf
Jan, 2016 | 158 pages
Small book image
Ionic Cookbook
Indermohan Singh
Apr, 2018 | 390 pages
Table of Contents (18 chapters)
Ionic Cookbook
Ionic Cookbook
Credits
Credits
Foreword
Foreword
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Creating Our First App with Ionic
Creating Our First App with Ionic
Introduction
Setting up a development environment
Creating a HelloWorld app via CLI
Creating a HelloWorld app via Ionic Creator
Copying examples from Ionic Codepen Demos
Viewing the app using your web browser
Viewing the app using iOS Simulator
Viewing the app using Xcode for iOS
Viewing the app using Genymotion for Android
Viewing the app using Ionic View
Customizing the app folder structure
2
Managing States and Navigation
Managing States and Navigation
Introduction
Creating a tab interface with nested views
Creating a multistep form with validation
3
Adding Device Features Support
Adding Device Features Support
Introduction
Taking a photo using the device camera
Capturing video and allowing playback
Composing an email with an attachment from an app
Picking and adding a contact
Adding Google Maps with geocoding support
4
Offline Data Storage
Offline Data Storage
Introduction
Creating a to-do app using ngStorage for Local Storage
Creating a social networking app using SQLite
5
Handling Gestures and Events
Handling Gestures and Events
Introduction
Detecting drag events with a gesture coordinate
Communication between a view, controller, and directive using events
6
App Theme Customization
App Theme Customization
Introduction
Customizing themes for specific platforms
Creating an introduction screen with a custom header
7
Extending Ionic with Your Own Components
Extending Ionic with Your Own Components
Introduction
Creating a scroll progress bar directive
Creating a custom filter
Animating an app using requestAnimationFrame with event binding
8
User Registration and Authentication
User Registration and Authentication
Introduction
Configuring a Facebook app with Firebase authentication
Configuring a Twitter app with Firebase authentication
Configuring a Google+ project with Firebase authentication
Creating an Ionic social authentication project for Facebook using $firebaseAuth
Creating a LinkedIn app and configuring authentication in Auth0
Integrating Auth0's LinkedIn authentication in an Ionic project
9
Saving and Loading Data Using Firebase
Saving and Loading Data Using Firebase
Introduction
Saving array data to Firebase
Rendering a large Firebase data set using collection-repeat
Saving form data to Firebase
10
Finalizing Your Apps for Different Platforms
Finalizing Your Apps for Different Platforms
Introduction
Building and publishing an app for iOS
Building and publishing an app for Android
Using PhoneGap Build for cross-platform applications
Index
Index

Customizing the app folder structure

The structure in starter templates may not be good enough depending on the app. It's important to understand its folder structure to allow further customization. Since the Ionic project is based on Cordova, most of what you see will be either iOS or Android related. This is the breakdown of what is inside the folder:

platforms/ (specific built code for iOS, Android, or Windows phone)

lib/

plugins/ (Cordova plugins)

ionic/ (CSS, fonts, JS, and SCSS from Ionic)

scss/

templates/ (UI-router templates)

ionic.app.scss (your app's custom Sass file)

index.html (main file)

www/

bower.json

css/ (your own css)

gulpfile.js

style.css (processed CSS file that will automatically be generated)

config.xml

img/ (your own images)

ionic.project

js/

package.json

How to do it...

All application logic customization should be done in the /www folder as index.html is the bootstrap template. If you add in more JavaScript modules, you can put them in the /www/js/lib folder.

There is no need to modify the /platforms or /plugins folders manually unless troubleshooting needs to be done. Otherwise, the ionic or cordova CLI will automate the content inside those folders.

Previous Section
End of Chapter 1
Next Chapter