ashhem ashhem - 1 year ago 126
Javascript Question

How to hide selective data in URLs in AngularJS

I am writing code for a SPA in AngularJs. I am using

instead of
in this for routing and controlling navigation. In my application there is a situation where I am passing the userId through the url for editing information of that specific user.

My routing for the specific case looks like:

.state('user-edit', {
url: '/users/:uId/:operation',
templateUrl: 'views/user.html',
controller: 'UserCtrl'

My related markup is:

<td><a ng-href='#/users/{{}}/edit'><img src="images/edit-icon20.png"></a></td>

A part of my Controller:

if ($stateParams.operation == 'edit'){
*My Logic*

My URL now appears like:



In this or such URLs, I don't want the user to see my userID. I either want it to be shown as something else or I want it completely hidden. I have gone though the question AngularJS: How to clear query parameters in the URL? here on Stackoverflow but that does not help me as my URL is in a different format.


I need to pass that userID to a REST call. So how do I hide it or scramble it?

Answer Source

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

app.controller('main',['$scope', 'dataService', function($scope, dataService) {
  $scope.numbers = [];
  //is getNumbers a function?
  dataService.getNumbers(0, 20).then(function(numbers){
    $scope.numbers = numbers;

app.factory('dataService', ['$q', function($q) {
  console.log('construct service');
  var dataService = this;
  // factory function body that constructs shinyNewServiceInstance
  var numbers = [];
  dataService.getNumbers = function(i, m){ 
    var s = i;
    var deferred = $q.defer();
    console.log('Data retrieval fired: ' + i + ' to ' + m);
    while(i < s + m){
          console.log('Data retrieval complete');
    console.log('Promise returned');
    return deferred.promise; 
  return dataService;

    <script src=""></script>

  <body ng-app="plunker" ng-controller="main">
          <li ng-repeat="n in numbers">Number: {{n}}</li>

Create service that will maintain the currently selected user that you're editing.

var app = angular.module('{you user module name}'); 

app.factory('userService', ['$q', function($q) {
  console.log('construct service');
  var userService= this;
  // factory function body that constructs shinyNewServiceInstance
  userService.selectedUser = null; //will set this when editing
  userService.setUser = function(userId){
     //let's assume that you can get the user based on id 
     selectedUser = getUser(userId); 
  //Other properties and functions that make up your user service

  return userService;


userService.setUser($stateParams.userId); //we've set the user 
$location.url('/edituser'); //or however you want to change the current url
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download