Как загрузить шаблоны ui-router ui-view, вложенные в глубину 3 состояния?

Я пытаюсь спроектировать маршрут и вложенные представления в моем приложении на несколько уровней глубже, чтобы заменить части приложения, основанные на маршруте. Я могу загрузить страницу входа в систему, и кажется, что вид макета загружается также, Однако, я не могу заставить вложенные теги <ui-view /> работать. Может кто-нибудь, пожалуйста, сказать мне, как я делаю это неправильно, или если есть более идиоматический способ в Angular, чтобы сделать то же самое функциональность.

Приложение.js 

(function() {
  'use strict';



 angular
    .module('webApp', [
      'ui.router',
    ])
    .config(config)
    .run(run);

  config.$inject = ['$stateProvider', '$urlRouterProvider'];

  function config($stateProvider, $urlRouterProvider, ngClipProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('app', {
        abstract: true,
        url: '/',
        template: '<ui-view/>'
      })
      .state('app.login', {
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl as login',
        url: ''
      })
      .state('app.main', {
        url: 'room',
        templateUrl: 'views/layout.html'
      })
      .state('app.main.foo', {
        url: '',
        views: {
          'header@app.main': {
            templateUrl: 'partials/header.html',
            controller: 'HeaderCtrl as header'
          },
          'sidebar@app.main': {
            templateUrl: 'partials/sidebar.html',
            controller: 'SidebarCtrl as sidebar'
          },
          'main@app.main': {
            templateUrl: 'partials/main.html',
            controller: 'MainCtrl as main'
          },
          'subHeader': {
            templateUrl: '<div><div ui-view="bottomHeader"></div></div>',
            controller: 'SubHeaderCtrl',
            controllerAs: 'subHeader'
          },
          'subSidebar': {
            templateUrl: '<div><div ui-view="bottomSidebar"></div></div>',
            controller: 'SubSidebarCtrl',
            controllerAs: 'subSidebar'
          },
          'bottomHeader': {templateUrl: '<div>FOO</div>'},
          'bottomSidebar': {templateUrl: '<div>BAR</div>'}
        },
        resolve: {
          isAuthenticated: ['Auth', function(Auth) {
            return Auth.isAuthenticated();
          }]
        }
      })
      .state('app.main.foo.bar', {
        url: '/:id',
        views: {
          'main@': {
            templateUrl: 'partials/main.html'
          },
          'mainOne@': {
            templateUrl: 'partials/main-one.html',
            controller: 'MainOneCtrl as mainOne'
          },
          'mainTwo@': {
            templateUrl: 'partials/main-two.html',
            controller: 'MainTwoCtrl as mainTwo'
          },
          'mainThreee@': {
            templateUrl: 'partials/main-three.html',
            controller: 'MainThreeCtrl as mainThree'
          }
        }
      });
  }

  run.$inject = ['Auth'];

  function run(Auth) {
    Auth.stateChangeError();
    Auth.loginSuccess();
    Auth.loginFailure();
    Auth.checkSession();
  }

}());

Индекс.html 

<!DOCTYPE html>

<html lang="en" ng-app="webApp">
  <head>
    <title>FooBar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/main.css" />
    <script src="/js/all.js"></script>
  </head>

  <body ui-view>
  </body>

</html>

Планировка.html 

<div ui-view="header"></div>

<div class="app">
 <div class="getting-started">
 </div>

 <div ui-view="sidebar"></div>

 <div ui-view="main"></div>
</div>

Заголовок.html 

<header class="header">
  <div ui-view="subHeader"></div>

  <div class="trigger-button">
    <button class="trigger">
      <i class="icon-account"></i>
    </button>
  </div>
</header>

Главное.html 

<div>
  <div ui-view="mainOne"></div>
  <div ui-view="mainTwo"></div>
  <div ui-view="mainThree"></div>
</div>

Боковая панель.html 

<div>
  <div ui-view="subSidebar"></div>
</div>
1 2
javascript angularjs angular-ui-router angular-routing

1 ответ:

Есть рабочий поршень , показывающий ваш сценарий

Я внес несколько изменений в определение вашего состояния: 

$stateProvider
  .state('app', {
    abstract: true,
    url: '/',
    template: '<ui-view/>'
  })
  .state('app.login', {
    templateUrl: 'views/login.html',
    controller: 'LoginCtrl',
    controllerAs: 'login',
    url: ''
  })

мы используем синтаксис controller и controllerAs 

  .state('app.main', {
    url: 'room',
    templateUrl: 'views/layout.html'
  })

нет абсульта именования, мы нацелены на нашего родителя, родственника достаточно, более читаемый 

  .state('app.main.foo', {
    url: '',
    views: {
      'header': {
        templateUrl: 'partials/header.html',
        controller: 'HeaderCtrl',
        controllerAs: 'header',
      },
      'sidebar': {
        templateUrl: 'partials/sidebar.html',
        controller: 'SidebarCtrl',
        controllerAs: 'sidebar',
      },
      'main': {
        templateUrl: 'partials/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main',
      }
    },
    resolve: {
      isAuthenticated: ['Auth', function(Auth) {
        return Auth.isAuthenticated();
      }]
    }
  })

главная состояние находится в нашем родителе, не переопределяйте его 

  .state('app.main.foo.bar', {
    url: '/:id',
    views: {
      'mainOne': {
        templateUrl: 'partials/main-one.html',
        controller: 'MainOneCtrl',
        controllerAs: 'mainOne',
      },
      'mainTwo': {
        templateUrl: 'partials/main-two.html',
        controller: 'MainTwoCtrl',
        controllerAs: 'mainTwo',
      },
      'mainThreee': {
        templateUrl: 'partials/main-three.html',
        controller: 'MainThreeCtrl',
        controllerAs: 'mainThree',
      }
    }
  });

Проверьте это здесь

5