angularjs - пользовательский интерфейс не отображает пользовательский интерфейс сразу

Question

Я пытаюсь использовать UI-маршрутизатор в моем проекте.

Основной модуль:

  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. Но при загрузке страницы он не загружает представление по умолчанию "/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);
}

также с большим количеством состояний пользовательский интерфейс не рендерится.

Answer 1

В вашей реализации есть две подозрительные вещи. Вы вышли пустой URL, и ваш маршрут по умолчанию является абстрактным. Попробуйте мои изменения ниже.

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

ура

Answer 2

Кажется, вы забыли установить url параметр, например:

$stateProvider.state('contacts', {
    url: "/contacts",
    ...
}

Answer 3

Да. Вам нужно установить state.url в '/contacts'

$stateProvider.state('contacts', {
    url: '/contacts',
    templateUrl: '/static/partials/employee/employee-edit',
    controller: function () {
        this.title = 'My Contacts';
    },
    controllerAs: 'contact'
});