带有控制器的路由：在路由或模板定义中？

Question

When defining a route with a template, there's basically two ways how you can set the controller corresponding to the view:

• In the route:

   $routeProvider .when('/phone/:phoneId', { controller: 'PhoneDetailController', templateUrl: 'phone.detail.html', } }); 

• In the template:

   $routeProvider .when('/phone/:phoneId', { templateUrl: 'phone.detail.html', } }); 

   <div ng-controller="PhoneDetailController"> <!-- [...] --> </div> 

What are the differences, what is recommended, and why?

Answer 1

If you look at the ui-router source code, inside viewDirective.js you can see how the controller is instantiated:

if (locals.$$controller) {
    locals.$scope = scope;
    locals.$element = $element;
    var controller = $controller(locals.$$controller, locals);
    if (locals.$$controllerAs) {
        scope[locals.$$controllerAs] = controller;
    }
    $element.data('$ngControllerController', controller);
    $element.children().data('$ngControllerController', controller);
}

So basically your two options are going to do essentially the same thing. So it is up to you, and what you believe the best semantics to be. Personally I prefer to put my controller names inside the state def, as I like to keep my templates as view oriented (and reusable) as possible. Also it seems to be the most common way to do things, so others will be able to understand your code more easily.

Answer 2

Personally I use the first version because of the better and central configuration. I think there is not a big difference but like in Comment from Filype I did not see Version 2 that often.