routeParams are Empty

Question

I am trying to get URL parameters using $routeParams:

var myApp = angular.module('myApp', [ 'ngRoute', 'appControllers', 'appFilters', 'appServices' ]).config(['$routeProvider', function($routeProvider) { $routeProvider.when('/admin/organisations/:organisation_id', { controller: 'UpdateOrganisationCtrl' }); }]);

and in my Controller:

appControllers.controller('UpdateOrganisationCtrl', ['$rootScope', '$scope', '$http', '$window', '$routeParams', function($rootScope, $scope, $http, $window, $routeParams) { console.log($routeParams.organisation_id); }]);

However I am printing undefined as $routeParams is {} Any thoughts?

What's the URL that you are using to access this? It would seem there are no parameters in the URL? — random_user_name
– random_user_name, Commented Mar 1, 2016 at 16:00
The only thing I can think is maybe the underscore in organisation_id is breaking things? Does renaming it as organisationid help atall? — Rhumborl
– Rhumborl, Commented Mar 1, 2016 at 16:01
@Rhumborl That was what I thought, but renaming to organisationid did not help at all. Thanks anyways. — Hasan Can Saral
– Hasan Can Saral, Commented Mar 1, 2016 at 16:03
@cale_b For example: localhost:3000/admin/organisations/56cde4bf911747ea200d5a63 — Hasan Can Saral
– Hasan Can Saral, Commented Mar 1, 2016 at 16:03

Community · Accepted Answer · 2017-05-23 12:02:36Z

The url you tried to access should be

localhost:3000/#/admin/organisations/56cde4bf911747ea200d5a63

ngRoute will make your application a Single Page Application, where the relevant part of the url for the router will be after # (beautifully called the hashbang).

Look at the example:

// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}

However, the url you give could work if you use HTML5Mode for $location service of angular.

See those links for more information:

Thanks! I tried to do $locationProvider.html5Mode(true) but $routeParams were still {} Any thoughts?
have you verifiy that that url works : localhost:3000/#/admin/organisations/56cde4bf911747ea200d5a63 ?
Unfortunately, I cannot because my application is not a SPA and the URL with a hashbang is redirected to / which is redirected to /dashboard on the server side. So overall I get a redirect to localhost:3000/dashboard#/admin/organisations/56cde4bf911747ea200d5a63

Collectives™ on Stack Overflow

routeParams are Empty

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related