When using angular-ui-router, what is the suitable structure for controller?

Question

Before use angular-ui-router, one controller always support several router&views, such as:

$routeProvider.
    when('/posts', {
        templateUrl: 'views/posts/list.html'
    }).
    when('/posts/create', {
        templateUrl: 'views/posts/create.html'
    }).

all views for one object share one controller:

app.controller('PostsCtrl', function($scope) {
  $scope.create = function() {
    // ...
  }
  $scope.list = function() {
    // ...
  }
});

and init data in view:

<div data-ng-controller="PostsController" data-ng-init="list()">
  ...
</div>

But in angular-ui-router, we use state, so we need create several controller for each state, such as:

$stateProvider
  .state('posts', {
    abstract: true,
    url: '/posts',
    templateUrl: 'views/posts/list.html',
    controller: 'PostsCtrl'
  })
  .state('posts.detail', {
    url: '/:postId',
    templateUrl: 'views/posts/detail.html',
    controller: 'PostsDetailCtrl'
  })

Separating controller seems not a good design pattern.

So, is there any better suggestion to structure controllers?

I'm not sure what the question is...? Controllers should be written specific to the parts of the UI they control. The smaller and more focused, the better (to a point, obviously; I find around 5-6 methods each is the ideal size). — Nate Abele
– Nate Abele, Commented Nov 28, 2013 at 3:55

t_over · Accepted Answer · 2014-03-05 10:01:10Z

It is a little late for an answer, but as I was struggling with it and found an answer, I might as well post it.

I agree with Nate's comment that in most circumstances you should keep the controllers as small as possible, i.e. you should write a separate controller for every state. However, if you find yourselves in a situation that really think that using the same controller for both the parent and child views is preferable you can simply omit the controller option in the child view. This view will then use the state of the parent. This can be read in the documentation. A little example:

app.js

app.controller('testController', ['$scope', function($scope){
    $scope.message= 'This comes from testController';
}]);

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider ,$urlRouterProvider) {
    $stateProvider
    .state('test', {
      url: '/test',
      templateUrl: 'partials/test.html',
      controller: 'testController'
    })
    .state('test.child', {
      url: '/child',
      templateUrl: 'partials/test2.html'
    });
}]);

partials/test.html

<div>
    Test.html: {{message}}
    <div data-ui-view></div>
</div>

partials/test2.html

<div>
    Test2.html: {{message}} as well.
</div>

This will produce the following (with url #/test/child)

Test.html: This comes from testController
Test2.html: This comes from testController as well.

I hope this helps anyone

Collectives™ on Stack Overflow

When using angular-ui-router, what is the suitable structure for controller?

1 Answer 1

app.js

partials/test.html

partials/test2.html

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

app.js

partials/test.html

partials/test2.html

Comments

Your Answer

Sign up or log in

Post as a guest

Related