In AngularJS, why some modules have the same name? Is that because we want to divide a big module into different pieces? If I define a controller in one module, can I directly use that in another module which has the same name? Need any dependency injection?
AngularJS modules do not allow namespacing that would prevent collisions between objects in different modules because an AngularJS app has a single injector that stores name for all modules.
Related
Looking for a suggestion of a good way to create an abstract directive in one module and load its template on different modules.
The scenario is the following: I have a web site split into two (web portal and backoffice) which are two different deploys. Both share a lot of modules and the layout but have different functionalities.
I would like for the menu directive and structure to be on a core/common module, but its template should be loaded by the modules, so that the core module doesn't need to know what specific deploy is being used!
I thought about using $templateCache on each module configuration process, but does anyone know a better option for this?
Yes, the only option to keep templates and the rest of the application in different JS bundles is $templateCache. Other options (directive inheritance or requireing and bundling template HTML files with Webpack) will likely result in monolithic bundles.
There's no separate template unit in AngularJS, so in order to be included in module, templates should be defined with $templateCache.put.
I'm trying to clean up my Angular app a little bit and when I came to my app.js.coffee file I ran into some things I have little knowledge of because I copy/pasted it from another source and it seemed to work.
To my knowledge every controller, service, filter etc. needs a ,
angular.module('nameOfModule')
But 2 (or more) controllers can't have the same module name because then Angular outputs an error,
Error: [ng:areq] Argument 'nameOfModule' is not a function, got undefined
But it seems the module name that you give a controller such as nameOfModule can be used on multiple services,
addMovieService.js
angular.module('addMovieseat')
.factory('movieAdd',
movieSearchService.js
angular.module('addMovieseat')
.factory('MovieSearch',
So I'm starting to wonder what the module names are for.
Add dependency for your angular module and if not then put it blank like this
angular.module('nameOfModule',[])
Error is occured because you don't add dependency for your module.
But 2 (or more) controllers can't have the same module name
This assumption is incorrect! Modules almost always have more than one controllers. In fact it is the highest level in an angular app and the module, along with all other entities (controllers, services, factories) comprise of a self sustaining AngularJS app.
For using another app inside another app, you just include the module as a dependancy like this:
angular.module('secondApp', ['firstApp'])
Angular modules are a kind of namespacing feature that we know from the .net world. Keep things contained in modules.
The problem is that I would like to do this:
I would like certain pages that don't have any specific client-side functionality but use custom directives to just define ng-app or ng-app="xyz" to just work; I don't want to introduce an additional Javascript code(file) just to make it work.
I would like to have pages with different modules i.e. App.Main and App.Specific; Both of these pages should use the same directives from #1 and use them.
I would like to contain general stuff inside App.General module, and then have additional modules like mentioned App.Main and App.Specific.
Question
Which module should directives be defined in and how should dependencies (if at all as they don't call each other's code in any way) between these modules be for directives and pages to work as expected?
If I am understanding your question correctly, my suggestion would be to define several angular app modules in the same javascript file and activate the appropriate one for each page by the ng-app="App.General" directive vs ng-app="App.Specific". So you could have have a single concatenated javascript file that contains:
angular.js
any third party dependencies you are using
your custom directives, services, controllers, etc
I would suggest using "very granular modules" as recommended at the NYC AngularJS Meetup Feb 2014 at 24m in this video and putting each individual directive and service into it's own module.
But it would also be fine to group all your shared directives into a single module called "App.Directives", for example.
your general code defined by angular.module('App.General', ['MyDirective']); (plus additional dependencies)
your specific code defined by angular.module('App.Specific', ['MyDirective', 'MyService']); (plus additional dependencies)
Also note that you don't have to declare your app dependencies as a literal array of strings. You could do var directives = ['Dir1', 'Dir2']; Then angular.module('App.Specific', directives.concat('MyService', 'MyController')); to express that the specific app uses the same directives as the general app.
Each page could include the same <script src="/bundle.js"></script> HTML (thus it would be loaded from the web only once then cached).
General pages would include ng-app="App.General" in their HTML. Specific pages would have ng-app="App.Specific".
certain pages that don't have any specific client-side functionality but use custom directives
So the directives technically constitute "client side functionality" since they will be rendered to their final HTML in the browser. So you will need to load angular.js, the modules containing your directives and at least one line of your own code to define an app and declare it's dependencies on the modules that provide the custom directives you are using.
I would like to have more theoretical understanding how angular modules work.
When I would create one module 'clientApp' and I 'register' controller, services, factories, scope etc..., inject other services, factories, scope into the controllers. What objects are known to the 'clientApp' module?
Angular Modules
An efficient, production-ready controllers by encapsulating our functionality in a single core unit called a module.
In Angular, a module is the main way to define an AngularJS app. The module of an app is where
we’ll contain all of our application code. An app can contain several modules, each one containing
code that pertains to specific functionality.
Using modules gives us a lot of advantages, such as:
• Keeping our global namespace clean
• Making tests easier to write and keeping them clean so as to more easily target isolated
functionality
• Making it easy to share code between applications
• Allowing our app to load different parts of the code in any order
The Angular module API allows us to declare a module using the angular.module() API method.
When declaring a module, we need to pass two parameters to the method. The first is the name of
the module we are creating. The second is the list of dependencies, otherwise known as injectables.
angular.module('myApp', []);
When writing large applications, we’ll create several different modules to contain our logic. Creating a module for each piece of functionality gives us the advantage of isolation in which to write and test large features.
Properties
Angular modules have properties that we can use to inspect the module.
name (string)
The name property on the modules gives us the name of the module as a string.
requires (array of strings)
The requires property contains a list of modules (as strings) that the injector loads before the
module itself is loaded.
Better Read
ng-book -
The Complete Book on AngularJS
Ari Lerner
Download ng-book
How does AngularJS handle collisions between names of services? For example if I have declared two modules each containing a service called 'foo'. What would be a good way to "namespace" services if I want to create a reusable module or want to avoid collisions with other third-party modules?
As of today AngularJS doesn't handle namespace collisions for services so if you've got 2 different modules with the service named the same way and you include both modules in your app, only one service will be available.
For the moment the best option is to prefix service names with a custom prefix, ex:
angular.module('myprefix_mymodule',['dep1', 'dep2']).factory('myprefix_MyService', ...)
As noted by pkozlowski, they don't. You can manually add a prefix to all of your services (which is kind of annoying), alternatively, I wrote a hack to namespace it for you.
https://github.com/callmehiphop/angular-namespacer