AngularJS Nested View not Working

Question

Я работаю над примером приложения angularjs. У меня есть заголовок вверху, чтобы отобразить панировочные сухари и кнопку входа/выхода из системы. Слева, я хочу иметь меню с различными параметрами; например, в меню будут пользователи, контакты, курс и т. д. Я изо всех сил пытаюсь отобразить данные в правой части экрана. Я использую angularjs и Asp.Net MVC 4. Как видно из приведенного ниже рисунка, единственное, что не отображается, - это детали в правой части экрана. Я также работаю в plunkr. Вот ссылка на все, что у меня есть до сих пор. Application in Plunkr

//This is the app controller 
    var App = angular.module('App', ['ui.router']); 

//App.controller('MenuController', MenuController); 
//App.controller('ContactController', ContactController); 
App.config(['$stateProvider', '$locationProvider', '$httpProvider', '$urlRouterProvider', 
    function ($stateProvider, $locationProvider, $httpProvider, $urlRouteProvider) { 
     $locationProvider.hashPrefix('!').html5Mode(true); 
     // $urlRouteProvider.otherwise("/Menu"); 
     $stateProvider 
     .state('Menu', 
      { 
       url: '/Menu', 
       views: { 
        'TopContainer': { 
         templateUrl: '/Account/Menu', 
         controller: 'MenuController' 
        }, 
        'bottomContainer': { 
         templateUrl: '/Contact', 
         controller: 'ContactController' 
        } 
       } 
      }) 
     .state('Menu.Contact',{ 
      url: '/Contact', 
       views: { 
        'TopContainer': { 
         templateUrl: '/Account/Menu', 
         controller: 'MenuController' 
        }, 
        'bottomContainer': { 
         templateUrl: '/Contact', 
         controller: 'ContactController' 
        } 
       } 
      }) 
     .state('Menu.Contact.Detail', 
     { 
      url: '/Detail', 
      views: { 
       'TopContainer': { 
        templateUrl: '/Account/Menu', 
        controller: 'MenuController' 
       }, 
       'bottomContainer': { 
        templateUrl: '/Contact', 
        controller: 'ContactController' 
       } 
      } 
     }); 
     $urlRouteProvider.otherwise('/Menu'); 

    }]); 


App.controller('MenuController', function ($scope, $state) { 
$scope.username = "test"; 
$state.transitionTo('Menu.Contact.Detail'); 
}); 

App.controller('ContactController', function($scope,$state){ 
    $scope.reviewMessage = 'My Contacts'; 
    $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }]; 
}); 
MenuController.$inject = ['$scope', '$state']; 

Answer 1

После чтения документа несколько раз, я внес изменения в то, как государство делается. Он работал, как ожидается, после внесения изменений ниже.

$stateProvider 
.state('App', { 
     url: '/App', 
     views: { 
      'header': { 
       templateUrl : '/Menu/Header' 
      }, 
      'content': { 
       templateUrl: '/Menu/Content' 
      } 
     'leftmenu': { 
       templateUrl : '/Menu/LeftMenu' 
     } 
     } 
}) 
.state('App.Contact',{ 
      url: '/Contact', 
       views: { 
        'content@': { 
         templateUrl: '/Account/Contact', 
         controller: 'ContactController' 
        } 
     } 
    });