CODEWITHSUNDEEP
angularjsangular-ui-router
Fancyoung
Fancyoung

Reputation: 2423

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

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?

Upvotes: 0

Views: 447

Answers (1)

t_over
t_over

Reputation: 122

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

Upvotes: 2

Related Questions