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.
轉自:http://mcgivery.com/modules-ionicangular/