May
3
2017

Hybrid Mobile App Development with Ionic and Angular JS

Article by mb_chda

Ionic is a completely open source SDK for hybrid mobile app development. If you know how to build Websites, then you already know how to build Mobile Apps!

What is Ionic

Ionic

Ionic is a completely open source SDK for hybrid mobile app development. It was created by Max Lynch (Co-Founder and CEO), Ben Sperry (Co-Founder and Chief Design Officer), and Adam Bradley (Co-Creator and framework lead) of Ionic, formerly known as Drifty Co.

It is built on top of Angular JS and Apache Cordova. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5 & SASS and it offers quality web and native app components for building highly interactive native and progressive web apps with Angular. Apps developed using it can be easily distributed through native app stores to be installed on devices.

It is licensed under MIT license.

Features of Ionic

Performance: Is built to perform great on the latest mobile devices. Designed with best practices like touch-optimized gestures and efficient hardware accelerated transitions.
Angular & Ionic: Builds on top of Angular to create a powerful SDK well-suited for building rich and robust mobile apps for the app store and for the mobile web.
Look nice: Provides useful pre-generated app setup with simple layouts which look nice & customizable
Built for serious app development: Is using Angular JS MVC architecture for building rich single page applications optimized for mobile devices.
Native and Web: Follows standard native mobile app UI guidelines and uses native SDKs, bringing the UI standards and device features of native apps together with the full power and flexibility of the open web. Ionic uses Cordova to deploy natively, or runs in the browser as a Progressive Web App.
Develop once. Deploy everywhere.
Beautifully designed: Clean, simple, and functional. It has been designed to work and display beautifully on all current mobile devices and platforms. With ready-made mobile components, typography and a gorgeous yet extensible base theme that adapts to each platform, you will be building in style.
Has a powerful CLI: Use just one command to create, build, test and deploy your Ionic apps onto any platform. With amazing features like Live Reload and integrated logging.
Easy to learn: All you need to know are HTML, CSS, and JavaScript: the building blocks of the web. You will even learn AngularJS and be shipping apps in no time.
Built by web nerds: Built and maintained by developers and designers passionate about web technologies, Ionic focuses on pushing the web forward across all mobile devices and makes mobile development awesome with web technology.
Live Reload: One of the best features of the Ionic CLI is the LiveReload server that gets started when you run ionic serve. This allows you to develop your app in the browser and it will update instantly when changes are made to any development files. Without re-compiling & redeploying after every single change, changes will be loaded.
Ionic View: Valuable platform for uploading, sharing and testing your application on native devices.
License: Ionic is released under MIT license.

Components of Ionic

CSS components: With a native look and feel, these components offer almost all elements that mobile application needs. The components default styling can be easily overridden to accommodate your own design.
JavaScript components: These components are extending CSS components with JavaScript functionalities to cover all mobile elements that cannot be done only with HTML and CSS.
Cordova Plugins: Apache Cordova plugins offer API needed for using native device functions with JavaScript code.
Ionic CLI: This is NodeJS utility, powered with commands for starting, building, running and emulating applications.
Ionicons: This is the icon pack which includes hundreds of the most common app icons.
Ionic View: 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. It makes it easy to preview your Ionic/Cordova app, share your apps with clients and testers around the world without having to go through the App Store.

Advantages of Ionic Framework

Hybrid app development saves time: This means that you can package your applications for IOS, Android, Windows Phone and Firefox OS which can save you a lot of working time and cost of not having to develop two application for Android and iPhone.
Customizable default layout: Starting your app is very easy since it provides useful pre-generated app setup with simple layouts which are easy to customize.
Maintainable: The apps are built in a very clean and modular way, so it is very maintainable and easy to update.
Regular framework updates: Ionic developers are working together with Google developers to improve the framework. The updates are coming out regularly.
Support: Ionic support group is always willing to help when needed.

Limitations of Ionic

Testing for multiple devices & platforms: Testing can be tricky since the browser does not always give you the right information about the phone environment. There are so many different devices and platforms and you usually need to cover most of them.
Compatibility issues with native functionality: It can be hard to combine different native functionalities. A lot of the time you will run into plugin compatibility issues, which leads to build errors hard to debug.

Let’s Start!

Audience

JavaScript developers those who are new to mobile development.

Prerequisites

You need to be familiar with HTML, CSS and JavaScript.
Since Ionic is built on top of AngularJS and Apache Cordova you will need to have a basic knowledge about these technologies as well.

Software & Tools to start with Ionic

Node JS & NPM – Base platform needed to create Mobile Apps using it
Cordova
Ionic
Android SDK – If you develop apps for Android platform
Windows Phone 8/8.1 tools – If you develop apps for Windows platform
XCode – If you develop apps on Mac platform and develop your apps for iOS platform
Visual Studio 2015 (Or Visual Studio 2013 with Update 5)
Visual Studio Extensions for Ionic
IntelliSense for Ionic
Visual Studio Tools for Apache Cordova (TACO) – enables you to build cross-platform apps

Shown below is how a sample app is created, built, run on an emulator and, deployed and run on devices.

Sample App

Ionic has some basic types of default app templates, blank app (a bare starter with a single page), tabs app (a simple 3 tab layout) & side menu app (a layout with a menu on the side that can be swiped).

Figure 1: Sample Apps with Tabs template & Side menu template

From your command line, run this command to install Node JS, Cordova & Ionic

Ionic install –g cordova ionic

Setup the environment for Ionic apps for Android with JDK, Android SDK, Android API packages & Build tools.
Create apps using different templates

Ionic start [NameOfYOurApp] tabs

Ionic start myTabsApp tabs – To create a Tabs app

Ionic start myApp sidemenu – To create a Side menu app

Ionic start myApp blank – To create a blank app

start will tell the CLI to create a new app.

myTabsApp will be the directory name and the app name of your project.

tabs will be the template for your project.

Build & run the app on browser – From your command line, go to your project directory & run the command below

Ionic serve

Add Android/ IOS/ Windows platforms to the app

Ionic platform add android / ios/ wondows

Build & run the app on emulator (Android/ Windows phone/ IOS-need Mac)

Ionic build android/ Ionic build windows/ Ionic build IOS

Ionic emulate android

Build & run the app on devices (Android/ Windows phone/ IOS-need Mac)

Ionic run android

Ionic with Visual Studio

Install Visual Studio 2015. Include the optional components, HTML/JavaScript (Apache Cordova) under Cross-Platform Mobile Development.
Install the Ionic templates.

Add it directly to Visual Studio by downloading and double-clicking on the VS Extension for it.

Or in a New Project dialog box, select Online. In the search box, type Ionic Project Templates for Visual Studio.

Once installed it can be seen under JavaScript, Apache Cordova Apps. Create a project using one of the templates.

You can download and add IntelliSense for Ionic to your project.

Get your app running on Android

Add the Android platform by selecting Android as a debug target (in solution Platforms list), and then choose Build, then Build Solution.
Choose Android as a debug target (in solution Platforms list), and to get the app running, choose a target. (Ex: VS Emulator 5″ KitKat or the Google Android Emulator, etc. or the actual Device)