AngularJS Change Dynamically Title Element Based on Routing

AngularJS Change Dynamically Title Element Based on Routing

In this Post We Will Explain About is AngularJS Change Dynamically Title Element Based on Routing With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS: Change Page Title Based on Routers DynamicallyExample

In this post we will show you Best way to implement How to dynamically change header based on AngularJS, hear for How to dynamically set title tag on page load in AngularJSwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

READ :  Angular4 Send Email using PHP - Email sending with Angular4

Example 1 : AngularJS: Change Page Title Based on Routers Dynamically

app.js file

app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
        when('/home', {
            templateUrl: '/partials/home.html',
            controller: 'HomeCtrl',
            title: 'custom_page One'
        }).
        when('/aboutus', {
            templateUrl: '/partials/about-us.html',
            controller: 'AboutusCtrl',
            title: 'custom_page Two'
        }).
      otherwise({
          redirectTo: '/home'
      });
} ]);

$routeChangeSuccess supports event to set a live_page_title scope

app.controller('liveCtrl', ['$scope', function ($scope) { 
        $scope.$on('$routeChangeSuccess', function (event, data) {
            $scope.live_page_title = data.title;
        });
    } ]);

ng-Controller to the simple head part and use the live_page_title

	
<head ng-controller="liveCtrl">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{live_page_title}} | infinityknow.com App</title>

Example 2 : AngularJS : Change title based on Route Example

service:

app.factory('custom_page', function () {
	var title = 'default';
	return {
		title: function () { return title; },
		setTitle: function (newTitle) { title = newTitle; }
	};
});

liveCtrl

app.controller('liveCtrl', ['$scope', 'custom_page', function ($scope, custom_page) {
	$scope.custom_page = custom_page;
}]);

live_page_title in our HomeCtrl:

mainModule.controller('HomeCtrl', ['$scope', 'custom_page', function ($scope, custom_page) {
	custom_page.setTitle('custom_page One');
}]);

a call simple our angularjs service from our VIEW html:

<head ng-controller="liveCtrl">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>{{ custom_page.title() }} | infinityknow.com App</title>

Example

READ :  Angularjs push object into array first index - angularjs unshift Examples

I hope you have Got What is AngularJS : Change title based on Route Example And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.

Add a Comment

Your email address will not be published. Required fields are marked *