Proper way to display view name
angular-routing, angularjs, ngroute
Solution
You could do something like this - by attaching to the `$routeChangeStart` event and putting the current route name on the $rootScope.
angular.module('myModule', ['ngRoute']).run([
'$rootScope',
function ($rootScope) {
$rootScope.$on('$routeChangeStart', function (event, next) {
$rootScope.currentRoute = next;
});
}]);
Then in your HTML you could do this:
<span>{{currentRoute.name}}</span>
Problem
I would like to display the view name above the view Basically, I am looking for something like ``` <h1>{{viewName}}<h1> <div ng-view=""></div> ``` I have tried convoluted ways to get the view name from $routeProvider without much success. My router looks like this ``` (function() { var app = angular.module("myModule", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/view1", { name: "View One", templateUrl: "view1.html", controller: "View1Controller" }) .when("/view2", { name: "View Two", templateUrl: "view2.html", controller: "View2Controller" }) .otherwise({ redirectTo: "/view1" }); }); }()); ``` My reasoning for displaying the view name outside the view is that the container (in this case ) would not be removed from the DOM at each view change, otherwise it flickers. Am I using the right approach? How do you reach the "name" property inside $routeProvider?