Angular.js Dersleri 9 - $ prefix, Dependency Injection, Order of Injection

17 - $ prefix in angularJS
It is for angularJS predefined service only.

‘$’ Prefix Naming Convention
You can create your own services, and in fact we will do exactly that in step 11. As a naming convention, angular’s built-in services, Scope methods and a few other angular APIs have a ‘$’ prefix in front of the name. Don’t use a ‘$’ prefix when naming your services and models, in order to avoid any possible naming collisions.

18 - Safe Style of Dependency Injection

In the example, we defined our dependencies as follows:

myModule.controller("MainCtrl", ["$log", function($log) {}]);

We could have also defined them as:

myModule.controller("MainCtrl", function($log) {});

That is, ditch the array syntax and directly provide our controller function. Why then would we go to this extra effort of typing in boilerplate if it doesn’t have any effect? The reason for preferring the first syntax over the latter is that when we build our application for deployment, we often run our JavaScript through a step known as minification or uglification. In this step, our JavaScript is globbed into one single file, comments are dropped, spaces are removed, and finally, variables are renamed to make them shorter. So the $log variable might get renamed to xz (or some other random, shorter name).

When we normally run our application and use the latter syntax (without the arrays),  AngularJS is able to look at the name of the variable and figure out what service we need. When the uglification has finished, AngularJS has no clue what the variable xz previously

referred to. The uglification and minification processes do not touch string constants. Therefore, the first example would get translated to something like:

myModule.controller("MainCtrl", ["$log", function(xz) {}]);

while the latter example would translate to something like:

myModule.controller("MainCtrl", function(xz) {});

In the former, AngularJS still has the string "$log" to tell it what the service originally was, while it doesn’t have that in the latter. Recent developments like the ng-min library allow us to write code in the latter way and have it automatically convert to the former, but it can have edge cases. So it might be preferable to always use the safer style of Dependency Injection in case you don’t want to risk it.

( Dependency'lerimizi söylerken şu 2 sentax'dan birini kullanabiliriz. Ancak 1. sentax daha güvenlidir tercih edilmelidir:

a - myModule.controller("MainCtrl", ["$log", function($log) {}]);

b - myModule.controller("MainCtrl", function($log) {});

Çünkü uygulamamızı build ettiğimizde genellikle Javascript'imizi minification veya uglification diye bilinen bir adımda çalıştırırız. Bu adımda yazdığmız tüm Javascript kodları single bir dosyada toplanır, yorumlar ve boşluk karakterleri silinir, variable'lar kısa isimlerle tekrar isimlendirilir. Örneğin, $log isimli variable'ın ismi xz gibi bir şey yapılabilir bu adımda.

2.sentax'ı kullanıp, uygulamayı normal bir şekilde çalıştırdığımızda ise(yani 2. parametre array'siz olacak şekilde), uglification işlemi bittikten sonra artık variable'ların ismi değiştirilmiştir,dolayısıyla örneğin xz isimli variable'ın nereye refer ettiği hakkında bir fikrimiz,bilgimiz yoktur. uglification ve minification işlemlerinde string constant'lara dokunulmaz,değiştirilmez; dolayısıyla 1.case'deki string constant da değişmeden kalır, dolayısıyla xz isimli variable'ın nereye refer ettiği bilgisi kaybolmaz.

myModule.controller("MainCtrl", ["$log", function($log) {}]); 1.case'de uglification'dan sonra kod böyle olur -> myModule.controller("MainCtrl", ["$log", function(xz) {}]);

myModule.controller("MainCtrl", function($log) {}); ) 2.case'de uglification'dan sonra kod böyle olur -> myModule.controller("MainCtrl", function(xz) {});

1.case'deki kodda "$log" string'i hala durmaktadır, service'in ne olduğu bilgisi buradan bilinebilir. 1.case'de bu bilgi kaybolmuştur. Son yıllarda yapılan çalışmalar sayesinde ng-min gibi library'leri kullanarak 2.case'deki gibi kod yazabiliriz, bu kod 1.case'deki kod'a dönüştürülür, ancak dönüştürülemeyeceği durumlar da olabilir, henüz yeterince garanti değildir. Dolayısıyla 1.case'i tercih etmek en doğru karar olacaktır. )

In addition :

http://stackoverflow.com/questions/18698963/use-of-inject-in-angular-js-in-controllers

I am new to angularjs , I am totally confused about inject. I do not know where to use it and why? Is this only use with factory as explain in this link inject link?

myController.$inject = ['$scope','notify'];

That is one approach to support Dependency Injection after your code is minified (if you choose to minify).

When you declare a controller, the function takes parameters:

function ($scope, notify)

When you minify the code, your function will look like this:

function (a, b)

Since AngularJS uses the function parameter names to infer DI, your code will break because AngularJS doesn't know about a or b.

To solve this problem, they provided additional ways to declare controllers (or other services/factories/etc) for that matter:

1) For controllers, use the $inject method - here you pass an array of literals that map to the parameters of your controller function. So, if you provide

['$scope', 'notify']

then the value of the first parameter to your function will be the a scope object associated with this controller and the second parameter will be the notify service.

2) When declaring new controllers, services, etc, you can use the array literal syntax. Here, you do something like this:

   angular.module('myModule').controller('MyController', ['$scope', 'notify', function ($scope, notify) {

...

}]);

The array as a parameter to the controller function maps the DI objects to your function parameters.

I prefer Option #2 when declaring controllers etc as it is easier to read/understand/cross-check since it is all in the same place.

- To complement the above answer, it is important to note that using the $inject method in the style of:

MyController.$inject = ['$scope', 'notify'];

allows you to add injection dependencies when building providers which are the only angular recipes that don't allow 'friendly' annotation style i.e.:

.controller('MyController', ['$scope', 'notify',...

dependencies to be declared.

provider'larda array notation ile dependency inject edemediğimiz için $inject kullanırız.

19 - Order of Injection