Business Demo Services App

Ionic Framework & Angular.js
Project Setup

To create this project several packages needed to be installed to acquire the environment for development. Starting with Node.js as the main environment packages and dependencies. Installing Node.js which can be downloaded from the main node.js site. You will also need to have Git for windows installed with gitbash included which is needed for command line use.

Install Node.js npm
npm install npm -g
npm -v

Upgrade Node.js npm
npm upgrade npm -f
npm install npm -g n
n stable
npm -v

Note: -v (shows node version), n(node helper), stable(stable version or npm version that is desired)

The Ionic Framework needs the Apache Cordova component to be installed. Cordova allows the Angular extensions to easily access the full native functionality of the device using Cordova/Phonegap plugins - >> main ionic site.

Install Apache Cordova
npm install -g cordova

Install Ionic Framework
npm install -g ionic

Note: The xmlbuilder component may need to be updated depending on your node setup.

Create Ionic Project
ionic start my App

Ionic has several templates which can be used as the base for the development project. Scaffolding a Template can be done with:
ionic start template defaultApp tabs
ionic start sideApp sidemenu
ionic start blankApp blank

Start Ionic Server
ionic serve
to stop the server use q or ctrl + c

In completing the installs of the needed components and dependencies for node and ionic, the framework will have been setup with the following files:

  • bower.json - bower dependencies
  • config.xml - cordova configuration
  • hooks - custom cordova hooks to execute specific commands
  • ionic project - ionic component files
  • package.json - Node dependencies
  • plugins - ionic / cordova plugins are installed
  • www - aplication files - js code & libs, css etc..
  • gulpfile.js, scss and gitignore are also available for use

There is also the option of configuring platforms for IOS and Android

IOS Platform
ionic platform add ios
ionic build ios
ionic emulate ios

Android Platform
ionic platform add android
ionic build android
ionic emulate android

View business Services App >>

Project Develoment Overview

After setting up the project I began researching and reading the documentation for Ionic on layout and development with Angular.js. I started by creating the main page index.html and in the head tags of the html page i added the links and scripts needed for functionallity:

yourApp.js which contains the configration for the MVC of the App
The controllers.js which contains the working functions for yourApp to work.

In the body tag the ng-app was inserted to call the configuration for the app to initialise. Inbetween the body tags an ion-nav-view was created which contains the app content and data from ionic and angular functionality. The main App.js was coded for configuration of the stateProvider, urlProvider & iconicConfigProvider. These allowed to specify the state for which template to call, the url and positioning of elements. Here also the controllers where set to acquire the data through scope by http get. This setup allowed creation of functions to update, delete, star, refresh and reorder the data in the app by use of an Id paramater.

The template was then created for the tabs where through angualar on click of the main tab buttons on the footer the specific partial template was called in the app.js file.

Angular Data binding and controllers used in project page, template and partial templates.

  • ng-app
  • ng-click
  • ng-model
  • ng-show
  • ng-class
  • ng-repeat
  • ng-src

To complete the business services App I integrated a contact form using a secondary ng-app with angular form validation. With research and development i achieved a working contact form using Angular and PHP to check, validate and forward the designed fields to the desired mail address.