Ionic 4 with Angular 1.6

Ionic 4 with Angular 1.6

Last week I published an early view of how to use Ionic 4 with Vue.js, today I'll be showing you how we can do the same thing with Angular 1.6. Please bare in mind that Ionic 4 is in a super early stage of development and things may change as time goes on.

Let's create a new Angular 1.6 application. I'll be calling our application module userApp and adding the ng-app directive to our html tag.

$ mkdir angular-ionic4
$ cd angular-ionic4
$ touch index.html
$ code .
<!DOCTYPE html>
<html lang="en" ng-app="userApp">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src=""></script>
  <script src='[email protected]/dist/ionic.js'></script>
  <title>Ionic Angular 1.x</title>

Next, I'll be creating three files, one for our module, controller, and factory:

$ touch user.module.js
$ touch user.controller.js
$ touch user.service.js

We can then add this to the body of our root index.html file:

<script src="user.module.js" type="module"></script>
<script src="user.controller.js" type="module"></script>
<script src="user.service.js" type="module"></script>

Notice how I'm using type="module" which is available in the latest versions of Google Chrome as we're not using a build step for this project.

We can then start backwards at our user.service.js, creating a simple HTTP service that calls a dummy data REST API:

export default class UserService {
	constructor($http) {
		this.http = $http;

	get() {
		return this.http.get('').then(res =>;

UserService.$inject = ['$http'];

I'm using the standard Angular $http service within this factory. As we're not using ngInject or any other step, I'm simply adding this to our service with $inject.

Next, inside of our user.controller.js, we can inject our UserService and getUsers():

export default class UserController {
	constructor(userService) {
		this.userService = userService;


	getUsers() {
		this.userService.get().then(users => {
			this.people = users;

UserController.$inject = ['UserService'];

This all can be brought together within our root user.module.js, taking advantage of the import syntax made available by script module type(s).

import UserController from './user.controller.js';
import UserService from './user.service.js';

	.module('userApp', [])
	.controller('UserController', UserController)
	.factory('UserService', UserService);

Finally, with all of our logic in place, we can create a simple user interface which uses the Ionic UI components:

<body ng-controller="UserController as vm">
    <ion-page class="show-page">
          <ion-title>Ionic 4 + Angular 1.6</ion-title>
      <ion-content class="content" padding>
          <ion-item ng-repeat="p in vm.people">

Tada! We now have an Angular 1.6 application that uses Ionic 4 for UI. Here's the code for this article


About Paul Halliday

Progress Telerik Developer Expert. Course author with students in 110+ countries. BSc (Hons) Computer Science @ UoS. Google accredited Mobile Site professional.