Winkel-ui-Router Mehrere Ansichten

Ich bin neu Winkel-ui-Router zu verwenden, muss ich eine index.html und Javascript wie folgt aus:Winkel-ui-Router Mehrere Ansichten

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

 
mainApp.config(['$stateProvider', '$urlRouterProvider','$httpProvider', 
 
    function($stateProvider, $urlRouterProvider,$httpProvider){ 
 
    $urlRouterProvider.when('','/index'); 
 
    $stateProvider.state('index',{ 
 
    url:"/index", 
 
    views:{ 
 
     'menu':{ 
 
     templateUrl:'views/menu.html' 
 
     }, 
 
     'content':{ 
 
     templateUrl:'views/content1.html' 
 
     } 
 
    } 
 
    }).state('index.content1',{ 
 
    url:"index/content1", 
 
    views: { 
 
     '[email protected]': { 
 
     templateUrl: 'views/content1.html' 
 
     }} 
 
    }) .state('index.content2',{ 
 
    url: 'index/content2', 
 
    views: { 
 
     'content': { 
 
     templateUrl: 'views/content2.html' 
 
     } 
 
    } 
 
    }) 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    </head> 
 
    <body ng-app="mainApp"> 
 
    <div class="container"> 
 
    \t <div class="row"> 
 
    \t \t <div class="col-md-12 column text-center bg-primary"> 
 
      Title 
 
    \t \t </div> 
 
    \t </div> 
 
    \t <div class="row"> 
 
    \t \t <div class="col-md-3 column bg-danger"> 
 
      <div ui-view="menu"></div> 
 
    \t \t </div> 
 
    \t \t <div class="col-md-9 column bg-info"> 
 
     <div ui-view="content"> 
 

 
     </div> 
 
    \t \t </div> 
 
    \t </div> 
 
    </div> 
 
    </body> 
 
</html>

menu.html

<ul> 
 
    <li><a ui-sref="index.content1" ui-sref-active="active">menu1</a></li> 
 
    <li><a ui-sref="index.content2" ui-sref-active="active">menu2</a></li> 
 
</ul>

Aber wenn ich "menu1" oder "menu2" link in dann menu.html klicke, "content1" oder "content2" nicht geladen werden, wo liege ich falsch?

Quelle

2017-03-18 felix1982

Ändern Sie die untergeordnete Status-URL, um auf dem untergeordneten Routenabschnitt zu notieren. Die UI-Router-Engine kümmert sich um die URL-Erstellung basierend auf der Statushierarchie.

Und dann machen Sie Ihre content benannte Ansicht als relative machen von @ nach dem benannten Ansicht hinzufügen, da Sie geändert benannte Ansicht wollte, die das Teil index (Eltern) Zustand ist.

.state('index.content1', { 
    url: "/content1", 
    views: { 
    '[email protected]': { 
     templateUrl: 'views/content1.html' 
    } 
    } 
}).state('index.content2', { 
    url: '/content2', 
    views: { 
    '[email protected]': { 
     templateUrl: 'views/content2.html' 
    } 
    } 
})

Plunker Demo

Quelle

2017-03-18 07:32:55

i geändert, aber es funktioniert immer noch nicht, gibt es o andere Fehler? – felix1982

@ felix1982 Kasse meine Bearbeitung .. Ich hatte auch Demo-Plocker als auch enthalten. –

danke, es hat funktioniert – felix1982

Winkel-ui-Router Mehrere Ansichten

Antwort

Verwandte Themen