How to configure routes AngularJS

Question

I need to pass id from project/id to CommentCtrl, when I try to console.log($routeParams.id) it return undefined... Anyone can find what wrong with my code?

   .config(function($routeProvider) {
                    $routeProvider.
                            when('/project/:id', {
                                controller: 'CommentsCtrl'
                            }).
                            otherwise({
                                redirectTo: '/'
                            });
                })
              .controller('CommentsCtrl',function($scope,$http,$routeParams){
                  $scope.comments = [];
                  $scope.param = $routeParams.id;
              });

Update:

In html I just have module , CommentsCtrl and <div ng-view></div> inside CommentsCtrl like this:

<div ng-controller="CommentsCtrl">
  <div ng-view></div>
</div>

Please add you html structure for more info, including ng-view — martinczerwi
– martinczerwi, Commented Aug 6, 2015 at 14:48
ngRoute assigns the Controller controller: 'CommentsCtrl', you're doubling it — martinczerwi
– martinczerwi, Commented Aug 6, 2015 at 14:53

martinczerwi · Accepted Answer · 2015-08-06 15:30:33Z

1

I've put my comments into an answer for better explanation.

You have to adjust your html structure to look like this:

<div>
  <div ng-view></div>
</div>

Remove ng-controller, because ngRoute assigns the controller, as you can see in your config:

[...]
  $routeProvider.
    when('/project/:id', {
        controller: 'CommentsCtrl'
    })

Then CommentsCtrl will get $routeParams.id as a parameter.

If you should need a wrapping controller, you'll have to define a different one, like 'AppCtrl' or something. But it must not match a controller used with ngRoute.

This is the simplest example I could assemble for how to use ngRoute: http://plnkr.co/edit/JSwafRF2AavvlWtsnjus?p=preview

You can test it in the fullscreen view, by modifying the url. I couldn't get the links running on plnkr up to now

Update:

There's some things to mention, considering my example code:

With plunker, I have to use the hashes (#), because to server doesn't allow html5 style links. This might be different for your app so you might leave out the hashes.
I've removed the project path in my route config for simplicity

If this doesn't help at all, it might help if you provide a live view of your app, so I can verify specifically what doesn't work or whats wrong.

edited Aug 6, 2015 at 15:30

answered Aug 6, 2015 at 15:02

martinczerwi

2,84725 silver badges23 bronze badges

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

3 Comments

Vladimir Djukic Over a year ago

I implement this in my code, but problem is I always get Here we have no params also I don't know why on my url is added # and looks like this: /project/3#/

martinczerwi Over a year ago

Please see my plunk again, I've just added links and a wrapping controller. Maybe helps

Vladimir Djukic Over a year ago

I found solution here: scotch.io/quick-tips/…

Collectives™ on Stack Overflow

How to configure routes AngularJS

1 Answer 1

Update:

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related