如何使用UI-Router设置或更新页面标题？

UI-Router： UI-Router是客户端路由器。它是为单页Web应用程序而设计的。当用户浏览单页应用程序时，客户端路由器会更新浏览器URL。

AngularJS允许您在不同阶段更改页面标题

让我们看看如何更改标题

在我们的$ state中使用resolve函数来告诉标题

在我们的模块.run中使用$ rootScope。$ on(…)函数

通过更新控制器中的标题，适用于动态页面标题，例如博客文章等。
这是您可以使用UI-Router设置页面标题的方法

使用解析：
安装angular-ui-title并像往常一样附加到您的Angular项目中，然后不要忘记将ui-router-title注入到您的父应用程序模块中。

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
   .....
   
)]);

在您的索引文件中，代码应为

    

About US
Services
Contact US

    

输出：

我们的标题不是在上面的代码中动态生成的。

获取要动态生成的标题
angular-ui-router更改$ rootScope以使$ title变量在站点范围内可用。

例子：

codeObject.$loaded()
  .then(function(data) {
    
  $rootScope.$title = data.title; 
   // update title with detail page
  // other code here
  }

它与使用angular-ui-title方法一起使用。

使用$ rootScope。$ on(…)
在这种方法中， ui-router允许向我们的$ state配置中添加任意key：value东西，可以随时随地引用。

例子：

.state('detail', {
  url: '/codes/:codeId',
  templateUrl: 'codes/detail.html',
  controller: 'DetailController',
  data: {
     title: 'Code Detail'
  }
})

使用这种方法，我们需要在应用程序的.run函数中使用一种额外的中介方法。

.run(['$rootScope', '$state',
  function($rootScope, $state) {
   
    $rootScope.$on('$stateChangeSuccess', function() {
      $rootScope.title = $state.current.data.title;
    });
  }
])

在此方法的索引文件中，将$ title变量替换为仅这样的title

    

About US
Services
Contact US

    

输出：

然后从上方开始做一个片段，稍作更改即可使我们启动并运行：

codeObject.$loaded()
  .then(function(data) {
    
  $rootScope.title = data.title; 
  // update title with detail page
  // many code here
  }