What is the difference between an ng-controller directive and a controller in the route?

问题

I worked through the tutorial on the AngularJS website and I noticed that in at step 7, they change how a controller is introduced into the application. Initially, they use a directive:

<body ng-controller="PhoneListCtrl">
...
</body>

However, it later gets changed to use a controller attribute as part of an ng-route.

$routeProvider.
    when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
    }). 
    /* rest of routes here */

Here's the git diff where the change is made. Is there a difference between these two techniques?

回答1:

Controller using a ng-controller directive:

A new $scope is created on ng-controller element.
Explicit view-to-controller connection
Visible with inspect element, etc

Controller in a route:

A new $scope is created per route on the ng-view element.
The controller can request dependencies defined in the route resolve.
Optional view-to-controller connection. Recommended to have a naming convention that maps routes to controllers to views.

回答2:

ng-view is the cause of the difference. You can't really do this

<div ng-view ng-controller="PhoneListCtrl">

As you'd need to change that controller as the route changed. So basically the router does that for you, and uses the controller you specified when you defined your routes.

You probably can do this:

<div ng-view>

and then in your template:

<div ng-controller="PhoneListCtrl">

and leave out the controller declaration in your routes. Which I suspect would have essentially the same effect, although I've never tried that. Probably better to go with convention here though.

回答3:

One of well-known feature of Angularjs is Single-Page Applications.

If you assign ng-controller attribute directly on the page：

<body ng-controller="PhoneListCtrl">
...
</body>

you can't switch controllers easily for other tasks.

So, use route to switch controllers is one of important step in learning Angular Single-Page feature.

You can have same layout and one different element by using route and ng-view directive.

$routeProvider.
    when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
    }).
    when('/tablets', { 
        templateUrl: 'partials/tablet-list.html',
        controller: 'TabletListCtrl'
    }).

If '/phones'

<div ng-view></div>

will include your 'partials/phone-list.html' template and set 'PhoneListCtrl' as div controller

The same：

If '/tablets'

<div ng-view></div>

will include your 'partials/tablet-list.html' template and set 'TabletListCtrl' as div controller

This is the difference between two.

回答4:

In the 1st case the controller is directly on the page.

Once they change it, that controller is only on the page if the route is /phones otherwise it is some other controller based on some other route.

回答5:

Yes - the change is this:

if you want to display a specific controller on the page, you can use

<body ng-controller>

BUT

if you want to do routing (application with more than one controller) - you will need to use routing + change the body to:

<body ng-view></body>

来源：https://stackoverflow.com/questions/21433879/what-is-the-difference-between-an-ng-controller-directive-and-a-controller-in-th

标签

javascript

angularjs

angularjs-directive

angularjs-routing