Adding id in urls in angular js

Question

I am creating an app on angular in which I need every user has its separate page.

 localhost/{username}

below are my routing param,

app.config(function($routeProvider) {
$routeProvider

  .when('/', {
    templateUrl : '../../views/index_old.html',


  })

  .when('/email/signup', {
    templateUrl : '../../views/emailsignup.html',
    controller  : 'myCont'

  })

  .when('/email/code/', {
    templateUrl : '../../views/emailcode.html',
    controller  : 'codeCheck'

  })

  .when('/user/basic/', {
    templateUrl : '../../views/basicInfo.html',
    controller  : 'userbasicInfo'

  })

  .when('/user/location/', {
     templateUrl : '../../views/userLocation.html',
     controller  : 'userLocation'

   })

});      

I am not able to pass username in the urls. Is there any way to do that.

Answer 1

you can create routes something like:

 app.config(function($routeProvider) {
  $routeProvider

  .when('/:username', {
   templateUrl : '../../views/index_old.html'

  }).when('/userprofile/:profileID', {
   templateUrl : '../../views/index_old.html'

  })
})

Answer 2

You should use $routeProvider somthing like this:

.when('aboutMe/:userId', {          
        templateUrl: "app/aboutMe/aboutMe.html",
        controller: "exerciseEditCtrl",
        resolve: 
            selectedUser:['UserResourceFactory','$routeParams',function(exerciseResourceFactory, $stateParams){
                return UserResourceFactory.get({id: $routeParams.userId} );
            }]
        }
    });

This route will contain userId as parameter in the Url. So I used resolve to get information of the user using service called UserResourceFactory this will ensure to get user information before initiating the controller. In your controller you will have a selcetedUser as a parametar like this:

app.controller('AboutMeCtrl, ['$scope', 'selectedUser',function($scope, selectctedUser){//your controller to user selectedUserData } ]);

If something not clear please let me know. Cheers.

Answer 3

you can add route params in the config file as below

app.config(function($routeProvider) {
$routeProvider

  .when('/', {
    templateUrl : '../../views/index_old.html',
  })
.when('/email/signup', {
    templateUrl : '../../views/emailsignup.html',
    controller  : 'myCont'
})
.when('/email/code/', {
    templateUrl : '../../views/emailcode.html',
    controller  : 'codeCheck'
})
.when('/user/basic/userId', {
    templateUrl : '../../views/basicInfo.html',
    controller  : 'userbasicInfo'
    params:{
        userId:null
    }
  })
  .when('/user/location/', {
     templateUrl : '../../views/userLocation.html',
     controller  : 'userLocation'
   })
});   

Assuming that this controller codeCheck corresponds to the login page

angular.module('').controller('codeCheck',function($scope,$location,appVariables){
        //your code for the controller

        $scope.userId= appVariables.user;

        login=function(){
        $location.path('/user/basic/'+ userId);
        }

});

angular.module('yourModule').factory('appVariables',function(){
    //Your application variables
    var userId=0;
    return{
    userId:userId,
}
});

Handling the user object in the userbasicInfo Controller

angular.module('').controller('userbasicInfo',function($scope,$http,appVariables){
        //your code for the controller

        //API call using $http to get the corresponding user details with the help of the user Id 

});