angularjs 中通过ui-router设置不同网页不同内容

controller.js 

angular.module('myApp', [ ] )
  .run(['$location','$rootScope',function($location, $rootScope){
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
      $rootScope.title = toState.title
    });
  }]);

router.js

$stateProvider
      .state('global.search', {
        title: ' 这里设置每个page的title',
        url: '/global/search?q&company&user®ion&account_type&call_type®istered',
        views: {
          'main': {
            templateUrl: helper.getUrl('global.search'),
            controller: 'searchCtrl',
          }
        }
      })

index.html 

通过ng-bind指令将　 $rootScope下的title绑定到html页面中

在$stateProvide.state中设置一个属性用力传递title内容，这里设置的是title属性

在主页的angualr.module()下运行run()函数用来获取router传来的title属性，每当网页更改跳转就会触发$stateChangeSuccess事件

这里的$stateChangeSuccess事件不可以用$routechangesuccess事件替代，如果不用ui-router插件则可以，代码如下：

router.js

.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
    .state('home', {
        url: '/home',
        templateUrl : 'views/home.html',
        data : { pageTitle: 'Home' }

    })
    .state('about', {
        url: '/about',
        templateUrl : 'views/about.html',
        data : { pageTitle: 'About' }
    })
     });

controller.js

$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
    $rootScope.pageTitle = $route.current.data.pageTitle;
  });

index.html