Ionic

7 Jun 20237 minutes to read

Introduction

Ionic is an open source Mobile SDK for developing native and progressive web apps. Ionic offers a library of mobile-optimized HTML, CSS and JS components and tools for building highly interactive native and progressive Web apps. Built with Sass, optimized for AngularJS.
Please go through the http://ionicframework.com/ page.

Prerequisites and Compatibility

Prerequisites

While running the ionic it requires Node.js (which includes npm) on your system.

Install Ionic

First install the latest Cordova and Ionic command-line tools in your terminal. Follow the Windows and Mac guides to install required tools for development.

Windows

HTML

npm install -g cordova ionic

Mac

HTML

$ sudo npm install -g cordova ionic

Getting started

Steps to add the sample and run the application

Get basic application

Get Syncfusion blank ionic project from this link. Then extract the project, folder holds following files

Now open command prompt and navigate to this ionic project location, then type npm command for installing node_modules in project

HTML

npm install

Using Syncfusion Essential JS controls with Ionic Framework

This step by step guide is used to create a combination of Essential JS UI controls with Ionic Framework.

After install npm, add the Syncfusion JS and CSS file reference in index.html file from www folder location

Adding the required style sheets into CSS folder

In the below specified location, you can find all the required web related theme folders. Copy the folder web in to the www*ej\themes* folder of your application.

(installed location)/Syncfusion/Essential Studio/24.2.3/JavaScript/assets/css

Now, Include the specific theme reference to your HTML file by referring the appropriate ej.web.all.min.css file from a particular theme folder (here, we have referred the default-theme), within html file, head section

HTML

<link href="ej/themes/web/default-theme/ej.web.all.min.css" rel="stylesheet">

Adding the required JavaScript files

Essential JS widgets requires the following external dependent scripts,

jQuery (version supported from 1.7.1)
jsrender.min.js

In the below specified location, you can find the dependent script files. Copy and paste it into the www\ej\scripts folder of your application,

(installed location)/Syncfusion/Essential Studio/24.2.3/JavaScript/assets/external

Apart from the above dependent scripts, you need to refer the ej.web.all.min.js file, which contains all the JavaScript components script and globalize library packed together in a minified format.

Copy the ej.web.all.min.js file into the www**ej\scripts** folder.

(installed location)/Syncfusion/Essential Studio/24.2.3/JavaScript/assets/scripts/web

Now, Include the below scripts reference within html file, head section

HTML

<script src="ej/scripts/jquery-2.1.4.min.js"></script>
<script src="ej/scripts/jsrender.min.js"></script>
<script src="ej/scripts/ej.web.all.min.js"></script>

Supported jQuery Versions

The following link provides jQuery compatibility information of ej controls

https://help.syncfusion.com/js/control-initialization#supported-jquery-versions

Steps to change application name

Application name of ionic project possible to change by following simple steps

Open config.xml file from ionic project location, here <name> tag is responsible for the app name. Put your required name between this tag.

HTML

<name> Syncfusion </name>

Initialize control

Add the Syncfusion grid control sample inside the ion-content in index.html file. All the Syncfusion widget’s control directives are prefixed with ej- to avoid conflict with other library directives and its properties are defined using e- prefix followed by the property name.

HTML

<div id="BasicGrid" class="ang-grid" ej-grid e-datasource="employeeList" e-allowsorting="true" e-allowpaging="true" e-pagesettings-pagesize="5" e-isresponsive="true" e-minwidth="500" e-allowscrolling="true" e-scrollsettings-height="100%">
  <div e-columns>
    <div e-column e-headertext="Employee ID" e-template="#templateDetails" e-width="90"></div>
    <div e-column e-field="CompanyName" e-headertext="Company Name" e-width="90"></div>
    <div e-column e-field="Phone" e-headertext="Phone" e-width="90"></div>
</div>

Declare angular dependency

Essential JS includes AngularJS directives for all controls in ej.widget.angular.min.js script file. In the below specified location, you can find required script file

Copy the ej.widget.angular.min.js file into the www**ej\scripts** folder.

(installed location)/Syncfusion/Essential Studio/24.2.3/JavaScript/assets/scripts/common

Then include the below scripts reference within html file, head section

HTML

<script src="ej/scripts/ej.widget.angular.min.js"></script>

All the Essential JS directives have been encapsulated into a single module called ejAngular, so the first step would be to declare dependency for this module within your ionic application. Now open the app.js in the location (www/js) modify codes as below

JAVASCRIPT

angular.module('starter', ['ejangular', 'ionic'])

Initializing controller

In app.js file, you can create separate controller for each control used in that project. Control properties declared inside the corresponding controller

JAVASCRIPT

.controller('GridCtrl', function ($scope, $compile, $document) {

    $scope.dateValue = "2/3/2013";

})

Then add ng-controller attribute in sample holding container as mentioned below

HTML

<div ng-controller="GridCtrl">
  <div class="angularbind">
    <div id="control">
      <div id="BasicGrid" class="ang-grid" ej-grid e-datasource="employeeList" e-allowsorting="true" e-allowpaging="true" e-pagesettings-pagesize="5" e-isresponsive="true" e-minwidth="500" e-allowscrolling="true" e-scrollsettings-height="100%">
        <div e-columns>
          <div e-column e-headertext="Employee ID" e-template="#templateDetails" e-width="90"></div>
          <div e-column e-field="CompanyName" e-headertext="Company Name" e-width="90"></div>
          <div e-column e-field="Phone" e-headertext="Phone" e-width="90"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/x-jsrender" id="templateDetails">
  <div class="entries"><b>Employee ID: </b></div>
  <div class="entries"><b>Employee Name: </b></div>
  <div class="entries"><b>Gender: </b></div>
</script>

Steps for run your application

Run application in browser

Testing your app in the browser it fast, easy and convenient when your app is in development

HTML

cd myApp

ionic serve

Deploy application in device

Android

Deploying app into android device, checkout below system requirements

Requirements for Android

Android Studio
Updated Android SDK tools, platform and component dependencies. Available through Android Studio’s SDK Manager

Commands

HTML

ionic platform add android

ionic build android

ionic run android

IOS

Requirements for IOS

Deploying app into ios device, checkout this system requirements

Xcode 7 or higher
iOS 9
A free Apple ID or paid Apple Developer account

Commands

HTML

$ ionic platform add ios

$ ionic build ios

$ ionic emulate ios