Developing An App Using Ionic 1 and AngularJS (Part 1)

Feb 26, 2018

Hi Guys!

In this write up we’d be discussing how to setup the development environment, and then building a simple hybrid app using Ionic Framework.

What is Ionic?

To begin with, What is Ionic? Ionic is a HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser shell in an app that has access to the native platform layer. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, the speed of development, and access to third-party code.

Unlike a responsive framework, Ionic comes with very native-styled mobile UI elements and layouts that you’d get with a native SDK on iOS or Android but didn’t really exist before on the web. Ionic also gives you some opinionated but powerful ways to build mobile applications that eclipse existing HTML5 development frameworks.

Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova or PhoneGap in order to run as a native app. I recommend using Cordova proper for your apps, and the Ionic tools will use Cordova underneath.

Setting Up Your Development Environment

Now let’s get into the setup of our development environment. The Ionic Framework currently targets iPhone and Android devices. The minimum Phone Operating Systems it supports are iOS 7+, and Android 4.1+.

Let is also be known that to generate Android APKs after development either a MAC OS or Windows OS can be used, but to generate an iOS IPA, it can only be done on a MAC OS, as XCode is required to do this and it is not available on the Windows OS (Unless you want to use a VMWare on Windows). So I’d strongly recommend using a MAC Laptop as you can comfortably develop/build for both Android and IOS on a MAC.

The Three Most Important Installations

The 3 most important things you’d first need to install on your PC are;

  1. Node.js – This is required to be able to use npm (Node Package Manager), which is the portal/platform through every of our project dependency would be installed.
  2. Android Studio  – This is required to generate Android APKs.
  3. XCode – This is required to generate iOS IPAs

Once these 3 things have been installed, we’d be installing everything else we need going forward using the Command-Line Interface (CLI). If you are new to CLI you can read more about it here.

You can now open up your Command Prompt on Windows 0r Terminal on MAC OS.

First, we will install the most recent version of Apache Cordova, which will take our app and bundle it into a native wrapper to turn it into a traditional native app. Drop “sudo” from the below command if you’re running on Windows.

sudo npm install -g cordova

Next, we install Ionic. The utility framework required to start, build and package our Ionic apps.

sudo npm install -g ionic

Installing dependencies using the Terminal on a MAC

Starting a New Project

Now that our development environment has been set up, we would start a new project. I’d like to state that Ionic started initially with a version 1 of their Framework, of which apps were built using Ionic 1 and AngularJS. However, they have in recent times developed a version 3 of the Framework which runs alongside Angular 4/Typescript, which is a strongly typed strict syntactical superset of JavaScript when compared to the regular AngularJS. For the purpose of this write-up, we’d be developing using Ionic 1 and AngularJS.

From the Command Prompt or Terminal, we can navigate to the desired path where we want our project to be created using the ”cd” command, just like below;

Once inside the desired path, we run the below command to create an App project that comes by default with a side menu;

sudo ionic start appname sidemenu –type ionic1

The other types of default projects are;

  • sudo ionic start appname blank – Creates a blank project
  • sudo ionic start appname tabs – Creates a project with tabs.

Now that the project has been created, “cd” into the new project and run the below command from your Command Prompt;

ionic serve

Once you serve the project, it should launch in your default web browser like this;

Ionic 1 App with side menu

In my next post, I’d be explaining all that is contained in the new project folder and also make customizations to the new app we just created using HTML, CSS, and AngularJS.

Till Next Time! ✌

Give your comment here

Your email address will not be published. Required fields are marked *