Page title, description using angular-ui-router
Question
I have tried / used all the possible references on stackoverflow and other tutorials but could not get page title, description to work. My state code looks like this
$urlRouterProvider.otherwise('/home/welcome');
$stateProvider
.state('home', {
url: "/home",
abstract: true,
templateUrl: "views/home_base.html",
controller : "HomebaseCtrl"
})
.state('home.welcome', {
url: '/welcome',
templateUrl: 'views/welcome.html',
controller: 'WelcomeCtrl'
})
In my controller 'WelcomeCtrl' file I want to set page title and description for the page. I have used rootScope but the rootScope value doesnot bind in the index.html file.
In my index.html file
<html>
<head>
<title>{{pagetitle}}</title>
</head>
<div ui-view=""></div>
routes the home_base.html file which inturns routes welcome.html file.
Controller
angular.module('ragamixApp')
.controller('WelcomeCtrl', function($rootScope){
$rootScope.pagetitle = "Hi..I am Page Title";
})
Any help would be appreciated
2 answers
solution1
0 2016-12-26 05:57:18
You just try this.
If you take a look at ui-router sample app, they use the angular .run block to add the $state variable to $rootScope.
.run([ '$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])
Setup the state the same way:
.state('home', {
url: '/home',
templateUrl : 'views/home.html',
data : { pageTitle: 'Home' }
})
Html
<title ng-bind="$state.current.data.pageTitle"></title>
solution2
0 ACCPTED 2016-12-26 06:43:53
I think you are missing ng-app directive.
put ng-app="ragamixApp" directive in you html tag.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.