Hi Artisan,
today, we will learn how to set dynamically title tag on page in AngularJS Application. If you work on angularjs app then you know page would not reload during click on link or form submit, but we need to set dynamically title element on each page that way we can make better SEO.
So if you want to set dynamically title tag on page based on routes in AngularJS then you can follow bellow code and check how it works. So let's see bellow code:
Example Code Solution:
app.js
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: '/partials/home.html',
controller: 'HomeCtrl',
title: 'Home Page'
}).
when('/contactus', {
templateUrl: '/partials/contact-us.html',
controller: 'ContactusCtrl',
title: 'Contact Us Page'
}).
otherwise({
redirectTo: '/home'
});
} ]);
Set Title Scope:
app.controller('HDTutoCtrl', ['$scope', function ($scope) {
$scope.$on('$routeChangeSuccess', function (event, data) {
$scope.hd_page_title = data.title;
});
} ]);
User Title:
<head ng-controller="HDTutoCtrl">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{hd_page_title}} | HDTuto.com App</title>
I hope you found your best solution...
Do you like below Tutorials ?
- Multidimensional Array Search By Value in PHP
- Laravel Install Font Awesome Icons Example
- How to Use Moment JS in Laravel?
- Angular 9 Get Environment Variables Example
- Angular Delete a Component From Cli Example
- How to Upload File from Local to Server using SSH?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?