Modules in Ionic/Angular

posted in: Uncategorized | 10

Ionic and Angular are built and designed to be very modular. This means the code can be written to be very reusable, logical, and easy to understand. It also enables Angular’s dependency injection system to do it’s magic.

In this post we’ll discuss what a module is, how to write one, and different ways to use them.

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.

Most Basic Module

The most basic module is when you create an app with Ionic. The entire app itself is a module. Let’s look at an example.

<body ng-app="myApp">
	Hello World!
</body>
angular.module('myApp', []);

Notice the value of the ng-app attribute matches the name of the module (the first parameter of the .module method).

Module Importing

You’ll notice the second parameter is a blank array. This array is where you specify the names of the modules you would like to use in this module. It’s similar to a using or an import statement in other languages to import in other namespaces.

Let’s define another module that we’ll import into this module.

angular.module('myApp.services', [])

.factory('testFactory', function(){
	return {
		Hello: function(){
			return "Hello World!";
		}
		
	}
});

You’ll see here we’ve defined the module as myApp.services and added a factory to the module. Another thing to notice is how there is no semicolon at the end of the first line because we are chaining the .factory method onto the .module method.

Now, let’s import this services module into our first app module.

angular.module('myApp', ['myApp.services']);

All we have to do is provide the name of the module in quotes and it will import it in for us. Now, we can use the factory from the service module in our app module.

angular.module('myApp', ['myApp.services'])

.run(function(testFactory){
	var hello = testFactory.Hello();
	console.log(hello);
});

Using Modules in Ionic

In the standard Ionic starter projects, there are typically 3 modules: The app module (starter), the controllers module (starter.controllers), and the services module (starter.services). There is also a fourth module that is imported: ionic. Everything related to the Ionic framework is attached to the ionic module which is imported into your app module.

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

This is a fairly standard way to organize a project by class type.

However, there is another way that is becoming quite popular and that the Ionic team themselves are looking at adopting. The idea is to organize by “feature” instead of by class types. Instead of your project having controller.js and services.js files and a templates folder with all of your .html template files, you would have a folder for each feature of your app which contains the template, controller(s), and service(s) for that feature. Angular Structure: Refactoring for Growth is a good article that talks about the differences between these two approaches.

Conclusion

Modules are a great way to help keep your code organised and readable. There are many use cases for modules to explore and you’ll see them used all over the place for different reasons. Hopefully this article has helped you get a better understanding of what they are and how you are probably already using them in your Ionic apps.

More Reading

Structure of an Ionic App
Ionic: Using Factories and Web Services for Dynamic Data
Angular Module Docs
Angular Structure: Refactoring for Growth

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada. My current passion is building and leading highly engaged teams where employee happiness, learning, and growth is a priority.

10 Responses

  1. fully agree re: organizing via feature

  2. hi i am beginner in ionic i dont know how to add the splashscreen to my application and i dont know how to order my tabs views, help me plz

    • What have you tried? Did you try a Google search?

      • yes of course i tried these steps:
        1. ionic start splashscreen Tabs
        2. ionicplatform add android
        3. then i runcordova plugin add..org apache.cordova.splashscreen
        4.but when i try to run ng-cordova-ionic it donsn’t work
        can you help me please

  3. check the documentation in ionic framework and you will get the splash screen implementation guidelines there…..

  4. Max Porter

    Good article, thanks for it. All of ionic samples out there are organized like “type class” modules (controllers/, services/, directives/, …) Where can I find any Ionic example with a feature module architecture?

    Thanks!

  5. thank you it’s very useful

  6. hello ,
    I am a beginner on the use of the framework ionic, now i am trying to connect my application with server to get datas, so that i am using a RESTfull web service developed on the Slim framework(response of request with JSON).The web service is already done, my problem now i don’t know how to implement it in my application.

    Please can you help me with examples or links.

    Thank you in advance for understanding and for listening keenly hoping for a response from you.

Leave a Reply