Master Ionic with AngularJS: Step‑by‑Step Mobile App Guide

AngularJS Overview

AngularJS is a structural framework for dynamic web applications that extends HTML with custom directives, two‑way data binding, MVVM‑like architecture, dependency injection, and a powerful directive system.

Two‑way data binding – model and view stay in sync automatically.

Templates – HTML files are parsed into the DOM and processed by Angular directives.

MVVM – similar to MVC but focuses on a view‑model layer.

Dependency injection – built‑in DI container simplifies testing and development.

Directives – create custom tags or manipulate DOM attributes.

Ionic Framework Introduction

Ionic is a hybrid HTML5 mobile development framework that uses standard HTML, CSS, and JavaScript to build cross‑platform native apps for Android and iOS (with future support for Windows Phone and Firefox OS).

Installation

First install Node.js, then install the latest Cordova and Ionic CLI tools:

npm install -g cordova ionic

Creating a Project

Use Ionic’s templates to scaffold a new app:

ionic start myApp blank

ionic start myApp tabs

ionic start myApp sidemenu

The command generates a project structure with www folder, index.html, and configuration files.

Project Structure

Typical files include app.js, controllers, directives, filters, and services. The ionic.bundle.min.js file bundles AngularJS, UI‑Router, and Ionic components.

Configuring app.js and Routing

Define the main Angular module and configure UI‑Router states:

$stateProvider.state('home', {
  url: '/home',
  templateUrl: 'templates/home.html',
  controller: 'homeCtrl'
});

This sets up a route that loads home.html and its controller.

Creating Controllers

Define a controller using the module reference:

angular.module('myApp').controller('homeCtrl', ['$scope', function($scope) {
  // controller logic
}]);

Inject the controller in index.html and bind data to the view.

Templates

Use Ionic components such as <ion-view>, <ion-header>, and <ion-content> in home.html to build the UI.

Services and Data Retrieval

Create reusable services with factory (or service, value, etc.) to fetch data via $http:

angular.module('myApp').factory('myService', function($http) {
  return {
    getList: function() { return $http.get('/api/list'); }
  };
});

Consume the service in a controller and assign the result to $scope for binding.

Handling Promises

myService.getList().then(function(resp) {
  $scope.items = resp.data;
}, function(err) {
  console.error(err);
});

Filters

Create custom filters to transform data, e.g., converting a name to uppercase:

angular.module('myApp').filter('toUpperCaseText', function() {
  return function(input) { return input.toUpperCase(); };
});

Use in templates: {{item.Name | toUpperCaseText}}.

Passing Data Between Pages

Common techniques include:

Using $rootScope to store shared data.

Passing parameters via $state.go('detail', {id: item.id}) and retrieving them with $stateParams.

Storing data in a singleton service that both pages inject.

Less common methods involve localStorage, sessionStorage, or cookies.

Two‑Way Data Binding Example

Bind an input field to a model and display it elsewhere:

<input ng-model="user.age" type="number">
<p>Age: {{user.age}}</p>

Summary

1️⃣ Create app.js with routing and module definition. 2️⃣ Build HTML templates for each view. 3️⃣ Implement controllers to handle view logic. 4️⃣ Use services to fetch and share data. 5️⃣ Apply custom filters for data transformation. 6️⃣ Pass data between pages via $rootScope, $stateParams, or shared services.