简体   繁体   中英

AngularJS: Use route for given URL when loading page first time

I develop SPA using AngularJS. My config looks like this:

app.config(["$routeProvider",
    function($routeProvider) {
        return $routeProvider
            .when("/", {
                redirectTo: "/clients"
            }).when("/clients", {
                templateUrl: "app/views/crm/clients/list.html"
            }).when("/client/:id?", {
                templateUrl: "app/views/crm/clients/edit.html"
            }).when("/404", {
                templateUrl: "app/views/pages/404.html"
            }).otherwise({
                redirectTo: "/404"
            });
    }
]);

I would like to let my users share URLs for clients: http://myapp.com/#/client/1 , http://myapp.com/#/client/2 etc. The idea is that user writes URL to location bar and gets to client page for a specific client.

When I tried to listen for $routeChangeStart event I found out that current parameter in event callback is empty when page is loaded for first time and next.$$route.originalPath is always / .

$rootScope.$on('$routeChangeStart', function(event, next, current) {
      console.log(current);                   // undefined
      console.log(next.$$route.originalPath); // /
      console.log(next.$$route.redirectTo);   // /clients
});

So how can I get the original URL sent to server to use route requested?

UPDATE

As it turned out, the problem was in my own redirect that was triggered when user session token from cookies was extracted. It redirected to / every user who entered application with session cookie.

You can use

document.URL  

or

$window.location

ie:

 $rootScope.$on('$routeChangeStart', function(event, next, current) {
     console.log(document.URL);   
     console.log($window.location)       

});

Please see demo here
http://plnkr.co/edit/oaW40vWewxdZYxRkCW8c?p=preview

Finally I came up with solution which looks like dirty hack yet works.

var app = angular.module('app', [ ... ]);

app.run(function (...) {

    ...

    var firstTimeLocationChanged = true;
    $rootScope.$on('$locationChangeStart', function(event, next, current) {
        var savedPath = current.split('#').slice(-1);
        if (firstTimeLocationChanged && ['/', '/login'].indexOf(savedPath) < 0) {
            firstTimeLocationChanged = false;
            setTimeout(function() {
                console.log('redirect to: ' + savedPath);
                $location.path(savedPath);
            }, 3000);
        }
    });

    ...

});

UPDATE

As it turned out, the problem was in my own redirect that was triggered when user session token from cookies was extracted. It redirected to / every user who entered application with session cookie. So the solution above is not needed at all.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM