How can I get multiple Angular JS routes to share a single controller instance?

Question

I have an angular JS app which has an intro page and a 'working' page.. A simplified version of my html looks like:

(function () {
    'use strict';

   
    var MyController = function (_, $rootScope, $scope, $location, $anchorScroll, $timeout, gettextCatalog, service) {
        var self = this;
        console.log("test");
        //More code which invokes http requests
        
    };

    angular.module('my.controller', [ 'gettext', 'lodash', 'ngRoute', 'ngSanitize', 'ngAnimate', 'my.service' ]).config(
            function ($routeProvider) {
                $routeProvider.when('/', {
                    'templateUrl': 'modules/home.html',
                    'reloadOnSearch': false
                }).when('/chatting', {
                    'templateUrl': 'modules/working.html',
                    'reloadOnSearch': false
                });
            }).controller('MyController', MyController);
}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<html id="ng-app" ng-app="app" ng-controller="MyController as myCtrl">
<head>

<link rel="stylesheet" href="styles/main.css">


<title>What's in Theaters</title>

</head>
<body id="app-body" class="dialog-body">
    <div style="height: 100%; width: 100%" ng-view></div>

    
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-gettext/dist/angular-gettext.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    
    
    <script src="app.js"></script>
    
    <script src="modules/my-controller.js"></script>
    

</body>
</html>

The problem I have is that when I move from one route to another i.e. from "/" to "/#working" the MyController is re-initialized and the http requests which were already completed are now discarded.. How do I share the same instance of the controller across both routes?

GPicazo · Accepted Answer · 2015-09-03 17:52:03Z

Each view bound to a controller creates it's own instance of that controller. Controller's are only shared by view inheritance, that is, a child view will have access to the same instance of the parent's controller.

However that doesn't seem to be what you are trying to do. It sounds like what you want to do is persist the state of some data (acquired via http requests) between controller instances. In that case, what you'd likely want to do is move the request logic into a service (or factory) and then inject that service into the controller. Since services are singletons in angular, your requests should now only be performed once.

Example:

var MyController = function (_, $rootScope, $scope, $location, $anchorScroll, $timeout, gettextCatalog, service, yourHttpService) {
        var self = this;
        console.log("test");

// get data from your http service here... perhaps $scope.data = yourHttpService.getData(...).then(...);
    };


.factory('yourHttpService', function($http, $q) {

    var dataCache = ...; // create a local memory db to store the data

    return {
       getData: function(...) {
          var deferred = $q.defer();

          // check to see if the data is already cached, if so resolve the promise with the cached data

          // if data is not cached, perform the $http request to fetch the data, then cache it and resolve your promise

          return deferred.promise;
       };
    };

});

maddygoround · Accepted Answer · 2015-09-03 17:43:13Z

0

You can always pass your controller while defining your routes

$routeProvider.when('/', {
                    'templateUrl': 'modules/home.html',
                    'controller' : MyController,
                    'reloadOnSearch': false

                }).when('/chatting', {
                    'templateUrl': 'modules/working.html',
                    'controller' : MyController,
                    'reloadOnSearch': false
                });

answered Sep 3, 2015 at 17:43

maddygoround

2,3102 gold badges21 silver badges33 bronze badges

Collectives™ on Stack Overflow

How can I get multiple Angular JS routes to share a single controller instance?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related