2016-04-13 5 views
0

Arbeits Ich habe 3 UI Ansichten auf einer Seite wie folgt codiert:Angular UI Weg/Staat Design und die Implementierung nicht korrekt

<div id="wrapper"> 
 

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

 
    <div id="page-wrapper" class="gray-bg"> 
 
    \t <div ui-view="topbar"></div> 
 
    <div class="wrapper wrapper-content animated fadeInRight"> 
 
\t \t <div ui-view></div> 
 
    </div> 
 
    \t <div ui-view="footer"></div> 
 
</div>

Ein Zustand/Weg für einen Teil der App sieht konfiguriert wie folgt aus:

angular.module('core').config(['$stateProvider', 
 
    function ($stateProvider) { 
 
    $stateProvider 
 
     .state('core', { 
 
     abstract: true, 
 
     url: '/core', 
 
     views: { 
 
      '[email protected]': {templateUrl:'modules/core/client/views/partials/nav.view.html'}, 
 
      '[email protected]': {templateUrl:'modules/core/client/views/partials/topbar.view.html'}, 
 
      '[email protected]': {templateUrl:'modules/core/client/views/partials/footer.view.html'} 
 
     }, 
 
     data: { 
 
      roles: ['super', 'admin', 'narc'] 
 
     } 
 
     }) 
 
     .state('core.settings', { 
 
     url: '/settings', 
 
     views: { 
 
      '': {templateUrl:'modules/narc/client/views/content/canvas.list.view.html'} 
 
     }, 
 
     data: { 
 
      roles: ['super', 'admin', 'narc'] 
 
     } 
 
     }); 
 
    } 
 
]);

Ich habe 2 Probleme, denen ich gegenüberstehe.

  1. Wenn der Link in der Navigation zu ui-Sref = "core.settings" und der Link angeklickt gesetzt ist, sehe ich canvas.list.view.html in der Last-Ressourcen, aber es wird nicht geladen es in die primäre "unbenannte" Ansicht, versuchte ich auch dies mit einem benannten UI-View, und das gleiche Ergebnis.

  2. Wenn der gleiche Link geklickt wird, ändert es die window.location zum die URL in der Config angegeben, aber wenn ich die Seite aktualisieren, es 404s , weil es einen Zustand anstelle eines tatsächlichen Standort verweist. .. wenn ich manuell ein # setze! vor der URL, zieht er eine leere Seite (mit nav, topbar und Fußzeile geladen, aber keine unbenannte Ansicht geladen.

Danke für Ihre Hilfe !!

Antwort

0

I # heraus 2 oben, durch

ändernden $locationProvider.html5Mode(true).hashPrefix('!')

zu

$locationProvider.html5Mode(false).hashPrefix('!');

Es erlaubt die Urls tatsächlich kopiert/eingefügt/geteilt werden und immer noch funktionieren, solange die Authentifizierung an seinem Platz ist ...

I 1 und # herausgefunden, der abstrakte „Eltern“ Zustand benötigte eine Vorlage:

template: '<ui-view/>'

Dies machte es alle Arbeit. Ja!