Getting started with ionic-framework

Remarks#

Ionic is a framework for developing mobile applications with HTML, CSS, and JavaScript. Ionic applications run as native applications and have a native “look and feel”.

Ionic is built on the AngularJS framework and provides a complete solution to design, build, and package mobile applications. Design is accomplished with a collection of template tools and a custom icon library. Ionic provides custom CSS/SASS components as well as Javascript UI Extensions. Ionic apps can be built, emulated, and packaged with their Command Line Interface (CLI).

Ionic templates are dynamic and responsive and adapt to their environment to provide a native “look and feel”. This adaptation includes layout, style, and icons. Ionic makes independent platform customization available as well. Because Ionic apps use front end web technology, they can also be viewed in a browser for faster development.

Ionic apps are built on top of Apache Cordova by default. They have access to all Cordova Plugins which let you use native functionality, such as push notifications, camera, accelerometer, etc. Cordova apps work on multiple platforms and devices (phones, tablets, etc.) with very little extra effort. Cordova may be switched out with other cross-platform technologies such as trigger.io.

Versions#

Version	Release Date
1.3.1 "el salvador"	2016-05-12
1.3.0 "delhi"	2016-04-21
1.2.0 "zirconium-zeren"	2015-12-09
1.1.0 "xenon-xerus"	2015-08-13
1.0.0 "uranium-unicorn"	2015-05-12

Installation or Setup

1. Install the Ionic Framework and Cordova (since Ionic apps are based on Cordova) using npm (the Node Package Manager):

Make sure you have an up-to-date version of Node.js installed on your system. If you don’t have Node.js installed, you can install it from here.

Also, for Mac users, having the latest Xcode version installed on your system brings to you command-line-tools and iOs Simulator, download here.

Open a terminal window (Mac) or a command window (Windows), and install Cordova and Ionic:

$ npm install -g cordova ionic

On a Mac, you may have to use sudo depending on your system configuration:

$ sudo npm install -g cordova ionic

If you already have Cordova and Ionic installed on your computer, make sure you update to the latest version:

$ npm update -g cordova ionic

$ sudo npm update -g cordova ionic

Follow the Android and iOS platform guides to install required platform dependencies.

Note: iOS development requires Mac OS X. iOS simulator through the Ionic CLI requires the ios-sim npm package, which can be installed with the command:

$ sudo npm -g install ios-sim

2. Start a new Ionic project:

Create an Ionic project using one of the ready-made app templates, or a blank one to start fresh.

$ ionic start myApp blank

$ ionic start myApp tabs

$ ionic start myApp sidemenu

3. Test the Ionic app:

To test your Ionic app in a desktop browser on both iOS and Android platforms:

$ ionic serve --lab

Whereas ionic serve --lab is great to test the app UI on multiple platforms it could lead to some problems for Javascript Console or Element Inspection, in that case what you may prefer:

$ ionic serve

To test your Ionic app in an emulator:

$ cd myApp
$ ionic platform add ios android
$ ionic build ios
$ ionic emulate ios

Substitute ios with android for Android emulator testing:

$ ionic build android
$ ionic emulate android

To test your Ionic app in an Android device connected via USB:

$ ionic run android

To test your Ionic app in an iOS device connected via USB:

$ ionic run ios --device

Ionic Framework Introduction and Installation and Setup

Ionic Framework

A Cross-platform mobile application development framework using Angular JS and Front End web technologies.

Official website: https://ionicframework.com/

Documentation: https://ionicframework.com/docs/

Installation and Setup

Installation Ionic required NPM(Node Package Manager) and Cordova.

You can download and install Npde JS from here which comes with NPM out of the Box.

To download Apache Cordova you can use NPM from command line

npm install -g cordova

If you already have NPM and Cordova then you can install ionic framework from Command line using following command.

npm install -g ionic

This will install and setup ionic framework for you to use it from command line.

Note* Based on your system environment you might need to execute with Admin privileges.

Starting A New Project

To Start a new Ionic Framework Project you can use following command

ionic start myproject

ionic start myproject [template_name]

Templates:

Ionic allows You to create project using some built in templates

tabs(default): which will create a simple app with tab view.

sidemenu: which will create ionic app with side menu.

blank: which will create a blank ionic app.

which will create a new folder named myproject with all the ionic project files.

to test project in your browser you can use following command

ionic serve --lab

ionic serve

Run an Emulate To execute or test app on emulator or phone first you will have to add platform for that you can use following command

ionic platform [Platform Name]
ionic build [Platform Name]
ionic emulate [platform name]

Platform Names you can directly mention android and ios for respective Platforms you can mention multiple platform names also separated by space.

To run your app you can use

ionic run [platform name]

For help you can use

ionic --help

