Hello Modules: Your Third Ionic Framework App

Hello Modules: Your Third Ionic Framework App

posted in: Uncategorized | 10

In the second post of this series, Hello Backend: Your Second Ionic Framework App, we learned how to create an app that talks to a backend API using a factory and the $http service. In this third instalment, we’ll look at some ways to break up an app into modules to make our development more scaleable. You can follow along on the Ionic Playground.

Quick Review

Just as a quick review, we have two states, main and page2, with a controller for each. We also have a userService factory that is used by our page2 state.

angular.module('ionicApp', ['ionic'])

.factory('userService', function($http) {
	return {
		getUsers: function(){
			return $http.get('https://randomuser.me/api/?results=10').then(function(response){
				return response.data.results;
			});
		}
	}
})

.controller("MainCtrl",function(){
  console.log("Main Controller says: Hello World");
})

.controller("Page2Ctrl",function($scope, userService){
	userService.getUsers().then(function(users){
		$scope.users = users;
	});
})

.config(function($stateProvider, $urlRouterProvider){
  $stateProvider

  .state('main', {
    url: "/main",
    templateUrl: "templates/main.html",
    controller: 'MainCtrl'
  })
  
.state('page2', {
	url: "/page2",
	templateUrl: "templates/page2.html",
	controller: "Page2Ctrl"
})
  
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/main');
});

Goal

Our goal by the end of this tutorial is to break up each of the states of our app into separate modules. To accomplish this, we will define a module for each of our views which will include the controller, state configuration, and any factories required to make the state work. Here’s a little to-do list for this article:

  • App Module
  • Main Module
  • Page2 Module

What is a Module?

From the Angular Docs “You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.”

Another way to think about modules is that they are similar to namespaces in other languages where a group of classes live in a namespace. The same rule applies in Angular that in a module can live all the different pieces of an app.

Read More: Modules in Ionic/Angular

App Module

The first module we will define is the base of our app where we will define the app itself and define the default route. We aren’t actually defining a state here, just the URL to default to.

/**************************************************
+	Module:		ionicApp
**************************************************/
angular.module('ionicApp', ['ionic','ionicApp.Main','ionicApp.Page2'])

.config(function($urlRouterProvider){  
  //Default Route for the whole app
  $urlRouterProvider.otherwise('/main');
});

Notice in the definition of our module, we are importing Ionic (as usual) and two additional modules: ionicApp.Main and ionicApp.Page2. These are the modules we will define for each of our views. We are importing them for use in our app module, ionicApp.

As mentioned above, for routing in our .config section, we are saying default to /main.

ionicApp.Main Module

Next, we’ll define our Main module for our Main state.

Traditionally, and what you’ll notice in the Ionic starter templates, all of the state configuration is done in one .config in the app.js file where the app module is defined. In our case, to really make things scalable and modular, we are going to have each module define it’s own state by having each module have it’s own .config.

In this module we are including the controller as well as the state configuration.

/**************************************************
+	Module:		ionicApp.Main
+	Exports:
+		MainCtrl
**************************************************/
angular.module('ionicApp.Main', ['ionic'])

.config(function($stateProvider, $urlRouterProvider){
  $stateProvider
  .state('main', {
    url: "/main",
    templateUrl: "templates/main.html",
    controller: 'MainCtrl'
  });
})

.controller("MainCtrl",function(){
  console.log("Main Controller says: Hello World");
});

In the above code, we’ve defined our ionicApp.Main module with a main state and a MainCtrl.

ionicApp.Page2 Module

This module is very similar to the previous module, defining its own state configuration and controller. The only addition here is that it creates the userService factory as well.

/**************************************************
+	Module:		ionicApp.Page2
+	Exports:
+		userService
+		Page2Ctrl
**************************************************/
angular.module('ionicApp.Page2', ['ionic'])

.config(function($stateProvider, $urlRouterProvider){
  $stateProvider
  .state('page2', {
		url: "/page2",
		templateUrl: "templates/page2.html",
		controller: "Page2Ctrl"
	})
})

.factory('userService', function($http) {
	return {
		getUsers: function(){
			return $http.get('https://randomuser.me/api/?results=10').then(function(response){
				return response.data.results;
			});
		}
	}
})

.controller("Page2Ctrl",function($scope, userService){
	userService.getUsers().then(function(users){
		$scope.users = users;
	});
});

Conclusion

This article has demonstrated how to begin down the path of breaking up an existing app into a modular design. There are more ways you can break up your code such as having separate files per controller/service, but a lot of that comes down to preference.

Questions? Comment below!

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.

10 Responses

  1. John Hanam

    In your workflow, would you merge the files into a single file before compiling?
    Or just stick a huge pile of tags in your main page?

    • Hello John,

      Typically I have had all my template files in separate HTML files. I know a lot of people, as you mentioned, use build tools to take all those external templates and inline them.

      By no means do I recommend having everything in huge pile of tags in the index file while developing.

      That would just be a mess. 😛

  2. Hi,
    I’d like to know if for example if I have a core module with some submodules like :

    angular.module(‘app.core’, [‘app.api’, ‘app.dao’])

    If I include app.core in app.Page2 for example can I call services contained in app.api in Page2Ctrl ?

  3. Why would I want multiple modules? Why not just one module? I don’t think I am going to reuse those application-specific modules. So why bother?

    • Lots of people have written stuff about using modular architecture in programming but specifically in the case of Angular/Ionic, it’s not about reuse but about scalable development. If you have everything in one module and hypothetically one day you have a team of developers working on the app, it makes it really hard for them all to work on the app since everything is contained within one file. It’s significantly easier to have each developer working on a different module of the app and not directly affecting other’s work. Even in the case of a single person working on an app, eventually when your app gets large enough, it becomes very difficult to maintain an app with one massive module.

  4. im rather lost on this tutorial (sorry, im new to this)

    previous tutorial was quite clear, we have app.js, main.html, page2.html within templates folder. then we have index.html.

    now this seems like a totally different structure. I understand what is written above, but im not sure of the file structures.

    So.. modules.. do i create new files? new folders?

    ionicApp.Main Module is a…. ? file? where do i put it?

    hope you can be more straightforward for a noob like me.

    • Hello kelvin, Thanks for your comment.

      It is totally up to you how you lay out your file and folder structure but generally each module gets a folder and a file. For example, /Main/Main.js.

Leave a Reply