CODEWITHSUNDEEP
angularjsangular-ui-router
Falci
Falci

Reputation: 1873

angular ui-router go to URL

How to use $state.go() if I have just the URL ?

Or can I get a state based on URL? (and than use $state.go(state))

I'm asking because I had to intercept the $urlRouterProvider.otherwise() to wait for an other plugin loads some external modules.. and now I need to continue and call the URL that call otherwise()

Upvotes: 18

Views: 29832

Answers (4)

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28445

In place of $state.go(), you can use $location service as well.

i.e.

$location.path(url)

Please take care of not using # in URL. You can also use window.location.href

Upvotes: 11

StevieP
StevieP

Reputation: 401

I had a similar problem, and $location wasn't helping, so I wrote a function to get the state from the url.

NB: I am using nested states based on ui-router.stateHelper, so I traverse my nested states object, testing for url matches. It would be slightly different when using dot notation to define nested states - and even easier if you don't use nested states at all!

function goPath (path) {
    var target;

    var arr = path.match(/\/\w+/g);
    var i = 0;

    var testState = function (state, i) {
        if (state.url === arr[i]) {
            target = state;
            if (state.children && state.children.length && arr.length > i+1) {
                i++;
                state.children.forEach( function (childState) {
                    testState(childState, i);
                });
            } 
        }
    };

    myStatesObj.forEach( function (state) {
        testState(state, i);
    });

    $state.go(target.name);
};

Upvotes: 2

danday74
danday74

Reputation: 56936

i'm adding a full answer to this due to the high number of views.

NOTE: location.search() is only used where you need to handle a URL with a query string in it. otherwise use location.path() only.

your ui.router login state should look something like ...

.state('login', {
    url: '/login',
    templateUrl: 'routes/login/login.html',
    controller: 'LoginController',
    controllerAs: 'loginCtrl',
    authenticate: false,
    params: {
        fwdPath: undefined, // Location to forward to on login success
        fwdQueryStringObject: undefined // Query string object to use on login success - retrieved from $location.search()
    }
})

your 401 (unauthorised) interceptor should look something like ...

state.go('login', {fwdPath: location.path(), fwdQueryStringObject: location.search()});

your login controllers login function should call your login service's login function. the code INSIDE the controllers login function should look something like ...

loginService.login(self.username, self.password).then(function (response) {
    // local vars prevent unit test failure
    var fwdPath = state.params.fwdPath;
    var fwdQueryStringObject = state.params.fwdQueryStringObject;

    if (response.status === 200) {
        timeout(function () {
            if (fwdPath != null) {
                location.path(fwdPath).search(fwdQueryStringObject);
                location.replace();
            } else {
                state.go('home');
            }
        }, 400);
    } else {
        self.error = true;
    }
    self.pending = false;
  }
};

and finally your unit tests ...

state.params.fwdPath = '/login/list';
state.params.fwdQueryStringObject = {q: 5};
spyOn(location, 'path').and.callThrough();
spyOn(location, 'search').and.callThrough();
...
expect(location.path).toHaveBeenCalledWith('/login/list');
expect(location.search).toHaveBeenCalledWith({q: 5});

Upvotes: 0

Louie Almeda
Louie Almeda

Reputation: 5612

I was on a similar situation, what I did is changed the location to a different path and reset it to the current after a timeout like this

var path = $location.path();
$location.path("/");

$timeout(function(){
    $location.path(path).replace(); //use .replace() so the empty path won't go to the history
},0);

Upvotes: 1

Related Questions