Ukryj nazwę bieżącego stanu w adresie URL za pomocą AngularJS $ stateProvider

Question

Pracuję z AngularJS $ stateProvider. Aby poruszać się w mojej aplikacji, użytkownicy przejść od stanu, przy użyciu tej funkcji:

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

ta pozwala na zmianę stanu i załadować nowy widok bez zmiany URL (lokalizacja: false) załatwia sprawę.

Jednak podczas wchodzenia do aplikacji (co dzieje się na stronie "index.html") wyświetlany adres URL to "myWebsite/index.html #/tab/index", przy czym indeks jest pierwszym stanem aplikacji. Moje pytanie brzmi: jak mogę to zmienić, aby wyświetlać tylko "myWebsite/index.html"?

UWAGA: w tej chwili użytkownicy nie mogą korzystać z przycisków przewijania w swoich przeglądarkach, ponieważ lokalizacja jest ustawiona na wartość false, więc jeśli istnieje rozwiązanie, które rozwiązałoby ten problem, jestem zainteresowany .

Oto deklaracja stan:

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 }); 
    }; 
    }) 

nie jestem bardzo obeznany z aplikacjami pojedynczej strony, a ja nie wiem, czy to, co pytam jest nawet możliwe z tej struktury. Jeśli nie, byłbym bardzo szczęśliwy wiedząc, jaka jest najlepsza alternatywa.

Answer 1

Zmień tabs.index stan & awaryjnej URL następująco:

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

$urlRouterProvider.otherwise("/"); 

Teraz będzie to załadować aplikację ze strony indeksu bez url po #. I na przykład przy użyciu $ state.go lub ui-sref na html możesz nawigować pomiędzy stanami. Nawet ty możesz mieć wszystkie stany url: "/" będzie działać dobrze, o ile używałeś unikalnych nazw stanu & ich relacji rodzic-dziecko (w ten sposób nie musisz nawet używać location: false w $state.go). Example

Ale to nie rozwiąże problemu z przyciskiem Wstecz. Ponieważ przycisk Wstecz/Odwróć to natywna funkcja przeglądarki & opiera się zasadniczo na unikalnym adresie URL, ale ponieważ używasz tego samego adresu URL do wszystkich swoich stanów przeglądarka nie będzie wiedzieć, że jest inny stan, przycisk powrotu nie działa zgodnie z oczekiwaniami. Ponadto istnieją inne zalety korzystania z unikalnych adresów URL dla wszystkich stanów, ponieważ użytkownicy mogą je dodawać do zakładek. Ale jeśli budujesz aplikację mobilną (używając jonów), dlaczego zależy ci na tym, czy URL jest wyświetlany, czy nie, ponieważ ostatecznie nie będzie on wyświetlany w interfejsie aplikacji, w jonowym url jest tylko częścią logiki routingu. Zatem posiadanie unikalnych adresów URL dla twoich stanów będzie dla ciebie korzystne dla użytkownika korzystającego z natywnego przycisku cofania.

P.S. Aby usunąć # z url w kątowym aplikacji masz używać html5mode:

$locationProvider.html5Mode(true); 

Answer 2

kiedy zadeklarować taką samą nazwę i adres URL do .state łatwy do zrozumienia

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

i sprawdzić ścieżkę