CODEWITHSUNDEEP
angularjs
Vladimir Djukic
Vladimir Djukic

Reputation: 2072

How to configure routes AngularJS

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>

Upvotes: 0

Views: 109

Answers (1)

martinczerwi
martinczerwi

Reputation: 2847

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.

Upvotes: 1

Related Questions