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 ?
- Laravel 7.x and 6.x Ajax Multiple Image Upload with Preview Example
- Laravel select with count(*) using db raw example
- PHP Laravel select with join subquery example
- PHP Laravel Ajax Form Submit Example
- How to create events for created/updated/deleted model task in Laravel 5?
- Angular JS Form Validation Example Code
- AngularJS - Confirm Password Validation Example
- Laravel Ajax Request using X-editable bootstrap Plugin Example