0

I'm learning Angular and I've seen some examples where the $routeProvider is configured like this:

app.config(function ($routeProvider) {
        $routeProvider.
            when("/drivers", { templateUrl: "partials/drivers.html", controller: "driversController" }).
            when("/drivers/:id", { templateUrl: "partials/driver.html", controller: "driverController" }).
            otherwise({ redirectTo: "/drivers" });
    });

And in other examples it is configured like this:

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when("/drivers", { templateUrl: "partials/drivers.html", controller: "driversController" }).
        when("/drivers/:id", { templateUrl: "partials/driver.html", controller: "driverController" }).
        otherwise({ redirectTo: "/drivers" });
}]);

Both of them seem to work the same way, but I would like to know what is the difference between calling the config by sending an Array with the '$routeProvider' as a string first and then the function and calling by just using function directly as in the first example.

Thanks.

Rafael Merlin
  • 2,517
  • 1
  • 25
  • 31

2 Answers2

2

This is not specific to $routeProvider, it's every module you can declare dependencies for.

What you are seeing is the two of the three different ways to inject your dependencies (Inline Array and Implicit, the other is $inject property), the array injection is better because minification causes problems when it is not in array syntax: 

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when("/drivers", { templateUrl: "partials/drivers.html", controller: "driversController" }).
        when("/drivers/:id", { templateUrl: "partials/driver.html", controller: "driverController" }).
        otherwise({ redirectTo: "/drivers" });
}]);
TommyMac
  • 299
  • 1
  • 6
  • 1
    There are three different ways - another way is to have an `$inject` property on the function you pass into the `$provide` function that is a string array. For example, `function MyController($http) {}; MyController.$inject = ['$http'];`. This is a common idiom in TypeScript. – Dan May 06 '15 at 19:27
  • Ahh, I just saw an example of that and thought it was strange, now that Angular 2.0 is moving to TypeScript it might benefit me to do this. Overall, the implementation is the same; "Using an array to declare dependencies". Inline Array Annotation is the most widely used and as the Angular site says, it's the preferred way. – TommyMac May 06 '15 at 19:32
  • Oh, definitely, but I felt it was misleading to say it was one of two ways. For class-based languages it feels a lot cleaner than inline array because generally your classes are one-per-file and it is annoying to have to do inline array in one file (module declaration) and then change it every time the ctor changes in the other file. – Dan May 06 '15 at 19:33
  • Updated. I've been living in the Javascript world for too long now, I don't really utilize classes for JS. Cheers! – TommyMac May 06 '15 at 19:55
0

Wrapping the service names (to be injected) between square brackets and then the function itself, would make it minification safe. This is the inline annotation way of doing it.

Nicolae Olariu
  • 2,487
  • 2
  • 18
  • 30