Update URL with value returned from factory resolver?

Question

I am using Angular's UI Router and have a resolver setup for a particular view and controller which looks something like this as you can see below. How would I go about updating the URL with a value that is returned from my urlHasherFactory factory? I would like the value that this factory generates to be populated in my URL bar such as: http://example.com/user/57. In this case 57 is the dynamic user value I would like to populate and will vary depending on what's returned by the factory.

var MYAPP = angular.module('myApp', ['ui.router'])

.config(['$stateProvider', '$urlRouterProvider', 

  function($stateProvider, $urlRouterProvider) {

    // For any unmatched url redirect to /
    $urlRouterProvider.otherwise("/");

    // States
    $stateProvider

      // Start
      .state('start', {
        url: "/",
        templateUrl: "views/_start.html",
        controller: "StartCtrl"
      })

      // Chat
      .state('chat', {
        url: "/user/:userId",
        templateUrl: "views/_user.html",
        controller: "UserCtrl",
        resolve: {
          user: function(urlHasherFactory) {
            return urlHasherFactory.getUrlHash();
          }
        }
      });

  }

])

.factory('urlHasherFactory', ['$http', function ($http) {
    var hash = {
      getUrlHash: function() {
        var promise = $http({ method: 'GET', url: '/userid' })
          .success(function(data, status, headers, config) {
            return data;
          }
        );
        return promise;
      }
    };
    return hash; 
}])

.controller('StartCtrl', ['$scope', function($scope) {

  // How do I update URL structure in here?

}])

.controller('UserCtrl', ['$scope', 'user', function($scope, user) {

  // How do I update URL structure in here with user's id
  // so it looks something like this: http://example.com/user/57

  // This is I how I access urlHasherFactory
  var urlHash = user.data.userid;

}]);

Take a look http://stackoverflow.com/questions/11534710/angularjs-how-to-use-routeparams-in-generating-the-templateurl — MichaelLo, May 19 '14 at 16:26

score 0 · Answer 1 · answered May 20 '14 at 06:17

One way, if I understand your scenario well, could be 1) to enter chat state without param userId 2) check the userId param and if missing, redirect to chat/xxx based on the passed user instance. The plunker (simplified, without any checks to avoid cyrcle calls) and its main parts:

the 'start' state contains url to the chat state: "ui-sref="chat()" without a param

// States
$stateProvider

  // Start 
  .state('start', {
    url: "/",
    template: '<div>start <a ui-sref="chat()">chat</a> </div>',
  })

unchanged chat state (adjusted for a plunker only)

  // Chat
  .state('chat', {
    url: "/user/:userId",
    template: "<div>chat for user: {{userId}}</div>",
    controller: "UserCtrl",
    resolve: {
      user: function(urlHasherFactory) {
        return urlHasherFactory.getUrlHash();
      }
    }
  })

the factory unchanged (just not async)

.factory('urlHasherFactory', ['$http', function ($http) {
    var hash = {
      getUrlHash: function() {
        return { data : { userId : 57 } };
      },
    };
    return hash; 
}])

the chat/user controller redirecting in case, that userId is missing

.controller('UserCtrl', 
  [       '$scope','$state','$stateParams','user',
  function($scope , $state , $stateParams , user) {

    if($stateParams.userId === null){

      var urlHash = user.data.userId;
      $state.go("chat", {userId : urlHash})
    }
    $scope.userId = $stateParams.userId;
}])

NOTE: we should introduce some checks to avoid cyrcles, e.g. that user.data.userId really will provide us with some userId

Update URL with value returned from factory resolver?

1 Answers1