Angular router, calling controller many times

Question

This code is functional, but it could work better. My question:

How i can insert navDetalle or other views in many states without call controller again.

(function() {
  'use strict';

  angular
    .module('miApp')
    .config(routerConfig);

  var nav = {
    templateUrl: 'app/nav/nav.html',
    controller: 'NavController',
    controllerAs: 'nav'
  };
    var navInter = {
    templateUrl: 'app/nav/navInter.html',
    controller: 'NavController',
    controllerAs: 'nav'
  };
  var navDetalle = {
      templateUrl: 'app/navDetalle/navDetalle.html',
      controller: 'NavDetalleController',
      controllerAs: 'navDetalle'         
  };
  /** @ngInject */
  function routerConfig($stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('home', {
        url: '/',
        views: {
            // the main template will be placed here (relatively named)
            'nav': nav,
            'carousel': {
              templateUrl: 'app/carousel/carousel.html',
              controller: 'CarouselController',
              controllerAs: 'carousel'
            },
            'footer':{
              templateUrl: 'app/footer/footer.html'
            }
        }
      })
      .state('detalle', {
        url: '/detalle/:idDetalle',
        views:{
            'nav': navInter,
            'detalle': {       
              templateUrl: 'app/detalle/detalle.html',
              controller: 'DetalleController',
              controllerAs: 'detalle'
            },
            'navdetalle': navDetalle,
            'footer':{
              templateUrl: 'app/footer/footer.html'
            }
        }

      })
      .state('resumen', {
        url: '/resumen',
        views:{
            'nav': navInter,
            'navdetalle': navDetalle,
            'footer':{
              templateUrl: 'app/footer/footer.html'
            }
        }

      })
      .state('success', {
        url: '/success',
        views:{
            'nav': navInter,
            'success': {       
              templateUrl: 'app/success/success.html',
              controller: 'SuccessController',
              controllerAs: 'success'
            },
            'navdetalle': navDetalle,
            'footer':{
              templateUrl: 'app/footer/footer.html'
            }
        }

      })
      .state('cancel', {
        url: '/cancel',
        views:{
            'nav': navInter,
            'navdetalle': navDetalle,
            'cancel': {       
              templateUrl: 'app/cancel/cancel.html',
              controller: 'CancelController',
              controllerAs: 'cancel'
            },
            'footer':{
              templateUrl: 'app/footer/footer.html'
            }
        }

      });

    $urlRouterProvider.otherwise('/');
  }
  
})();

and if you have suggestion on another improvements please comment

@ShashankAgrawal navDetalle is an object to view of state, that object is declare on top — Felipe Pincheira, May 26 '16 at 13:24
Brotha check this [issue](https://github.com/angular-ui/ui-router/issues/1800) — Gonzalo Pincheira Arancibia, May 26 '16 at 13:39

score 0 · Answer 1 · answered May 26 '16 at 04:24

0

I don't know if what you want is possible. Because ui-router always creates a new instance to the view's controller, and that makes sense cause every single view has your own scope.

answered May 26 '16 at 04:24

Carlos Henrique

21
4

score 0 · Accepted Answer · answered May 26 '16 at 13:50

I'm not sure if this is possible to prevent executing controller every time. But, I do have another solution. That might work. The Ionic Framework do this internally by preserving controller state.

Create a global controller and add it to <body> or <html> tag so that its scope can be available every time.

app.controller('GlobalController', function($scope) {

    var navDetalleCtrlInstantiated = false;

    $scope.$on('$stateChangeStart', function(e, toState, toParams) {
        if (!navDetalleCtrlInstantiated && toState.views && toState.views.navdetalle) {
            // Do the common logic on controller instantiation

           // Mark so that we don't have to do the same logic again
            navDetalleCtrlInstantiated = true;
        }
    });
});

In your view:

<body ng-controller="GlobalController">
</body>

And remove logic from your NavDetalleController.

Angular router, calling controller many times

2 Answers2