3

My angular application has multiple pages which users can visit and I would like to hide all other urls and only show users the base url. So imagine my base url is: www.example.com and I have other pages like About, Contact Us etc. Currently, when the user clicks on About, the url changes to www.example.com/about. Is it possible for angular not to add the "/about"? Is this possible using angular js? Also, I have been searching for solutions and have experimented with ui-router.js, is it also possible with this module?

k.ken
  • 4,973
  • 5
  • 23
  • 21
  • You could just show/hide parts of your page when the user clicks, e.g. using `ng-hide` and `ng-show`. Then again, I am wondering why the user shouldn't know where he/she actually is on your page. Plus, the user won't be able to bookmark and visit the specific site (e.g. "About") later without doing some extra clicks. – Horen Jan 03 '15 at 18:43
  • I used about and contact as examples. I don't want the user to be able to bookmark the link when they navigate hence why I want to remove it from the url. – k.ken Jan 03 '15 at 18:46
  • Yes this is possible using `$routeProvider`. You can define what url goes to what page. So for example `/about` goes to `about.html` or even `randomPage.html`, but it still shows `/about` in the url. – simeg Jan 03 '15 at 18:48
  • @simpe, I don't want it to show /about in the url. I already have the $routeProvider set up for all pages. – k.ken Jan 03 '15 at 18:50
  • Sorry, I misunderstood your question. I'm not sure how you'd do what you're asking with separate pages. Perhaps if you were include them using `ng-include` or something like that, then the url would stay the same. – simeg Jan 03 '15 at 18:54

1 Answers1

11

If you are using ui-router, then you can define states without specifying urls like 

myApp.config(function($stateProvider, $urlRouterProvider) {
    //
    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/state1");
    //
    // Now set up the states
    $stateProvider
        .state('state1', {
            url: "/state1",
            templateUrl: "state1.html",
            controller: 'Controller3'
        })
        .state('state2', {
            templateUrl: "state2.html",
            controller: 'Controller2'
        })
        .state('state3', {
            templateUrl: "state3.html",
            controller: 'Controller3'
        })
});

So by default the url will be /state1. And you can implement navigation by using ui-sref directive in your template like ui-sref="state2" or using $state service in your controller like $state.go('state2').

Shripal Soni
  • 2,448
  • 17
  • 15
  • Only problem is that ui-router won't call `window.history.pushState(...` when the state doesn't have url. So the back button on the navigator or the back button on android won't work as expected. – Ian Jan 15 '18 at 13:54