How to properly configure Nginx for AngularJS with html5Mode?

T

TheRaven2015-08-10 16:06:28

Nginx

TheRaven, 2015-08-10 16:06:28

I use a bunch of nginx and ngRoute, the task is to make sure that when the site is opened, several objects necessary on all pages of the site are loaded once, and when switching pages, only the html template is replaced.
app.js (simplified)

var myApp = angular.module('myApp', [
    'ngRoute',
    'accountServices'
]);

myApp.config(['$locationProvider', '$httpProvider', '$routeProvider',
    function($locationProvider, $httpProvider, $routeProvider) {
        $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
        $httpProvider.defaults.xsrfHeaderName = "X-CSRF-TOKEN";
        $locationProvider.html5Mode(true);
        $locationProvider.hashPrefix('!');

        $routeProvider
            .when('/', {
                templateUrl: '/resources/angular-html/main.tmpl.html',
                controller: 'MainPageController',
                pageId: 'mainPage',
                title: 'Главная'
            })
            .when('/pages/list', {
                templateUrl: '/resources/angular-html/pages.list.html',
                controller: 'PagesListController',
                pageId: 'listPage',
                title: 'Список'
            })
            .otherwise({
                redirectTo: '/'
            });
    }
]);

nginx.conf

server {
        listen      80;
        server_name localhost;
    root        D:/Projects/test;
    
    location /META-INF {
      deny all;
    }
    
    location /WEB-INF {
      deny all;
    }
    
    location /backend {
      proxy_pass http://localhost:8080/;
      
      proxy_redirect     off;
      proxy_set_header   Host             $host;
      proxy_set_header   X-Real-IP        $remote_addr;
      proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
                proxy_set_header   Range "";
                proxy_set_header   Request-Range "";
      client_max_body_size       1024m;
      client_body_buffer_size    128k;
      proxy_connect_timeout      90;
      proxy_send_timeout         90;
      proxy_read_timeout         90;
      proxy_buffer_size          4k;
      proxy_buffers              4 32k;
      proxy_busy_buffers_size    64k;
      proxy_temp_file_write_size 10m;
    }
    
    location / {
      index     layout.html;
      try_files $uri $uri/ /layout.html;
    }
    }

layout.html (simplified)

<!DOCTYPE html>
<html ng-app="myApp">
<head ng-controller="HeaderController">
    <!-- Angular -->
    <!-- много ссылок на JS-ки-->
</head>
<body>
    <div class="container" ng-controller="LayoutController">
        <div>
            <div ng-view></div>
        </div>
    </div>
</body>
</html>

In the HeaderController, the title of the page is changed and the availability of the back-end is checked in java, nothing else interesting.
In LayoutController, models are loaded that are needed throughout the site, for example, the model of a logged in user.
The block labeled "ng-view" hooks the controller assigned by the routeProvider.
The PROBLEM is this: when html5mode is disabled and links like example/#/pages/list are accessed, everything works as intended - the page does not reload, only the html template changes.
When you turn on html5mode and follow links like example/pages/list , the page is reloaded and all controllers work each time.
Tell me please, where did I go wrong?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

K

Kano, 2015-08-10
@TheRaven

I don't see Hashbang and HTML5 Modes base address meta-information in your page markup , Relative links subsection.
For example:

<head>
<base href="/" />
</head>