/ ionic-angular

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">
<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/[email protected]/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

Paul Halliday

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

Read More