Динамические маршруты AngularJS без хэштега

Question

Я создаю приложение с использованием Angular и не знаю, как обрабатывать динамически созданные URL-адреса, которые не содержат #. Я попытался html5Mode истина, но это не работает, потому что сервер ищет фактический каталог.

Я хочу иметь информационную домашнюю страницу для приложения, которая появляется при вводе в domain.com. Пользователь может создать пользовательскую страницу через приложение администратора, которое будет доступно по адресу domain.com/john. Мой код ниже работает с хэштегами, но это создает domain.com/#/ и domain.com/#/john.

Как я могу изменить свой код для работы на желаемый результат? Когда я попробовал html5Mode, domain.com/john перешел на 404.

app.js

config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {templateUrl: 'views/home.html', controller: 'HomeCtrl'});
    $routeProvider.when('/:user', {templateUrl: 'views/user.html', controller: 'UserCtrl'});
    $routeProvider.otherwise({redirectTo: '/'});
    //$locationProvider.html5Mode(true);
}]);

controller.js

controller('UserCtrl', ['$scope', '$routeParams', function ($scope, $routeParams) {

    var param = $routeParams.user;

}]);

Answer 1

Если вы получите один из этих маршрутов из своего приложения, он будет работать нормально, но если вы скопируете и вставите его в адресную строку браузера, вы получите 404, потому что сервер не понимает, например, как маршрутизировать эти адреса. если вы попытаетесь перейти на domain.com/john, вы получите сообщение об ошибке, потому что сервер будет искать страницу john.html, которой, скорее всего, там не будет. Что вы можете сделать, это настроить свой сервер так, чтобы он возвращался на вашу базовую страницу home.html для запросов без #, а затем angular будет обрабатывать переадресацию на этот маршрут оттуда.

Смотрите документы по маршрутизации HTML5.

Использование этого режима требует перезаписи URL на стороне сервера, в основном вам нужно переписать все ваши ссылки на точку входа вашего приложения (например, index.html)

Другой альтернативой (худший подход по сравнению с переписыванием URL на стороне сервера) является предоставление полностью определенных адресов вашим ресурсам в конфигурации маршрутизации, например, относительно корня сервера.

var myRoutingApp = angular.module('routingApp', ['ngResource', 'ngRoute', 'kendo.directives', 'ngGrid'])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/', { templateUrl: '../Angular/AngularSeed/app/templates/Home.html', controller: '../Angular/AngularSeed/app/controllers/HomeController' });
        $routeProvider.when('/Companies', { templateUrl: '../Angular/AngularSeed/app/templates/Page1.html', controller: '../Angular/AngularSeed/app/controllers/Page1Controller' });
        $routeProvider.when('/CreateCompany', { templateUrl: '../Angular/AngularSeed/app/templates/Page2.html', controller: '../Angular/AngularSeed/app/controllers/Page2Controller' }); ......
        $locationProvider.html5Mode(true);

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

Это работает, но явно не идеально.