ionic tutorial - Ionic - Ionic Tutorial - Ionic forums

WHAT IS IONIC ?

IONIC Is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser

History of IONIC

IONIC was founded by DRIFTY CO. , BEN SPERRY and MAX LYNCH. in 2012.

IONIC was created by drifty co. In 2013. Drifty's prior products include codiqa and jetstrap.

Today, IONIC is the world's most popular cross-platform mobile development and 5 Million developers.

Why using IONIC

Is open source framework.

One source for all the supported platforms.

Main development in html, css and js, which almost all web developers.

Ionic Stack

Ionic Components

Advantages of Ionic

IONIC solves multiple device resolution issues.

It has own icons (IONICONS).

Less time building your app.

IONIC APP RUN ON MANY PLATFORMS

Amazon Fire OS

Android

BlackBerry

Firefox OS

IOS

Mac OS X

UBUNTU

Web OS

Windows phone 7

Windows phone 8

Browser

Ionic Install

First Install JDK

Next install Node.Js

Then install Apache cordova and ionic.

Add ionic templates.

Start a project.

Install Visual Studio code (for edit your app)

DOWNLOAD AND INSTALL JDK

Following Link : http://www.oracle.com/technetwork/java/javase/downloads/index-jsp- 138363.html

DOWNLOAD AND INSTALL NODE.JS

Following Link : https://nodejs.org/en/download/

install Apache cordova and ionic

Ionic Templates

START A IONIC Project

Install and download Visual Studio Code

Then you can open a project using Visual Studio code.

After you can edit your App.Following Link : https://code.visualstudio.com/download

ionic tutorial - Ionic Framework

Connecting Ionic with any database

• You can't do it directly from ionic framework in ionicframework

Create Dialog in Ionic

• Create dialog in ionic in ionicframework

Deploy Ionic as a website

• Simply copy the www folder to your web server in ionicframework

Device camera and photo library access from Ionic application

• For ionic 3 example
• Open camara and photo gallery

Getting started with ionic-framework

• Installation or setup in ionicframework

How to use EcmaScript 6 features in Ionic

• By using gulp babel and gulp plumber in ionicframework

Ionic - Analyze your app with jshint and gulp-jshint as part of your build process

• Add a gulp task in ionicframework
• Add makefile in ionicframework
• Create jshintrc file (optional) in ionicframework

Ionic AngularJS extensions

• Form inputs in ionicframework
• Modal windows in ionicframework

Ionic Backend Services (ionic.io)

• Introduction and setup in ionicframework

Ionic CLI hooks

• Checking for errors in your javascript files in before prepare using jshint in ionicframework

Ionic Cloud for Yeoman Ionic Projects

• Ionic platform Ionic Cloud for yo yeoman ionic projects in ionicframework

Ionic CSS components

• Basic grid system syntax
• Basic list item syntax in ionic framework
• Basic usage of utility colors in css framework

Ionic infinite scroll to show load items on demand (Already available data not by Http Request)

• Load n number of available data on demand in ionicframework

Ionicons

• Basic usage in ionicframework
• Extended usage in ionicframework

Publishing your Ionic app

• Building release version from macos in ionicframework

Run Ionic App on Emulator or on your Phone

• Run ionic app on emulator or on your phone in ionicframework

Start Building Apps in Ionic

• Starting an ionic app in ionicframework

Testing Ionic App in a Browser

• Testing in a browser in ionicframework

What's the difference between “ionic build” and “ionic prepare”

• Ionic build vs ionic prepare in ionicframework

ionic tutorial - Ionic2

Getting started with ionic2

• Installation or Setup

Using Services

• Share information between different pages

Geolocation

• Simple usage
• Watching the position

Setup and Debugging Ionic 2 in Visual Studio Code

• Create and Add your Ionic Project in VSCode
• Installation of VSCode
• Run and Debug your Ionic Project

From code to the App store - Android

• Production ready

Social Login with Angularfire2/Firebase

• Native Facebook Login with Angularfire2/Firebase

Modals

• Modal with parameters on create
• Modal with Parameters on dismiss
• Simple Modal
• Using Modals

Workaround for 'show-delete' in >ion-list< deprecation

• Solution

Angularfire2 with Ionic2

• AngularFire initialization
• Using AngularFire2

InAppBrowser

• A live example of this usage is this app
• Code example to use InAppBrowser

Constructor and OnInit

• ngOnInit example to get the list of students on page/view
• ngOnInit method to get the list of students on view load
• Student Service Method example for using Http in constructor

Add ionic app to ionic view

• Steps to add your app to ionic view

Unit Testing

• Unit Tests with Karma/Jasmine

Using Tabs

• Change selected tab programatically from child Page
• Change tab with selectedIndex

Push notification sent & receive

• Initialization
• Receiving a push notification
• Registration

Ionic2 CSS components

• Cards
• Grid

ionic tutorial - Ionic3

Getting started with ionic3

• Installation or Setup