Verstecke den aktuellen Statusnamen in der URL mit AngularJS $ stateProvider

Question

Ich arbeite mit AngularJS $ stateProvider. Um in meiner Anwendung zu navigieren, gehen Benutzer von Staat zu Staat, mit dieser Funktion:

$rootScope.gotoState = function(stateName) { 
    $state.go(stateName, {}, { location: false }); 
}; 

Dieser Zustand ändern können und die neue Ansicht zu laden, ohne das Ändern der URL (Standort: false) funktioniert der Trick.

Wenn Sie jedoch die Anwendung eingeben (was auf der Seite "index.html" geschieht), lautet die angezeigte URL "myWebsite/index.html #/tab/index", wobei der Index der erste Status der Anwendung ist. Meine Frage ist: Wie kann ich es ändern, um nur "myWebsite/index.html" anzuzeigen?

HINWEIS: im Moment können Benutzer nicht die Hin-und Zurück-Schaltflächen ihres Browsers verwenden, um zu navigieren, da der Standort auf false festgelegt ist. Wenn eine Lösung vorhanden ist, die dieses Problem ebenfalls lösen würde, bin ich interessiert . Hier

ist der Zustand Erklärung:

angular.module('ionicApp', ['ionic', 'ngCookies']) 
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) { 

    $ionicConfigProvider.tabs.position('top'); // values: bottom, top 

    $stateProvider 
     .state('tabs', { 
     url: "/tab", 
     abstract: true, 
     templateUrl: "templates/tabs.html" 
     }) 
     .state('tabs.index', { 
     url: "/index", 
     cache:false, 
     views: { 
      'index-tab': { 
      templateUrl: "home.html" 
      } 
     } 
     }) 
     .state('tabs.profile', { 
     url: "/profile", 
     cache:false, 
     views: { 
      'profile-tab': { 
      templateUrl: "profile.html" 
      } 
     } 
     }) 

     $urlRouterProvider.otherwise("/tab/index"); 
    }) 

    .run(function($rootScope, $state, $location) { 
    $rootScope.$state = $state; 
    $rootScope.$location = $location; 
    $rootScope.gotoState = function(stateName) { 
     $state.go(stateName, {}, { location: false }); 
    }; 
    }) 

Ich bin nicht sehr vertraut mit Single-Page-Anwendungen, und ich weiß nicht, ob das, was ich frage sogar möglich, mit dieser Struktur ist. Wenn nicht, wäre ich sehr glücklich zu wissen, was die beste Alternative ist.

Answer 1

Ihre tabs.index Zustand & Ausweich-URL wie folgt ändern:

.state('tabs.index', { 
     url: "/", 
     cache:false, 
     views: { 
     'index-tab': { 
      templateUrl: "home.html" 
     } 
    } 
    }) 

$urlRouterProvider.otherwise("/"); 

Jetzt wird dies Ihre App mit Index-Seite ohne URL nach # laden. Und mit Hilfe von $ state.go oder ui-sref auf HTML können Sie zwischen den Zuständen navigieren. Selbst Sie können alle Zustände haben url: "/" es funktioniert gut, solange Sie eindeutige Statusnamen & ihre Eltern-Kind-Beziehung verwendet haben (auf diese Weise müssen Sie nicht einmal location: false in $state.go verwenden). Example

Aber es löst nicht zurück Knopfproblem. Da Back/Forard-Taste Browser native Funktion ist & es basiert grundsätzlich auf eindeutigen URL, aber wie Sie die gleiche URL für alle Ihre Staaten verwenden Browser wird nicht wissen, es ist anders Zustand & zurück Schaltfläche wird nicht funktionieren wie erwartet. Auch gibt es andere Vorteile der Verwendung von verschiedenen URLs für alle Ihre Staaten, wie Benutzer sie Lesezeichen setzen können. Aber wenn Sie eine mobile App erstellen (mit ionic), interessiert es Sie, ob die URL angezeigt wird oder nicht, weil sie letztendlich nicht in der Benutzeroberfläche der App angezeigt wird. Die ionische URL ist nur ein Teil der Routing-Logik. So dass Sie einzigartige URLs für Ihre Staaten haben, wird Ihnen & Benutzer für die Verwendung von nativen mobilen Zurück-Taste nützlich sein.

P.S. Um # von URL in Winkel App zu entfernen haben Sie html5mode zu verwenden:

$locationProvider.html5Mode(true); 

Answer 2

, wenn Sie denselben Namen erklären .state und URL einfach

.state('tabs', { 
    url: "/tabs", 
    abstract: true, 
    templateUrl: "templates/tabs.html" 
    }) 

und überprüfen Sie die Dateipfad

zu verstehen