One key guideline: The first parameter represents the name, while the second parameter contains the list of dependencies.
AngularJs is well-known for its consistent approach to declarations. All angular objects adhere to a standard convention:
angular.Object(NameOfObject,ArrayOfDependencies[])
In this syntax, NameOfObject must be a string, and ArrayOfDependencies is an array consisting of strings or callback functions.
For instance, to define an angular module called myApp that relies on another angular module named ngAnimate, you would do the following:
angular.module('myApp',['ngAnimate']);
If you find it challenging to grasp, let's break it down into parts. The subsequent code mirrors the single-line code above.
var myModuleName = "myApp"; //this is your app name
var myDependenciesArray= ['ngAnimate']; // this is a list of dependencies your app will rely on
angular.module(myModuleName,myDependenciesArray); //voila, module declared!
To address your query, it's crucial to understand which types of dependencies can be injected into specific angular objects. Confusion must be avoided.
module can solely accept injections of other modules and cannot receive service types (or provider types precisely). The correct syntax is as follows:
angular.module('module1',[]);
angular.module('module2',['module1']) // this is acceptable, module 2 depends on module1.
Conversely, conducting this is incorrect:
angular.module('module2',['$http']) //this is NOT acceptable
You will encounter a [$injector:modulerr] error from angular since $http is a service name, not a module name.
Hence, when not declaring a module, injecting a module within that declaration isn't allowed; instead, services should be injected. The proper syntax is demonstrated here:
angular.module('demo')
.controller('myCtrl',['$scope',function($scope){}] // this is acceptable, your controller relies on the $scope service
However, executing this would be incorrect:
angular.module('demo')
.controller('myCtrl',['ngResource']) // this is NOT acceptable
You will receive a [$injector:unpr] error from angular, indicating no such provider is found.
Let's provide answers to your questions:
Q: Do all dependencies need to be injected?
A: Absolutely, only if they're required. Always ensure they are injected at the appropriate position.
Q: If dependencies are solely passed into the function without being initially declared in an array, does this imply the libraries aren't preloaded? Is there any advantage to this method?
A: As mentioned earlier, the second argument of an angular object can include an array, which, in turn, can contain callback functions. However, using just one callback function may cause issues later during minification of JavaScript code.
Your application will break post-minification if you construct it like this:
angular.module('myApp')
.controller('demoCtrl',function($scope){}); //will break
Conversely, your application won't break after minification with this structure:
angular.module('myApp')
.controller('demoCtrl',['$scope',function($scope){}]
Q: Do these modules have varying declaration methods?
A: No. Consider the given example:
angular.module('myApp',[])
.controller('demoCtrl',['$scope',function($scope){}]
The above code can be equivalently expressed like so, as they are essentially identical:
var app = angular.module('myApp',[]);
app.controller('demoCtrl',['$scope',function($scope){}]