Excluding path in url using AngularJS

Question

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?

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
– Horen, Commented Jan 3, 2015 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
– k.ken, Commented Jan 3, 2015 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
– simeg, Commented Jan 3, 2015 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
– k.ken, Commented Jan 3, 2015 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
– simeg, Commented Jan 3, 2015 at 18:54

Shripal Soni · Accepted Answer · 2015-01-03 19:45:16Z

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').

edited Jan 3, 2015 at 19:45

answered Jan 3, 2015 at 19:39

Shripal Soni

2,44819 silver badges15 bronze badges

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

1 Comment

Ian Over a year ago

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.

Collectives™ on Stack Overflow

Excluding path in url using AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related