You've successfully subscribed to developer.school
Great! Next, complete checkout for full access to developer.school
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

Ionic 4 with Angular 1.6

Paul Halliday
Paul Halliday

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">
<head>
  <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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src='https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js'></script>
  <title>Ionic Angular 1.x</title>
</head>
<body>
    
</body>
</html>

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('https://jsonplaceholder.typicode.com/users').then(res => res.data);
	}
}

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;

		this.getUsers();
	}

	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';

angular
	.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-app>
    <ion-page class="show-page">
      <ion-header>
        <ion-toolbar>
          <ion-title>Ionic 4 + Angular 1.6</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="content" padding>
        <ion-list>
          <ion-item ng-repeat="p in vm.people">
            <ion-label>{{p.name}}</ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-page>
  </ion-app>
</body>

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

ionicangular

Ionic

Paul Halliday

👋 Want to see more content? Head over to the YouTube channel: https://youtube.com/c/paulhalliday!