javascript - angularjs - ui.router 没有立即渲染 ui-view

Question

我正在尝试在我的项目中使用 ui-router。

核心模块:

  var core = angular.module('muhamo.core', ['angular-loading-bar', 'anguFixedHeaderTable', 'ui.router']);

跟踪模块:

    var app = angular.module(TRACKING_MODULE_NAME, ['muhamo.core']);
    app.config(Configure);

Configure.$inject = ['$stateProvider', '$urlRouterProvider'];
function Configure($stateProvider, $urlRouterProvider) {
    $stateProvider.state('contacts', {
        templateUrl: '/static/partials/employee/employee-edit',
        controller: function () {
            this.title = 'My Contacts';
        },
        controllerAs: 'contact'
    });
    $urlRouterProvider.otherwise("/contacts");
    console.log($stateProvider);
}

和 html 定义:

    <div  ui-view></div>

如果我点击 ui-sref 链接，它就可以正常工作。但在页面加载时，它不会加载默认 View “/contacts”。我在这里错过了什么吗？

更新

它在添加缺少的“url”属性后起作用。但现在我有另一个问题，如果我像这样扩展我的实现:

    function Configure($stateProvider, $urlRouterProvider) {
       $stateProvider.state('employees', {
          abstract: true,
          url: "/employees"
          /* Various other settings common to both child states */
        }).state('employees.list', {
           url: "", // Note the empty URL
           templateUrl: '/static/partials/employee/employee-list'
       });
    $urlRouterProvider.otherwise("/employees");
    console.log($stateProvider);
}

同样，在更多状态下，ui-view 不会呈现。

Answer 1

您的实现中有两个可疑的地方。您输出一个空网址，并且您的默认路线是抽象的。尝试下面我的更改。

 function Configure($stateProvider, $urlRouterProvider) {
   $stateProvider.state('employees', {
      abstract: true,
      url: "/employees"
      /* Various other settings common to both child states */
    }).state('employees.list', {
       url: "/list", // Note the empty URL
       templateUrl: '/static/partials/employee/employee-list'
   });
$urlRouterProvider.otherwise("/employees/list");
console.log($stateProvider);

干杯