1) What are your considerations when planning the architecture of an AngularJS application?
What is your mental process?
2) Which criteria do you take in consideration to decide if you will:
2.a) Make each part of your application it's own module and inject each module to the main module as a dependency?
angular.module('WebsitePart1', []);
angular.module('WebsitePart2', []);
angular.module('Main', ['WebsitePart1','WebsitePart2']);
2.b) Create only one module, and attach everything else (directives, controllers, services, etc) to the main module?
var mynamespace = angular.module('', ['ngRoute']);
And then attach a controller to each router setup, attach the directives to the mynamespace module, etc.
Thank you for sharing your take on it!
Related
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 been working with AngularJs for a while and I now feel comfortable enough with it that I started to review my earlier work.
So I started out with following the basic tutorials and got used to setting up the application, controllers and services as following:
Module injections
// application.js
angular.module('appname',
[ // dependencies
'ui.router'
, 'someController'
]);
// somecontroller.js
angular.module('someController', [])
.controller('someCtrl',
['$scope', function ($scope) {
// Some stuff
}]);
And of course including js files in my index.html e.g.:
<script src="path/angular.js"></script>
<script src="path/angular-ui-router.min.js"></script>
<script src="path/application.js"></script>
<script src="path/somecontroller.js"></script>
Since I tend to separate all logic by feature (separate directory, own MV* structure per directory), I found that the list of dependencies can grow rather large. And also I think adding each controller, service etc. to the app dependencies is kind of a drag.
So I started to do it this way instead:
Single application
// application.js
var app = angular.module('appname',
[ // dependencies
'ui.router'
]);
// somecontroller.js
app.controller('someCtrl',
['$scope', function ($scope) {
// Some stuff
}]);
The obvious win for doing it like this is that I do not longer have to add the controller reference to the app dependencies.
So now my question(s) are:
Besides the obvious, what is the difference between the 2 methods?
From the Angular perspective which of the methods is considered
"good/bad practice"? And why?
I don't think the second method is good. You add all controllers to your app main's module. If you want to truly group your code by feature, I recommend a third approach :
// application.js
angular.module('appname',
[ 'ui.router'
, 'appname.booking'
]);
//booking.mod.js
angular.module('appname.booking', []);
//booking.ctrl.js
angular.module('appname.booking')
.controller('BookingCtrl', function ($scope) {
// Some booking logic
}]);
This way, you create a module per feature and obtain a project architecture easy to understand and navigate.
Looks like you need to read a bit more about modules.
The difference between your two approaches is that in the first one you create a different module for your controller and by injecting that module into the app dependencies you tell angular "by the way, I want the features that come with that module, too".
In your second approach, you only have a single huge module for the entire application, which means all the controllers, service, directives, .. will be automatically considered as part of the application.
Both approaches work, however having different modules for different functionality could help you structure you application better, as well as provide more reusability & easier testing.
In your first method you are creating different modules for your controller. That's why you have to inject your controller name at the time of creating Angular JS app.
angular.module('appName', ['controllerName']);
angular.module('controllerName', []);
In the second approach you are only creating a single app and you are attaching the controller to this app. In this case you don't have to inject the controller name at the time of creating the Angular JS app.
var app = angular.module('appName', []);
app.controller('controllerName', function(){});
About your second question, it depends on the type of application you are developing. For a small single page application a single app module will do fine
When working on large applications everything might not be contained on a single page, and by having features contained within modules it's much simpler to reuse modules across apps. So in this case your first approach is better.
You can create different modules like shown below and can inject to your app;
var sharedServicesModule = angular.module('sharedServices',[]);
sharedServices.service('NetworkService', function($http){});
var loginModule = angular.module('login',['sharedServices']);
loginModule.service('loginService', function(NetworkService){});
loginModule.controller('loginCtrl', function($scope, loginService){});
var app = angular.module('app', ['sharedServices', 'login']);
A am planning to implement base angular module base and 2 child modules m1 and m2. In module base will be implementation of all services, directives and controllers. In modules m1 and m2 will be different implementations of services, controllers, directives with the same names.
In my application will be 2 almost the same editors, but also will be differences in implementations of services, directives or controllers.
Imagine I have controller in base module
function IndexCtrl($scope, userService) {
}
But in modules m1 and m2 are different implementations of userService.
I am developing SPA with ui.router and start application with ng-app directives.
angular.module('test', ['base', 'm1', 'm2'])
<html ng-app="test">
</html>
Service userService will be resolved depending on order of modules in test module definition.
How can I manage of resolving dependencies in this case?
I can't use provider, because base module doesn't know anything about children modules. Also I can't use angular.bootstrap.
Currently AngularJS doesn't handle namespace collisions for services, which means, 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. And as you just said, the service will be resolved depending on the order of modules injection.
A proper way to solve this is adding prefix for services instead of using totally the same name.
You can not have two modules that have colliding namespaces. But if the condition is constant and available at an early state, you can register the right set of services and directives:
var userService1 = function(...) {...};
var userService2 = function(...) {...};
var module = angular.module("m", []);
if (condition) {
module.service("userService", userService1);
} else {
module.service("userService", userService2);
}
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
what is the correct way to do constructor injection in angularjs for instantiating objects with a factory or a service and invoke in a controller?
Ref : http://docs.angularjs.org/guide/providers
If you could provide an example it would be really helpful.
An angular service is a singleton, so whatever you attach to the execution context in the service (eg: this.*), is usable in the module it's attached to.
An angular factory is a little different. In an angular factory, you are going to want to return a handle to a factory that will run your constructor function.
Here is a plunk demonstrating both of them.
If you are writing your own angular module, your services and factories would attach to the module the same way, except, you must then inject your module into the app module.
var myAppModule = angular.module('myAppModule', ['ngRoute', 'myCustomModule'])
This will allow the myAppModule to then use all the services, factories, directives in ngRoute and myCustomModule (myCustomModule is any custom module you write and inject into your app).