AngularJS UI-Router默认视图

时间:2015-06-15 11:25:35

标签: angularjs angular-ui-router

以下是示例代码。

http://plnkr.co/edit/jXEQ9xemL1A5b9KKKcAw?p=preview

var app = angular.module('npAdmin', ['ui.router']);

app.config(['$httpProvider', '$stateProvider', '$urlRouterProvider',
  function($httpProvider, $stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('common', {
        templateUrl: 'tpl.common.html',
        abstract: true,
        // views: {
        //   'footer': {
        //     templateUrl: 'footer.html'
        //   }
        // }
      })
      .state('common.dashboard', {
        url: '/dashboard',
        views: {
          'content': {
            template: '<div><h4>dashboard</h4></div>'
          },
          'footer': {
            templateUrl: 'footer.html'
          }
        }
      })
      .state('common.crm', { 
        url: '/crm',
        views: {
          'content': {
            template: '<div><h4>CRM</h4></div>'
          },
          'footer': {
            templateUrl: 'footer.html'
          }
        }
      })
      .state('common.abc', {
        url: '/abc',
        views: {
          'content': {
            template: '<div><h4>ABC</h4></div>'
          },
          'footer': {
            templateUrl: 'newfooter.html'
          }
        }
      })
      .state('landing', {
        templateUrl: 'tpl.login.html',
        abstract: true,
      })
      .state('landing.login', {
        url: '/login',
        template: '<div><h4>Wow</h4></div>',
      });

    $urlRouterProvider.otherwise('/crm');
  }
]);

'templateUrl'的默认'footer''footer.html',但某些州的'newfooter.html'

在这种情况下,有没有一种设置默认页脚的好方法?

我尝试同时使用'templateUrl''views',但它不起作用。

1 个答案:

答案 0 :(得分:1)

updated plunker。我们可以在父“common”中使用绝对命名:

  .state('common', {

    abstract: true,
     views: {
      '': {
        templateUrl: 'tpl.common.html',   
      },
       'footer@common': {
         templateUrl: 'footer.html'
       }
     }
  })

仅在需要时覆盖它('dashboard''crm'将使用父页脚,而'abc'是定义覆盖 - 特殊的:newfooter.html)

  .state('common.dashboard', {
    url: '/dashboard',
    views: {
      'content': {
        template: '<div><h4>dashboard</h4></div>'
      },
      // provided by parent
      //'footer': {
      //  templateUrl: 'footer.html'
      //}
    }
  })
  .state('common.crm', { 
    url: '/crm',
    views: {
      'content': {
        template: '<div><h4>CRM</h4></div>'
      },
      // provided by parent
      //'footer': {
      //  templateUrl: 'footer.html'
      //}
    }
  })
  .state('common.abc', {
    url: '/abc',
    views: {
      'content': {
        template: '<div><h4>ABC</h4></div>'
      },
      'footer': {
        templateUrl: 'newfooter.html'
      }
    }

检查here

View Names - Relative vs. Absolute Names

  

在幕后,为每个视图分配一个遵循 viewname@statename 方案的绝对名称,其中viewname是视图指令中使用的名称,州名是州的绝对名称,例如contact.item。您还可以选择以绝对语法编写视图名称。

     

例如,前面的例子也可以写成:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})