Ionic

Template

Table of Contents
1. introduction
2. Setup
3. Page Layouts
4. Routing
5. Utilities
6. Services
7. Changelog
8. Roadmap

Ionic Template

JuicyLauncher
Template project to develop hybrid apps using Ionic Framework by JuicyApp Limited.
This documentation will provide information as a complete guide to build a custom app upon the app foundation, includes
how to make use of prebuilt services, utility functions, default layouts, etc.

Feature List
The template project aims at better code reuse, and contains generic setup for common components.
There are different sections as below:
Page Layouts: preset template files as different layout options
Routing: basic routing among pages
Utilities: commonly used functions throughout the app
Services: shared services as modules serving different purposes
Multilingual: separate files to store content in different languages
App Icon and Splash Screen: preset images from Ionic's Icon and Splash Screen Image Generation
Minification: concat and minify JS / CSS scripts for production use; integrated with command ionic serve

introduction

Ionic Template

Setup Guide
Basic Setup
Follow these steps to get started from a template project.
1. Git clone the repository
2. Execute command npm install to install required Node.js components (e.g. for Gulp tasks to compile JS files)
3. Execute command ionic state restore to add all required plugins
4. Execute command ionic platform add {platform} to prepare for different platforms (where {platform} can be ios or
android)
5. To test on web browsers, execute command ionic serve which will open a browser tab upon success
6. To test on emulator, execute command ionic emulate {platform}
7. To test on real device, execute command ionic run {platform}

Optional Setup
To add Crosswalk browser, follow the steps on Ionic reference page.

Setup

Ionic Template

Page Layouts
Welcome
Page layout to display swipeable slider with description and images.

Sidemenu
Page layout with Navigation Drawer.

Tabs
Page layout with tab switching function.

Page Layouts

Ionic Template

Routing
Basic routing to pages.
(TODO: describe routing methods to: normal pages, pages with tabs or sidemenu, pages with parameters, etc.)

Routing

Ionic Template

Utilities
$localstorage
Using HTML5 local storage.

$language
Language switching.

$auth
User authentication (to be completed).

$authParse
User authentication via Parse.com.

$loading
Toggle loading indicator.

$popup
Handle popup messages.

$is
Data verification (inspired by library: is.js)

Utilities

Ionic Template

Services
Modal
Control modals and display template.

API
Call API endpoints by different methods (e.g. GET / POST), different data type (e.g. URL query / JSON).

Services

Ionic Template

Changelog
To note down the changes among projects versions.
(To be completed)

Changelog

Ionic Template

Roadmap
Below features are pending to be added into the project.
Page layouts:
List: page layout for item listing (with pull-to-refresh and load-more features)
Grid: page layout for grid view
Masonry: page layout for masonry view
Sign Up: page to create user account
Login: page to login user account
Search: page to search by keywords / filters
Gallery: page (or modal) to browse multiple photos through sliding
Calendar: page to display calender view
Contact: page with feedback form (e.g. Google Form)
Settings: page to update app preferences (e.g. switch language)
Utilites:
$toast: handle Toast messages
$datetime: datetime manipulation
item bookmark (offline)
handle Action Sheet
handle file upload, with preview gallery
append conversation chat message
social feeds integration
social sharing
in-app purchase
Themable: core SASS file on top of Ionic styling, with variables to change theme easily
User authentication: basic setup of storing user session, logout feature, etc.
Push notification: Ionic Push or Parse Push
Analytics: integration with analytic platform (e.g. Google Analytics for mobile, Parse Analytics, etc.)
Directives: custom Angular directives (to be decided)
Upgrade: future upgrade to Ionic v2

Roadmap

10