I have an angular application that looks like such.
file1.js
var app = angular.module('app', ['third-party-stuff-A']
file2.js
var app = angular.module('app', ['third-party-stuff-B']
so essentially file1 and file2 represent two separate pages in my application.
I've registered all my controllers, services, and other injectables into the module app, so for example.
app.factory('thing', function ($scope) { ... });
the thing factory is available to both app in file1 and app in file2.
I've read that it's better practice to break things into modules. app in file1 and file2 should probably be their own separate module.
And to go even a step further, perhaps thing factory can go into a module MyFactories. and MyFactories would be injected into each of my apps.
But I'm not sure what the immediate benefit is of doing this.
Most applications have one main method and links to different parts of the application.
Angular apps don't have a main method. Instead modules specify how an application should be bootstrapped. advantages for creating modules are
You can package code as reusable modules. The modules can be loaded
in any order (or even in parallel) because modules delay execution.
see more at https://docs.angularjs.org/guide/module
Related
I have this app module
angular
.module('history.components.genericAddress', ['history.filters']);
.service('constantsSrv', ConstantsServiceController)
.service('addressesService', AddressesServiceController)
and another one
angular
.module('APP')
.service('constantsSrv', ConstantsServiceController)
.service('addressesService', AddressesServiceController);
in two diff files and folders, because there are two diff applications.
I have two services that I use in both modules. I want to put in separate file both services and not anymore inside of each module body. Because each module depends on diff app I don't know how what to put in the top of the new file with both services.
One has module('history.components.genericAddress') and another .module('APP').
I ask this question because I want to make a ver 1.5 angular component and to put that component in many apps. Those 2 services are important for the component.
Please someone give me an idea how to do this because I don't know how to make this service file that will work in any app without changing anything.
So my question is only about how module('what to put here') and not how to make the code for services.
Try this.
angular
.module('Service_module')
.service('service1', function(){});
use in any module like.
1. angular
.module('FirstAPP',['Service_module'])
2. angular
.module('SecondAPP',['Service_module'])
My app is following John Papa's styleguide for AngularJS applications:
The styleguide emphasizes using a strongly modular approach to the design of the app. My question is about multiple configurations and their effect on shared services.
Suppose I have a main module like this:
angular.module("app", ["app.feature1"])
.config(function() {
// do some configuration here
console.log("app configured");
});
And a feature module that configures a shared angular service, let's say the $http service:
angular.module("app.feature1", [])
.config(function($http) {
// configure the $http service
console.log("feature1 configured");
});
Is my understanding correct, that the configuration by "feature1" will carry over to the main module, since the $http service is a singleton and therefore shared across modules? Or do I have to configure the $http service in the main module instead, because each module has it's own $http service instance?
Edit: I can confirm that dependency configs are carried over and are executed first. See David's jsfiddle example.
As a matter of best practice, you should configure services as early as possible, which is typically your main module (the app root), and preferably only once to avoid overlapping changes.
Since $http is a singleton (as you mentioned), any changes via configuration will be propagated throughout the application every time you inject $http.
It's also worth mentioning that configuration to services is First In First Out, meaning that if you have two configuration changes, the last-accessed configuration will be the one that is persisted to the service since the previous configuration will be overwritten if they are changing identical components of the service.
In your case, yes, the change to $http in your module will be extended to your main application and any other modules using $http.
Finally, in light of the comments, child dependency configs are resolved before parent configs, as demonstrated by this simple fiddle:
http://jsfiddle.net/maqzo6fv/
HTML:
<div ng-app="app"></div>
JS:
angular.module("app", ["app.feature1"])
.config(function() {
alert('main config');
});
angular.module("app.feature1", [])
.config(function() {
alert('child config');
});
The child config will call alert before main on every load.
I have an app module, want to register a controller for app module.
Is it ok to define a controller for the app module?
Regards,
ng-R
You can organize your components in modules the way you want. For a very small app, you can imagine using a single app module containing all the components. For larger applications, splitting components in technical and/or functional modules is a good idea.
In the end, at runtime, what matters is that the needed controller is part of the app module or of any of the modules it depends on, transitively.
In one of our angular project, we defined some modules, like:
angular.module("services", [])....
angular.module("controllers", ['services'])....
angular.module("factories", [])....
Then make a main module depending on them:
angular.module("app", ['services', 'controllers', 'factories'])
Some colleague thinks this way is not good, he prefers to group modules by business features, like:
angular.module("login", [])....
angular.module("user-admin", [])....
angular.module("post-admin", [])....
Then combine them together:
angular.module("app", ['login', 'user-admin', 'post-admin'])
I think his approach is making sense, but I'm not sure the best practice to define modules.
What rules we should follow when defining modules?
Sometimes when we start to play with AngularJS we think is a good idea to create different modules, for example, for our controllers, services, directives, etc…but this may not be the best option. For example: let’s say we create a controller inside a module named ‘myapp.controllers’ and this component depends on a service that is inside the module ‘myapp.services’. When we want to use that controller in another application we will have to not only require the controller module but the service one too and any other module that is as a dependency. However, if we have a login module and we create controllers, services, directives, etc under the module ‘myapp.login’, then later on when we want to use that module we will have everything we need to use to it without needing other dependencies.
source
another way
Another method we can use to break up our app is to divide our modules by route. This breakdown
allows us to write isolated tests that focus on the functionality per route. Modularizing by route can
make more sense, depending upon the project; it allows us to divide our functionality efficiently
when we’re dealing with a lot of independent routes.
angular.module('myApp.home', []);
angular.module('myApp.login', []);
angular.module('myApp.account', []);
angular.module('myApp', [
'myApp.home',
'myApp.login',
'myApp.account'
]);
This modularization makes sense specifically when we’re dealing with large numbers of routes
and/or when we don’t have too much cross-over between routes.
I'm creating a structure for a hybrid app built with ionic.
We use gulp to concat and minify the files.
So far i append every controller, service and directive to my main module defined in app.js.
Each of these components is defined in its own file which are then concatenated with gulp with app.js first and everything else last.
This is the way ionic does it for their 10k loc IonicModule.
Is there any reason why i should use the angular module system for more than the main apps module (e.g. app.directives, app.controllers etc.) besides the better structure (each component in one file) which i already have with ionics approach?
I could think of two things:
Testability: as far as i know i don't have to declare a module as angular.module , i should be able to mock controller modules (e.g. myApp.controller(x...) as well
Performance: there shouldn't be a performance gain as far as i know, am i wrong about that?