ionic help

Refer this link for detailed explanation of ionic cli.

Refer this link for CSS components available in ionic.

Refer this link for Javascript API reference for ionic.

For quicker development with ionic you can try ionic Playground also.

Best of luck with ionic framework…

Ionic Framework Hello World App

After All the setup, To make Hello World App

To create Simple Blank App, run below command on terminal :

ionic start HelloWorld blank // create new project

cd HelloWorld // get into HelloWorld directory
open the HelloWorld Project in subline/webstrome IDE :
- Edit index.html, in www/ ditectory
Ionic Hello World App

Hello World..!
To run in browser from terminal :

ionic serve // run the app in browser
To add platform :

ionic platform add android // add android platform ionic platform add ios // add ios platform
To run on device :

adb devices // to check devices is connected ionic run android // to run on android devices ionic run ios // to run on ios devices
To run in livereload :

ionic run android -c -s -l // to check app in live reload with console.

Ionic Platform (Ionic Cloud) for Yo (Yeoman) Ionic Projects

Ionic Platform:

Build, push, deploy, and scale your Ionic apps, the easy way.

Title Description:

The Ionic Platform is a cloud platform for managing and scaling cross-platform mobile apps. Integrated services enable you and your team to build, deploy, and grow your apps efficiently.

Document Objective:
Ionic Platform works well with the standard Ionic projects. But projects following any Non-standard Directory Structure may face a few hurdles. This documents provides the steps to use Ionic Platform in the Ionic projects created using Yeoman.

Document Scope:
This document covers the basic steps for creating an Ionic project using Yeoman and integrating it with Ionic Platform using the Ionic Platform Web Client. This document covers the basic steps to utilize Ionic Deploy, Ionic Analytics and Ionic Push.

Intended Audience:
The intended audience for this document is Web/Mobile App developers, with both beginner and expert level expertise, who are familiar with the below Prerequisites.

Prerequisites:
You should be familiar with the following frameworks/tools before trying this document.

AngularJs: https://docs.angularjs.org/guide
IonicFramework: https://ionicframework.com/docs/guide
Yeoman: https://yeoman.io/codelab/index.html
Ionic Generator: https://github.com/diegonetto/generator-ionic
Ionic Platform: https://ionic.io/platform

Ionic Framework generator

A generator for the Ionic Framework from Yeoman, the Web’s Scaffolding tool for modern webapps

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. npm is the package manager for JavaScript. Download and install Node (and npm) from https://nodejs.org

$ npm install npm –g
$ npm install -g yo

Yeoman helps you to kick-start new projects, prescribing best practices and tools to help you stay productive.

$ yo ionic [app-name]

In package.json include the following in devDependencies

"grunt-string-replace": "^1.2.1"

In bower.json include the following in dependencies

"ionic-platform-web-client": "^0.7.1"

In Gruntfile.js change the scripts folder to ‘js’. Change in index.html too if required.

grunt.initConfig({   yeoman: {…………
    scripts: 'js',
    ………… } })

Then run

$ bower install && npm install
$ grunt
$ grunt serve

$ cordova platform add android 
$ grunt build:android --debug

ionic-platform-web-client

A web client that provides interactions with the Ionic platform.

We need some code to let your app talk to the Ionic Platform. We need to add the Ionic platform web client for the Ionic app to interface with the plugins and the Ionic.io platform.

$ ionic io init

In your app.js add the ‘ionic.service.core’ module dependency. In Gruntfile.js add the grunt task ‘ionicSettings’ as given below.

grunt.initConfig({
ionicSettings: JSON.stringify(grunt.file.readJSON('./.io-config.json')),

ionicIoBundlePath: 'www/bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js',

'string-replace': {
  ionicSettings: {
    files: {
      '<%= ionicIoBundlePath %>': '<%= ionicIoBundlePath %>',
    },
    options: {
      replacements: [
        {
          pattern: 
        '"IONIC_SETTINGS_STRING_START";"IONIC_SETTINGS_STRING_END"',
          replacement: 
        '"IONIC_SETTINGS_STRING_START";var settings =<%= ionicSettings %>; return { get: function(setting) { if (settings[setting]) { return settings[setting]; } return null; } };"IONIC_SETTINGS_STRING_END";'
        }
      ]
    }
  }
},
       copy: {
    ionicPlatform:{
                expand: true,
                cwd: 'app/bower_components/ionic-platform-web-client/dist/',
                src: ['**'],
                dest: 'www/bower_components/ionic-platform-web-client/dist'
               }
    }
});

grunt.registerTask('ionicSettings', ['copy:ionicPlatform','string-replace:ionicSettings']);

Add the ‘ionicSettings’ in init and compress tasks after copy. In index.html move the below