$routeParams is empty in main controller

Question

I have this piece of layout html:

Answer 1

You have at least two problems here:

• with $routeParams you get the route parameters, which you didn't define

• the file where you define a main controller doesn't really matter. the important thing is in which module/function

The parameters have to be defined with the $routeProvider with the syntax :paramName:

$routeProvider.when("/view2/name1/:a/name2/:b"

and then you can retrieve them with $routeParams.paramName.

You can also use the query parameters, like index.html?k1=v1&k2=v2.

app.js is the file where you'd normally define dependencies and configuration (that's why you'd have there the app module .config block) and it contains the application module:

var myapp = angular.module(...);

This module can have other modules as dependencies, like directives or services, or a module per feature. A simple approach is to have a module to encapsulate controllers. An approach closer to your original code is putting at least one controller in the main module:

myapp.controller('MainCtrl', function ($scope) {...}

Maybe you defined the controller as a global function? function MainCtrl() {...}? This pollutes the global namespace. avoid it.

Defining your controller in the main module will not make it "to take effect in all routes". This has to be defined with $routeProvider or make the controller of each route "inherit" from the main controller. This way, the controller of each route is instantiated after the route has changed, whereas the main controller is instantiated only once, when the line ng-controller="MainCtrl" is reached (which happens only once, during application startup)

Answer 2

had the same problem, and building off what Andre mentioned in his answer about $routeParams taking a moment to load in the main controller, I just put it in a timeout inside my MainCtrl.

angular.module('MyModule')
  .controller('MainCtrl', function ($scope, $routeParams, $timeout) {

    $timeout(function(){
      // do stuff with $routeParams
      console.log('routeParams:'+JSON.stringify($routeParams));
    }, 20);

  });

20ms delay to use $routeParams is not even noticeable, and less than that seems to have inconsistent results.

More specifically about my problem, I was confused because I had the exact same setup working with a different project structure (yo cg-angular) and when I rebuilt my project (yo angular-fullstack) I started experiencing the problem.

Answer 3

You can simply pass values of $routeParams defined into your controller into the $rootScope

.controller('MainCtrl', function ($scope, $routeParams, MainFactory, $rootScope) {
    $scope.contents = MainFactory.getThing($routeParams.id);
    $rootScope.total = MainFactory.getMax(); // Send total to the rootScope
}

and inject $rootScope in your IndexCtrl (related to the index.html)

.controller('IndexCtrl', function($scope, $rootScope){
    // Some code
});

Answer 4

As an alternate to the $timeout that plong0 mentioned...

You can also inject the $route service which will show your params immediately.

angular.module('MyModule')
  .controller('MainCtrl', function ($scope, $route) {
      console.log('routeParams:'+JSON.stringify($route.current.params));
  });

Answer 5

I have the same problem.

What I discovered is that, $routeParams take some time to load in the Main Controller, it probably initiate the Main Controller first and then set $routeParams at the Child Controller. I did a workaround for it creating a method in the Main Controller $scope and pass $routeParams through it in the Child Controllers:

angular.module('MyModule')
  .controller('MainController', ["$scope", function ($scope) {
    $scope.parentMethod = function($routeParams) {
     //do stuff
    }
  }]);

angular.module('MyModule')
  .controller('MyCtrl1', ["$scope", function ($scope) {
    $scope.parentMethod($routeParams);
  }]);

angular.module('MyModule')
  .controller('MyCtrl2', ["$scope", function ($scope) {
    $scope.parentMethod($routeParams);
  }]);

Answer 6

The $routeParams service is populated asynchronously. This means it will typically appear empty when first used in a controller.

To be notified when $routeParams has been populated, subscribe to the $routeChangeSuccess event on the $scope. (If you're in a component that doesn't have access to a child $scope, e.g., a service or a factory, you can inject and use $rootScope instead.)

module.controller('FooCtrl', function($scope, $routeParams) {
  $scope.$on('$routeChangeSuccess', function() {
    // $routeParams should be populated here
  });
);

Controllers used by a route, or within a template included by a route, will have immediate access to the fully-populated $routeParams because ng-view waits for the $routeChangeSuccess event before continuing. (It has to wait, since it needs the route information in order to decide which template/controller to even load.)

If you know your controller will be used inside of ng-view, you won't need to wait for the routing event. If you know your controller will not, you will. If you're not sure, you'll have to explicitly allow for both possibilities. Subscribing to $routeChangeSuccess will not be enough; you will only see the event if $routeParams wasn't already populated:

module.controller('FooCtrl', function($scope, $routeParams) {
  // $routeParams will already be populated
  // here if this controller is used within ng-view

  $scope.$on('$routeChangeSuccess', function() {
    // $routeParams will be populated here if
    // this controller is used outside ng-view
  });
);