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

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

Я хочу, чтобы информационная домашняя страница приложения появлялась при вводе домена.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;

}]);

javascript routes angularjs angularjs-routing
person Paul Sylling    schedule 26.12.2013    source источник
comment
Я работаю над этим и опубликую здесь, как только найду ответ. Если вы хотите следить за другим сообщением об этом и других, вот мой вопрос: stackoverflow.com/questions/23705350/   -  person Cody    schedule 20.05.2014

Ответы (1)


arrow_upward
2
arrow_downward

Если вы попадете на один из этих маршрутов из своего приложения, он будет работать нормально, но если вы скопируете и вставите его в адресную строку браузера, вы получите 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: '/' });
    });

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

person Mohammad Sepahvand    schedule 26.12.2013
comment
Спасибо за объяснение, почему происходит ошибка 404. Я использую Angular, я использую AWS S3 для размещения своего сайта и использую Parse.com в качестве серверной части. Цель состояла в том, чтобы не было серверов для управления. - person Paul Sylling; 27.12.2013