How do I parse URL params after a hash with Angularjs?

Question

I'm trying to parse for the access_token from Foursquare where the URL is like this:

https://mywebsite.com/4sqredirect/#access_token=1234567890XXXXX

I've tried $routeParams and $location and get nothing returned. Only after I tried $route, I did get an object back with the following attribute in it:

current:  { 
    params:  {  } 
    pathParams:  {  } 
    loadedTemplateUrl: partials/4sqredirect
    locals:  {  } 
    scope:  { 
        this:  { 
            $ref: $["current"]["scope"]
        } 
        route:  { 
            $ref: $
        } 
        location:  {  } 
        token: null
    }
}

Does this mean there's no way to get it using native AngularJS functions cause of the hash?

UPDATE:

my controller looks like as follows:

angular.module('myApp')
    .controller('4sqredirectCtrl', function ($scope, $route, $location, $routeParams) {
        $scope.route = $route;
        $scope.location = $location;
        $scope.token = $routeParams.access_token;
    });

my main js looks like as follows:

angular.module('myApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute'
])
.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
    .when('/', {
        templateUrl: 'partials/main',
        controller: 'MainCtrl'
    })
    .when('/4sqredirect/', {
        templateUrl: 'partials/4sqredirect',
        controller: '4sqredirectCtrl'
    })
    .otherwise({
        redirectTo: '/'
    });
});

score 40 · Accepted Answer · edited Dec 13 '16 at 15:02

40

From angular location service $location.hash() method return #after-hash

so if your url is look like

https://mywebsite.com/4sqredirect/#access_token=1234567890XXXXX

then

$location.hash() return access_token=1234567890XXXXX

you need to split it split('=')[1]

see this plunker when you click 4Square then $location.url() return

/4sqredirect/#access_token=123456
$location.hash().split('=')[1]

return 123456

edited Dec 13 '16 at 15:02

Ajay Barot

1,681
1
21
37

answered Jan 02 '14 at 09:20

Tasnim Reza

6,058
3
25
30

This worked great. What was the major part of my problem is a stupid error on my part. I was trying to use $location or $location.hash by themselves and not calling them.. eg. $location.hash(). Yet, while $location.hash() worked, $location.search() still returned nothing... Nevertheless, my question seemed answered by this. – padawanlvn Jan 03 '14 at 01:56
1

Calling `$location.hash()` returns everything after the hash, but not the hash itself. In your provided example, it would return `after-hash`, not `#after-hash`. – Walter Roman Sep 25 '14 at 16:33
$location wasn't defined for me, but window.location.hash.split did the trick! – CountMurphy Jan 24 '19 at 16:59
This works better than split, when available and needed... `var searchParams = new URLSearchParams($location.hash())`. Then you can use, `searchParams.get('access_token')`. Ref: [https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams). – Tim Harker Jul 13 '20 at 06:20

score 9 · Answer 2 · answered Jan 02 '14 at 10:18

9

Use $location.search()

//e.g. url https://www.example.com/#!?name=123
var s = $location.search();
// {name: '123'}

http://docs.angularjs.org/api/ng.$location

Search:

Returns search part (as object) of current url when called without any parameter.

answered Jan 02 '14 at 10:18

Umur Kontacı

35,403
8
73
96

4

This didn't work. $location.search returned nothing. perhaps since the URL doesn't have a '?', it doesn't parse it? – padawanlvn Jan 03 '14 at 01:51
Of course, if it doesn't have it then it's not a search. Add '?' – Umur Kontacı Jan 03 '14 at 10:39
2

Unfortunately I can't add a ? since that part is predefined and returned to me. – padawanlvn Jan 04 '14 at 07:31

score 0 · Answer 3 · answered Jan 02 '14 at 07:37

0

I'm not aware of a "native angular" way to do it, but you do have access to the hash via location.hash as a string type. it's probably not ideal, but it's workable.

answered Jan 02 '14 at 07:37

Stuart Nelson

4,202
2
23
26

Location is also null so I don't even have a location.hash. – padawanlvn Jan 02 '14 at 07:41
I'm not 100% sure, but `location` should always reflect the browser's current location. What are you attempting to do with the access token? and, is it being returned after the hash by 4sq or by you? I would have assumed it came as a query string parameter. – Stuart Nelson Jan 02 '14 at 07:53
It's returned by 4sq. https://developer.foursquare.com/overview/auth "If a user accepts, they will be redirected back to http://YOUR_REGISTERED_REDIRECT_URI/#access_token=ACCESS_TOKEN" – padawanlvn Jan 02 '14 at 08:00

score 0 · Answer 4 · answered Jan 02 '14 at 08:35

There is in fact no direct support from Angular JS to do this. I wouldn't use ngRoute, because it already might expect the # at a different place. A simple solution to your problem is to use the location.hash and the substring() function:

<!DOCTYPE html>
<html ng-app="app">

<head>
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script>
angular.module('app', [])
.controller('AppCtrl', ['$scope', '$window', function($scope, $window) {
  $scope.accessToken = $window.location.hash.substring(14);
}]);
</script>
</head>

<body ng-controller="AppCtrl">
<h1>Access Token</h1>
<p>{{accessToken}}</p>
</body>

</html>

You and Reza had somewhat the same idea that worked. I liked Reza's more as it used the $location service rather than then the $window service. — padawanlvn, Jan 03 '14 at 01:53

How do I parse URL params after a hash with Angularjs?

4 Answers4

Search:

Linked