$route Must Be Injected In Order To Enable The $routeChangeSuccess Event In AngularJS
Earlier, when I was exploring the use of the $location service to provide state-transformation triggers in AngularJS, I noticed something interesting about the $route service; the $routeChangeSuccess event won't fire until at least one component in the application has required the $route service.
Run this demo in my JavaScript Demos project on GitHub.
To demonstrate this, I've created a Controller that logs both the $locationChangeSuccess and the $routeChangeSuccess events. This controller, however, doesn't inject the $route service. Instead, I have another, optional, sub-controller which does nothing but inject the $route service (which forces AngularJS to call the $routeProvider).
<!doctype html> <html ng-app="Demo"> <head> <meta charset="utf-8" /> <title> $route Must Be Injected In Order To Enable The $routeChangeSuccess Event In AngularJS </title> <link rel="stylesheet" type="text/css" href="./demo.css"></link> </head> <body ng-controller="AppController"> <h1> $route Must Be Injected In Order To Enable The $routeChangeSuccess Event In AngularJS </h1> <!-- These link are here just to change the $location path, which should trigger a $routeChangeSuccess event. --> <p> <a href="#/foo">Foo</a> — <a href="#/bar">Bar</a> — <a href="#/baz">Baz</a> </p> <p> <a ng-click="includeSubController()">Include the $route service</a> <!-- This conditionally-included controller does nothing but force AngularJS to instantiate and inject the $route service. --> <span ng-if="showingSubController" ng-controller="SubController"> — $route is now included. </span> </p> <!-- Load scripts. --> <script type="text/javascript" src="../../vendor/angularjs/angular-1.3.8.min.js"></script> <script type="text/javascript" src="../../vendor/angularjs/angular-route-1.3.8.min.js"></script> <script type="text/javascript"> // Create an application module for our demo. var app = angular.module( "Demo", [ "ngRoute" ] ); // -------------------------------------------------- // // -------------------------------------------------- // // I configure the route provider. app.config( function( $routeProvider ) { $routeProvider.when( "/:thing", {} ); } ); // -------------------------------------------------- // // -------------------------------------------------- // // I control the root of the application. app.controller( "AppController", function( $scope, $routeParams, $location ) { // I determine if the sub-controller is visible. $scope.showingSubController = false; // I log out the changes to the location as the user navigates around // the AngularJS application. $scope.$on( "$locationChangeSuccess", function handleLocationChangeEvent( event ) { console.log( "Location Change:", $location.path() ); } ); // I log out changes to the route as the user navigates around the // AngularJS application. $scope.$on( "$routeChangeSuccess", function handleRouteChangeEvent( event ) { console.log( "Route Change:", $routeParams ); } ); // --- // PUBLIC METHODS. // --- // I toggle the sub-controller container which will cause the // sub-controller to be instantiated. $scope.includeSubController = function() { $scope.showingSubController = true; }; } ); // -------------------------------------------------- // // -------------------------------------------------- // // This controller does nothing in the demo except for require $route which // forces AngularJS to call the $route provider and instantiate the routing // service which will, in turn, enable the $routeChangeSuccess event. app.controller( "SubController", function( $route ) { console.warn( "$route has been injected, like a boss!" ); } ); </script> </body> </html> If I navigate around the app, then include the sub-controller (thereby instantiating the $route service), and then navigate around a bit more, I get the following console output:
As you can see, before the $route is injected, only the $locationChangeSuccess event is triggered. It is only after the sub-controller is instantiated - and with it the $route service - that the $routeChangeSuccess event is triggered.
If you dig into the ngRoute module source code, this makes sense; it's the route service that starts watching for $location changes. As such, the $route service must be instantiated before any route events are triggered. Furthermore, you can see, from the source code, that the $route service and the $routeParams service are independently defined, which is why my demo can inject the $routeParams without causing the $route to be instantiated.
Want to use code from this post? Check out the license.
Reader Comments
Thanks a lot ^_^
I spent hours scratching my head before finding this post
@Jimmy,
Ha ha, glad to have helped :D
Thank you soooo much for this!
I kept wondering about why did the routeChangeSuccess event not fire till I found this post. Thanks!
It worked for me. Thanks. (from China)
Thanks for the tip, this got my Angular controller working :)
Glad this is still helping people :D That pleases me greatly!