AngularJS - How to execute function in controller only once in the context of Routing

Question

I'm using the routing feature of AngularJS. Furthermore I want only on controller for all templates.

In my controller angularJsController I have an initfunction, which should only be executed at the first time the controller gets executed and when I explicitly call the function. But I don't wan't that the init function will be executed each time the routing loads another template.

How can I achieve the desired behaviour?

var app = angular.module("angularJsApplication", ["ngRoute"]);

app.config(function($routeProvider) {
   $routeProvider
       .when("/overview", {
           templateUrl : "overview.html",
           controller : "angularJsController"
       .when("/settings", {
           templateUrl : "settings.html",
           controller : "angularJsController"
       ...
});

app.controller("angularJsController", function ($scope, $location, $http) {
  $scope.init = function() {
    //do stuff
  };
}

That's almost a perfect example of what angular services are for. — Dave
– Dave, Commented Sep 7, 2016 at 16:16
First, this is what services are for; services are singletons, so they only initialize once. Second, you should NEVER use the same controller for more than one route. — Claies
– Claies, Commented Sep 7, 2016 at 16:20
@Claies can you explain why you say never use the same controller for more than one route? I've done this in the past w/out issue (though not 1 controller for all my routes). Just curious, it seems perfectly acceptable to re-use a controller. — Sunil D.
– Sunil D., Commented Sep 7, 2016 at 16:22
The whole point of the MVC architecture is that you have separation of concerns. While using the same Controller for more than one View (Route) works, it isn't a separated concern. It can lead to confusion when you have functions/properties in the controller that don't even apply to the particular view, or when you try to use the same value in multiple views which end up either not being set or being reset or changed unexpectedly. — Claies
– Claies, Commented Sep 7, 2016 at 16:28

Dave · Accepted Answer · 2016-09-07 16:31:27Z

1

Create a service to do the things that should only be executed once. Services are stored as singletons, but you can provide one or more ways to re-execute code.

app.factory("initService", [function() {
    var returnObject = {}
    // set properties of returnObject
    // do something like this if you need "explicitly call the function"
    returnObject.recaculate = function() {
        // perform recaculations
    } 
    return returnObject;
}]);

Don't forget to inject the service into your controller(s):

app.controller("angularJsController", ["$scope", "$location", "$http", "initService", function ($scope, $location, $http, initService) {
    // controller contents
    $scope.reInit = function() {
       initService.recaculate();
    }
}]);

answered Sep 7, 2016 at 16:31

Dave

4,4223 gold badges26 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - How to execute function in controller only once in the context of Routing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related