How to dynamically change header based on AngularJS partial view?

by

I just discovered a nice way to set your page title if you’re using routing:

JavaScript:

var myApp = angular.module('myApp', ['ngResource'])

myApp.config(
    ['$routeProvider', function($routeProvider) {
        $routeProvider.when("https://stackoverflow.com/", {
            title: 'Home',
            templateUrl: '/Assets/Views/Home.html',
            controller: 'HomeController'
        });
        $routeProvider.when('/Product/:id', {
            title: 'Product',
            templateUrl: '/Assets/Views/Product.html',
            controller: 'ProductController'
        });
    }]);

myApp.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
    });
}]);

HTML:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="'myApp &mdash; ' + title">myApp</title>
...

Edit: using the ng-bind attribute instead of curlies {{}} so they don’t show on load

More Related Contents:

  1. Angular filter a object by its properties
  2. How to remove the hash # from the angularjs ng-route
  3. simple form input request in angular
  4. How does data binding work in AngularJS?
  5. What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
  6. Controller not a function, got undefined, while defining controllers globally
  7. How can I group data with an Angular filter?
  8. AngularJS with Django – Conflicting template tags
  9. Loading an AngularJS controller dynamically
  10. Ternary operator in AngularJS templates
  11. How to reduce javascript object to only contain properties from interface
  12. How to do two-way filtering in AngularJS?
  13. How to make a directive update ng-model on jquery on event?
  14. Angular UI-Router $urlRouterProvider .when not working when I click
  15. AngularJS routing 404 error with HTML5 mode
  16. Set active tab style with AngularJS
  17. How to set default browser window size in Protractor/WebdriverJS
  18. Sort an object array by custom order
  19. How to use parameters within the filter in AngularJS?
  20. Dynamic form name attribute in Angularjs
  21. How can I access a variable outside a promise `.then` method?
  22. random orderBy in AngularJS 1.2 returns ‘infdig’ errors
  23. Limiting number of displayed results when using ngRepeat
  24. AngularJS – placeholder for empty result from filter
  25. Accessing Angular inside Protractor Test
  26. AngularJS and WebSockets beyond
  27. Clear localStorage on tab/browser close but not on refresh
  28. Angular controller scope not updating after jQuery ajax call
  29. angularjs: change filter options dynamically
  30. Angular.js: Is .value() the proper way to set app wide constant and how to retrieve it in a controller

Leave a Comment