Hide current state name in URL with AngularJS $stateProvider

Question

I'm working with AngularJS $stateProvider. To navigate in my application, users go from state to state, using this function:

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

This allows to change state and load the new view without changing the URL (location: false) does the trick.

However, when entering the application (which happens in the page "index.html"), the displayed URL is "myWebsite/index.html#/tab/index", the index being the first state of the application. My question is: how can I change it to display only "myWebsite/index.html"?

NOTE: at the moment, users can't use the back and forth buttons of their browsers to navigate since the location is set to false, so if a solution exists that would also solve this problem, I'm interested.

Here is the state declaration :

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

I'm not very familiar with single-page applications, and I don't know if what I ask is even possible with this structure. If it's not, I would be very happy to know what is the best alternative.

Shantanu · Accepted Answer · 2017-09-20 11:23:35Z

1

Change your tabs.index state & fallback url as follows:

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

$urlRouterProvider.otherwise("/");

Now this will load your app with index page without any url after #. And aterwards with using $state.go or ui-sref on html you can navigate between states. Even you can have all the states url: "/" it'll work fine as long as you've used unique state names & their parent-child relationship (through this way you don't even need to use location: false in $state.go). Example

But it will not solve back button issue. Because back/forard button is browsers native feature & it fundamentally based on unique url, but as you're using same url for all your states browser will not know it's different state & back button will not work as expected. Also there're other beneits of using unique diferent urls for all your states as users can bookmark them. But if you're building mobile app (using ionic) why do you care if url is shown or not, because ultimately it'll not be shown in app's interface, in ionic url is just part of routing logic. So having unique urls for your states will be beneficial to you & user for using native mobile back button.

P.S. To remove # from url in angular app you've to use html5mode:

$locationProvider.html5Mode(true);

edited Sep 20, 2017 at 11:23

answered Sep 20, 2017 at 11:15

Shantanu

3,5332 gold badges21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Reyedy Over a year ago

To answer your question: I don't care that much about the back/forward buttons and I totally agree with your point, saying that a unique URL is beneficial to me. The thing is, my application is supposed to work both on mobile devices and desktop browsers. That's why I decided to use Ionic in the first place, so I can develop a cross-platform application which would work everywhere. That is also why I care about the URL.

score 0 · Accepted Answer · 2017-09-20 12:25:31Z

0

when you declare same name to .state and url easy to understand

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

and check your file path

edited Sep 20, 2017 at 12:25

answered Sep 20, 2017 at 12:20

user7383259

Collectives™ on Stack Overflow

Hide current state name in URL with AngularJS $stateProvider

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related