Question

我正在使用AngularJS $ stateProvider。要在我的应用程序中导航，用户可以使用此功能从一个州进入州：

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

这允许更改状态并加载新视图而不更改URL（位置：false）可以解决问题。

但是，当进入应用程序时（在页面＆＃34; index.html＆＃34;中发生），显示的URL是＆＃34; myWebsite / index.html＃/ tab / index＆＃34;， index是应用程序的第一个状态。我的问题是：如何将其更改为仅显示＆＃34; myWebsite / index.html＆＃34; ？

注意：目前，用户无法使用浏览器的来回按钮进行导航，因为该位置设置为false，因此如果存在解决此问题的解决方案，我和＃39;感兴趣。

这是州声明：

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

我对单页应用程序不是很熟悉，而且我也不知道这个结构是否可能。如果不是，我会很高兴知道什么是最好的选择。

Answer 1

更改tabs.index状态＆amp;后备网址如下：

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

$urlRouterProvider.otherwise("/");

现在这将在＃之后加载带有索引页面的应用程序而不带任何URL。并且在html上使用$ state.go或ui-sref可以在状态之间导航。即使你可以拥有所有状态url: "/"，只要你使用了独特的州名和它，它就能正常工作。他们的亲子关系（通过这种方式你甚至不需要在location: false中使用$state.go）。 Example

但它无法解决后退按钮问题。因为back / forard按钮是浏览器的原生功能＆amp;它基本上是基于唯一的网址，但是当你为所有状态使用相同的网址时，浏览器不会知道它的状态和状态不同。后退按钮将无法按预期工作。此外，还有其他好处，可以为您的所有州使用独特的不同网址，因为用户可以为它们添加书签。但是，如果您正在构建移动应用程序（使用离子），为什么要关心是否显示网址，因为最终它不会显示在应用程序的界面中，离子网址只是路由逻辑的一部分。因此，为您的州提供独特的网址将对您有益。用户使用本机移动后退按钮。

P.S。要在角度应用中从网址中删除＃，您必须使用html5mode：

$locationProvider.html5Mode(true);

Answer 2

当你为.state和url声明同名时容易理解

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

并检查您的文件路径

使用AngularJS $ stateProvider隐藏URL中的当前状态名称

2 个答案: