Nginx config works with angularjs route in HTML5 mode

Question

I am struggling with the nginx config file with angularjs route.

In my case, I have these HTMLs:

index.html description.html dashboard.html

The dashboard.html is the one with angularjs code.

Here is my current nginx config file:

upstream panda.dev {
    server 127.0.0.1:3333 max_fails=3 fail_timeout=30s;
}

server {
    listen       80;
    server_name  panda.dev;
    root /Users/Jeremy/Documents/Projects/PandaUnion/web/converted-html;

    # serve static files directly
    location / {
        index index.html$args;
        try_files $uri$args $uri$args/ $uri/ /dashboard.html$args =404;
    }
}

Here is my angular code:

PandaUnion.controller('PandaController', function($routeParams, $location) {
  console.log($routeParams);
});

var templateURL = '/partials';

PandaUnion.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  return $routeProvider.when('/dashboard/:user_id', {
    templateUrl: templateURL + '/home.html'
  }).when('/dashboard/:user_id/setting', {
    templateUrl: templateURL + '/setting.html'
  }).when('/dashboard/:user_id/bill', {
    templateUrl: templateURL + '/bill.html'
  });
});

With this config, I can get dashboard.html via visiting /dashboard/123, but I can't get 123 as routeParam in angular.

It should print {user_id: 123} when I visit /dashboard/123 but I only see an empty Object.

What goes wrong here? Please help...

(sorry for my poor English)

pors · Accepted Answer · 2014-01-26 21:26:55Z

1

Have a look at the AngularJS tutorial. As you can see there, you have to bind the parameter (user_id in your case) via the $routeParams object.

So:

Define a controller for the when() statements
Inject the $routeParams object in that controller
Bind the parameters to the $scope object
In your template make sure you are within the controller boundaries when referring to "user_id"

Hope that helps.

answered Jan 26, 2014 at 21:26

pors

4,17440 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Nginx config works with angularjs route in HTML5 mode

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related