Getting started with ionic-framework

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

or

$ 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

or

$ ionic start myApp tabs

or

$ 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 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: http://ionicframework.com/docs/guide
  • Yeoman: http://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 http://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