Module injection versus one application
I have been working with AngularJs for a while and now I feel comfortable enough with it that I started looking into my previous work.
So, I started with the basic tutorials and got used to setting up the application, controllers and services like this:
Module injection
// 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 for example:
<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 from function (separate directory, native MV * structure for directory), I found that the list of dependencies can grow quite large. Also, I think adding every controller, service, etc. To application dependencies is a kind of drag and drop.
So, I started doing it like this:
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 with this is that I no longer need to add a controller reference depending on the application.
So now my questions are:
- Apart from the obvious, what is the difference between the two methods?
- From Angular's point of view, which method is considered good / bad practice? And why?
source to share
I don't think the second method is good. You add all controllers to the main application module. If you want to really group your code by function, I recommend the 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 for each function and get a project architecture that is easy to understand and navigate.
source to share
In your first method, you are creating different modules for your controller. To do this, you need to enter the controller name while building your Angular JS app.
angular.module('appName', ['controllerName']);
angular.module('controllerName', []);
In the second approach, you only create one application, and you connect a controller to that application. In this case, you do not need to enter the controller name while building your 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 app, one app module will work fine
When working with large applications, everything may not be contained on one page, and the availability of functions contained in modules makes it much easier to use modules for different applications. So your first approach is better in this case.
You can create various modules as shown below and can be inserted into your application;
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']);
source to share
It looks like you need to read a little more about modules .
The difference between your two approaches is that in the first one you create another module for your controller and by injecting this module depending on the application you are specifying to angular "by the way, I need the functions that come with this module too".
In your second approach, you only have one huge module for the entire application, which means that all controllers, services, directives, .. will be automatically considered part of the application.
Both approaches work, however, having different modules for different functions can help you structure your application better, as well as allow for more reuse and easier testing.
source to share