What I usually do, since they are modules, ie I will use a module only in a certain area of my application, is to use the module ocLazyLoad . It provides loading of my modules (or whatever modules I deem necessary) only in the view (or state) that interests me.
Pros:
- Application is lighter, since the module is only loaded in a certain view.
- Security, for the same reason as above. It is only loaded if the user accesses the view.
Cons:
- If it is a small or complex application, you can increase the work even more, instead of helping.
- You need to have a better organized control or maintenance, or it may get lost in the code.
The module's site has excellent documentation, but I'll explain how I use it. As I use ui-router
in my projects, I apply the oc.lazyload
directly to the resolve
within the state
settings, like this:
.state('inicio', {
url:'/BemVindo',
resolve: {
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
names: 'meuModulo',
files: 'app/modulo/meumodulo.js'
});
}]
}
})
Note that using this tool you will no longer need to declare the module meuModulo
(for example) in your main module:
angular.module('mainApp', [
'meuModulo' //Não é mais necessário isso
]);
The oc.lazyload
tool will be responsible for loading both the physical file (meumodulo.js) and the dynamic injection of the module for use. The good thing about this tool is also the 'no' dependency of doing the load only on the router. There are other ways to do this, for example, through a directive:
<div oc-lazy-load="['meumodulo.js']">
//.. restante do conteudo
</div>
Note: oc.lazyload
is not the only method of getting this result, there are other tools that can also do this, such as RequireJs . This is just my method to use.
Just look at the naming of your modules, do not use something too short, like mdNot
, use something more intuitive like mdNoticias
.
Other tips better, follow the link provided in the other answer. The John guide is really a great source!