@TheRaven

Как правильно настроить Nginx для AngularJS c html5Mode?

Использую связку nginx и ngRoute, задача сделать так, чтобы при открытии сайта единожды подгружались несколько объектов необходимых на всех страницах сайта, а при переключении страниц заменялся только html-шаблон.

app.js (упрощенно)
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 (упрощенно)
<!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>


В HeaderController происходит изменение title страницы и проверка доступности бэк-энда на java, больше ничего интересного.
В LayoutController подгружаются модели нужные на всем пространстве сайта, например модель залогиненного пользователя.
В блок помеченный "ng-view" цепляется контроллер назначаемый routeProvider'ом.

ПРОБЛЕМА вот в чем: при отключении html5mode и обращении по ссылкам вида example/#/pages/list все работает как задумано - перезагрузки страницы не происходит, меняется только html-шаблон.
При включении html5mode и переходе по ссылкам вида example/pages/list страница перезагружается и каждый раз отрабатывают все контроллеры.

Подскажите пожалуйста, где я ошибся ?
  • Вопрос задан
  • 3147 просмотров
Решения вопроса 1
@Kano
Я не вижу у вас в разметке страницы метаинформации о базовом адресе
Hashbang and HTML5 Modes, подраздел Relative links
Например такой:
<head>
<base href="/" />
</head>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы