multiple views in a single state sharing a single controller using ui-router

Question

I have defined my states as specified below,

The template looks as below,

     <div class="row-fluid">
        <section class="header">
            <div ui-view="header"></div>
        </section>

        <section class="content">
            <section class="actions">
                <div ui-view="action-bar"></div>
            </section>
        </section>

        <section class="footer">
            <div ui-view="footer"></div>
        </section>
    </div>


  .state('authenticated', {
        url: '/home',
        templateUrl: 'html/appShell.html'
    })
    .state('basicLayout', {
        parent: 'authenticated',
        url: '^/start',
        ***controller: 'abcController',***
        views: {
            '': {templateUrl: 'html/templates/basicLayout.html'},
            'header@basicLayout' : { 
               templateUrl:'html/templates/header.html',
                controller: 'abcController'},
            'action-bar@basicLayout' : { 
                templateUrl: 'html/templates/action-bar.html',
                controller: 'abcController'}
        }        
    })

I have a json file which essentially has the data for Module Name, which goes into header and action bar is a directive which needs info from the config for the type of buttons and actions for each of the button being passed within the json.

My question is can i associate one shared controller to read the data from the module.json and map the $scope variables or should each view for eg header should it have a separate controller and action bar view have a separate controller.

I don't want to have multiple controllers fro each view and was wondering whats the best way to do this???

Answer 1

In answer to your question. Yes, you can have a single controller that contains the data on a scope variable and access that data in different views with routing.

First you set a variable to the returned data object array from your json. Without knowing what your data looks like, let's pretend your "data" object looked like this.

{  
   "thingsforview1" : [ //lots of objects here ],
   "thingsforview2" : [ //lots of objects here ],
   "thingsforview3" : [ //lots of objects here ]
}

You could set a variable on your controller for that data called:

$scope.data = theJsonDataIGot;

In each view, bind to the data you need. You could have a separate .html template for each of the views.

i.e. in view 1:

<ul>
    <li ng-repeat="thing in data.thingsforview1">
        {{ thing }}
    </li>
</ul>

i.e. in view 2:

<ul>
    <li ng-repeat="otherthing in data.thingsforview2">
        {{ otherthing.name }}
    </li>
</ul>

Return the different templates depending on the url.

app.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.
          when('/view1', {
            templateUrl: 'views/view1.html'
          }).
          when('/view2', {
            templateUrl: 'views/view2.html'
          }).
          otherwise({
            redirectTo: '/'
          });
      }]);

You would include the following markup:

<div ng-view></div>

This is where the different templates will be displayed when hitting the different urls.

Hope that helps!

EDIT

A simple change to what you currently have would be, a single controller, header and footer changed to directives, and the state to determine the content view.

<div ng-controller="abcController">
    <div class="row-fluid">
            <section class="header">
                <div my-header></div>
            </section>

            <section class="content">
                <section class="actions">
                    <div ui-view="action-bar"></div>
                </section>
            </section>

            <section class="footer">
                <div my-footer></div>
            </section>
     </div>
</div>

Then you can switch view from state and still use templates for the header and footer, and switch content of the view from state. Or if the content of the header and footer also change, include those directives in the template of the different views.