Angular routing with parameter issue

Question

I have MVC application, I want make routing for the following URL

http://localhost:2668/Home/User/1

I try

.config(function ($routeProvider, $locationProvider) {
//here we will write code for implement routing 
$routeProvider
.when('#/Home/User/:userid', {
    templateUrl: '/AngularTemplates/User.html',
    controller: 'UserController'
})

.otherwise({   // This is when any route not matched
    controller: 'ErrorController'
}) })

And then the UserController as below:

.controller('UserController', ['$scope','$routeParams', function ($scope,$routeParams) {
    // $routeParams used for get query string value

    //var loc = window.location.href;
    //var id = loc.slice(loc.lastIndexOf('/'), loc.length).split('/')[1];
    $scope.Message = "This is ORDER Page with query string id value =" + $routeParams.userid;
}])

But I always get "undefined" for the para $routeParams.userid

What is wrong in my code? Please help thanks!

Thanks I just remove it but it still not works correct. Maybe duplicate with MVC routing? — Lewis Hai
– Lewis Hai, Commented Oct 29, 2015 at 9:01

sbedulin · Accepted Answer · 2015-10-29 09:20:39Z

1

Here is a working example:

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

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>

    <a href="/Home/User/11">user 11</a>
    <a href="/Home/User/12">user 12</a>

    <div ng-view></div>

    <script>
      var app = angular.module('app', ['ngRoute']);

      app.config([
          '$locationProvider', '$routeProvider',
          function ($locationProvider, $routeProvider) {

              $locationProvider.html5Mode({
                  enabled: true,
                  requireBase: false
              }).hashPrefix('!');

              $routeProvider
                .when('/Home/User/:userid', {
                    template: '<pre>{{ message }}</pre>',
                    controller: 'UserController'
              });
          }]);

      app.controller('UserController', ['$scope','$routeParams', function ($scope, $routeParams) {
          $scope.message = "userid = " + $routeParams.userid;
      }]);
    </script>
  </body>

</html>

JSBin http://output.jsbin.com/geluli

You may read more about default router here (nice examples + tests) https://docs.angularjs.org/api/ngRoute/service/$route

answered Oct 29, 2015 at 9:20

sbedulin

4,4101 gold badge26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Over a year ago

Nice! But .hashPrefix('!') is not really required?!

Collectives™ on Stack Overflow

Angular routing with parameter issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related