UI-Router: UI-Router es un enrutador del lado del cliente. Está hecho para aplicaciones web de una sola página. Un enrutador del lado del cliente actualiza la URL del navegador a medida que el usuario navega por la aplicación de una sola página.
AngularJS le permite cambiar el título de su página en diferentes etapas
Veamos cómo cambiar el título.
Esta es la forma en que puede configurar el título de la página usando UI-Router
Usando Resolve:
Instale angular-ui-title y agregue a su proyecto Angular como de costumbre, luego no olvide inyectar ui-router-title en el módulo de su aplicación principal.
angular.module('codeSide', [
'ui.router', 'ui.router.title'])
.config(['$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home/home.html',
controller: 'HomeController',
resolve: function() {
$title: 'Homepage'
}
})
// other states here
.....
)]);
En su código de archivo de índice debe ser
<head> <title ng-bind= "($title || 'Home') + ' :: CodeBySide'"> CodeBySide </title> </head> About US Services Contact US <head> <title ng-bind= "($title || 'Home') + ' :: CodeBySide'"> CodeBySide </title> </head>
Producción:
nuestro título no se genera dinámicamente en el código anterior.
Obtener títulos para que se generen dinámicamente
angular-ui-router cambia el $rootScope para que la variable $title esté disponible en todo el sitio.
Ejemplo:
codeObject.$loaded()
.then(function(data) {
$rootScope.$title = data.title;
// update title with detail page
// other code here
}
Es con el uso del enfoque angular-ui-title.
Usando $rootScope.$on(…)
En este enfoque , ui-router permite agregar una clave arbitraria: material de valor a nuestra configuración de $estado, disponible para ser referenciado en cualquier lugar que queramos en cualquier momento.
Ejemplo:
.state('detail', {
url: '/codes/:codeId',
templateUrl: 'codes/detail.html',
controller: 'DetailController',
data: {
title: 'Code Detail'
}
})
Con este enfoque, necesitamos un enfoque intermediario adicional dentro de la función .run de nuestra aplicación.
.run(['$rootScope', '$state',
function($rootScope, $state) {
$rootScope.$on('$stateChangeSuccess', function() {
$rootScope.title = $state.current.data.title;
});
}
])
En el archivo de índice para este enfoque, reemplace la variable $title con solo un título como este
<head> <title ng-bind="(title || 'Home') + ' :: CodeBySide'"> CodeBySide </title> </head> About US Services Contact US <head> <title ng-bind="(title || 'Home') + ' :: CodeBySide'"> CodeBySide </title> </head>
Producción:
Luego, hacer el fragmento de arriba, con un ligero cambio, nos pone en marcha:
codeObject.$loaded()
.then(function(data) {
$rootScope.title = data.title;
// update title with detail page
// many code here
}
Publicación traducida automáticamente
Artículo escrito por priyankakoundel03 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA