I am an angularJS noob here and, based on my understanding, there are two places where I can inject dependency.
angular.module('myApp', [A: HERE IS ONE PLACE TO DO IT])
.controller('HomeController', function(B: $hereIsAnotherPlace){
});
Am I right about this? If so, what are the differences?
In your example, A is where you can specify modules rather than dependency injection (DI). Below, addresses this variation of your code:
.controller('HomeController', [A , function(B) {}]);
The second one (B) is required, the first (A) is optional (but has benefits described below).
Here's an example of only using just the second (B) from the Angular docs:
function MyController($scope, greeter) {...}'
But Javascript minifiers and obfuscators can rename parameters and break that approach because angular expects, for instance, $scope to be named precisely $scope (and minifiers like to rename parameters to something as small as possible in order to shrink the file as small as possible).
One way, amongst others, around that is inline annotation:
someModule.factory('greeter', ['$window', function(renamed$window) {...}]);
(again from the angular docs). This gets around the issue as the minifers/.. won't change a string literal. And angular knows to inject the service with that string name into the matched parameter within the function. So that parameter name can be changed to anything by the minifier and all is well as the only thing that matters is the service's position within the list of strings/parameters (first string matches to first parameter, etc.).
For lots more on dependency injection: http://docs.angularjs.org/guide/di
Where you specify "HERE IS ONE PLACE TO DO IT" is actually where you can inject different modules into another module, here is an example.
var helperModule = angular.module('helperModule', []);
var pageModule = angular.module('pageModule', ['helperModule']);
pageModule now has access to all the services & directives.. etc. linked to helperModule
And where you specify this
function(B: $hereIsAnotherPlace){ ...
Is where you inject services, although that javascript is invalid.
Here are 2 ways that you can inject services.
.controller( 'myController', function( $myService ) { ... });
Or for minified code you would use.
.controller( 'myController', ['$myService', function( $myService ) { ... }]);
in the latter example you can change the name of $myService in the arguments to anything you like.
Quick Example
.controller( 'myController', ['$myService', function( $thisIsEqualTo$myService ) { ... }]);
So the last 2 example's are identical, when you use the Array to specify the injections, the arguments can be named whatever as they are passed in the order that you require them in the Array.
A is only used when creating your module, and should only be used once in your app.
angular.module('myApp', [A: HERE IS ONE PLACE TO DO IT]);
B is for injecting into the controller...
angular.module('myApp')
.controller('HomeController', function(B: $hereIsAnotherPlace){
});
No injection of A again otherwise it will create a new module rather than using your already created one.
ONE PLACE TO DO ITis actually a place to add modules