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 ?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?
- Angular 9 Image Upload with Crop Example
- Files Upload on Button Click in PHP Dropzone Example
- PHP Dropzone Allow only One File to Upload Example
- PHP Dropzone Allow only Images to Upload Example
- PHP Dropzone Delete Uploaded File Example
- Livewire CRUD Laravel 7 Example