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

Asked 29/1, 2014 at 14:24 Answered 29/1, 2014 at 14:57

javascript angularjs angularjs-directive angularjs-routing

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?

Crinkly answered 29/1, 2014 at 14:24 Comment(6)

What is the link for the step you are on? – Athenaathenaeum 29/1, 2014 at 14:27

@Athenaathenaeum Step 7. docs.angularjs.org/tutorial/step_07 – Crinkly 29/1, 2014 at 14:28

possible duplicate of specifying AngularJS controller: benefits using ngController vs. $routeProvider – Karakoram 24/10, 2014 at 5:57

@DanDascalescu I think my question came first. – Crinkly 24/10, 2014 at 17:40

@austin: I know, but unfortunately the other one has better answers. – Karakoram 24/10, 2014 at 17:41

@DanDascalescu I dunno, I think those answers are pretty subjective. Both appeal to personal opinions. At least this question has some source code and some objectivity in the answers. – Crinkly 24/10, 2014 at 17:44

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.

Providenciaprovident answered 29/1, 2014 at 14:43 Comment(0)

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.

Disorder answered 29/1, 2014 at 14:57 Comment(0)

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.

Gibberish answered 29/1, 2014 at 14:29 Comment(0)

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.

Athenaathenaeum answered 29/1, 2014 at 14:28 Comment(0)

-1

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>

Rita answered 29/1, 2014 at 14:29 Comment(1)

When I use the ng-view attribute I get an error that the maximum stack size is exceeded. – Pfaff 13/11, 2017 at 20:45

Recommended topics

Hot tags