CODEWITHSUNDEEP
angularjsexpress
niran
niran

Reputation: 1980

AngularJS dynamic routing issue

I am trying to display view by using dynamic routing. For this I am using ":"

notation. Once data comes back from the server, $location.path('/postuser/'+permalink) is used to redirect to the view. But for some reason I am getting 404 error.

I am using Html 5 mode. I think this the issue.

$location.path('/postuser/'+permalink) sends request to the server:

http://www.learntest/partials/userspostpage.html.

instead of this

http://www.learntest/postuser/somedata.

Here is the router sample

test.config(['$routeProvider', function($routeProvider) {

$routeProvider.when('/welcome', {templateUrl: 'partials/welcome.html', controller: 'welcomeController'});

$routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'singupController'});
$routeProvider.when('/signup', {templateUrl: 'partials/signup.html', controller: 'singupController'});
$routeProvider.when('/', {templateUrl: 'partials/home.html', controller: 'homeController'});
$routeProvider.when('/create', {templateUrl: 'partials/new.html', controller: 'CrudController'});
$routeProvider.when('/user/:permalink', {templateUrl: 'partials/userspostpage.html', controller: 'CrudController'});

$routeProvider.otherwise({redirectTo: '/'});

}]);

 test.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);

}]);

AngularJS files and folder structure

enter image description here

Also in back end I am using ExpressJS router

ExpressJS router

app.get("/postuser/:permalink", daataN);

if I remove /:permalink from the $routeProvider I am able to get the response. But I want url to be dynamic

Please let me know what is the issue here

Upvotes: 0

Views: 1085

Answers (1)

Fourth
Fourth

Reputation: 9351

My guess, since you say you're using html5mode is that the server is handling the route before the client gets a chance, thus you will always trigger the GET action on the server before the angular router has a chance to deal with the request.

I think you have a couple of options:

  1. Choose a different server side controller name. (i.e. in express app.get('/user/:permalink'...))
  2. Choose a different client side base route. (i.e. in router '/user/:permalink')
  3. Completely diverge the two because it sounds like you are doing something bad when you have a server route and a client route that perfectly match. The client side routes should make sense for users to copy/paste or bookmark. The server side routes should make sense for you to use as an API. It seems unlikely that they would match.

Upvotes: 1

Related Questions