Hide current state in URL using AngularJS $ stateProvider

Question

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

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

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

However, when you enter the application (what happens on the page "index.html"), the display URL is "myWebsite / index.html # / tab / index", and the index is 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 cannot use the back and forward buttons of their browsers to navigate, because the location is set to false, so if there is a solution that also solves this problem, I'm interested.

Here is the status 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 am not very familiar with single-page applications, and I do not know if what I am asking is possible with this structure. If this is not the case, I would be very happy to know what is the best alternative.

Answer 1

Change the status of tabs.index and the fallback URL as follows:

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

This will now load your application with the index page without the url after #. And with the help of $ state.go or ui-sref in html you can move between states. Even you can have all url: "/" states, it will work fine if you used unique state names and their parent-child relationships (this way you don't even need to use location: false in $state.go ). Example

But this will not solve the problem with the back button. Since the back / forard button is a built-in function of browsers, and it is based on a unique URL, but since you use the same URL for all your states, the browser will not know that different status and return buttons will not work properly . There are also other advantages of using unique, different URLs for all your states, as users can add them. But if you are creating a mobile application (using ionic), why does it bother you if the URL is displayed or not, because ultimately it will not be displayed in the application interface, and in the ionic URL it is only part of the routing logic. Thus, having unique URLs for your states will be useful for you and the user to use the built-in feedback button.

PS To remove # from url in angular app, you should use html5mode:

 $locationProvider.html5Mode(true); 

Answer 2

when you declare the same name for .state and url, which is easy to understand

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

and check the file path