angular-ui replace'?' with '#' on redirect from facebook oauth angular-ui replace'?' with '#' on redirect from facebook oauth angularjs angularjs

angular-ui replace'?' with '#' on redirect from facebook oauth


You can add this resolve function to your state, which will replace a hash url with the query string url:

resolve: {    'urlFix': ['$location', function($location){        $location.url($location.url().replace("#","?"));     }]}
  • So a url of /fbauth#access_token=123456&code=abcde&expires_in=99999999 would be redirected automatically
  • Becoming /fbauth?access_token=123456&code=abcde&expires_in=99999999
  • $stateParams would be populated correctly.
  • The value would be {access_token: "123456", code: "abcde", expires_in: "99999999"}
  • $location.url() doesn't update if the location matches already, so the state won't redirect when there is no # present.

Full example code:

<!DOCTYPE html><html><head>    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>    <meta charset="utf-8">    <title>FBAUTH</title></head><body ng-app="app">    <base href="/">    <div ui-view></div>    <script>        angular.module('app', ['ui.router'])            .controller('publicCtrl', ['$scope','$stateParams', function($scope, $stateParams) {                // $stateParams should be correctly set (even for hash route)                console.log($stateParams);            }])            .config(['$locationProvider','$stateProvider', function($locationProvider, $stateProvider){                $stateProvider                    .state("fbauth",                    {                        url: '/fbauth?access_token&code&expires_in',                        templateUrl: 'fbauth.html',                        controller: 'publicCtrl',                        resolve: {                            'urlFix': ['$location', function($location){                                $location.url($location.url().replace("#","?"));                            }]                        }                    });                $locationProvider.html5Mode(true);            }]);    </script></body></html>


I would not prefer passing query parameters(using ? mark) in client side routing. Instead you can use route/state params as follows:

http://localhost/#/fbauth/access_token/:access_token/code/:code

and you can access these values using $stateParams. e.g. ($stateParams.access_token)