Angular RouteProvider перенаправить в другой HTML-файл

Question

Мне нужно создать приложение для существующего веб-сайта, но, к сожалению, веб-сайт (вне моего контроля) обнаруживает пользовательское устройство и перенаправляет на мобильную версию.

Я пытаюсь повторно использовать тот же файл JS, но разные файлы HTML.

Так что я:

1. index.html для рабочего стола
2. mobile.html для мобильных устройств

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

Рабочий стол:

1. Я иду на example.com
2. получить перенаправление на example.com/#/steps/age/0
3. Обновите страницу, и она останется в example.com/#/steps/age/0

Это работает как ожидалось

Мобильный телефон:

1. Я иду на example.com/mobile.html
2. получить перенаправление на example.com/mobile.html#/steps/age/0
3. Обновите страницу и вместо того, чтобы остаться в том же URL-адресе, он идет на example.com/steps/age/0#/steps/age/0

Это не работает должным образом (ожидается, что после обновления будет оставаться в том же URL-адресе, что и в шаге № 2)

Код ниже:

angular
.module('profileToolApp', ["ngRoute", "ngResource", "ngSanitize"])
.config(function($routeProvider, $locationProvider){
    $routeProvider
    .when('/steps/:steps*', {
        templateUrl : 'profile-app.html',
        controller : 'example'
    })
    .otherwise({
        redirectTo: '/steps/age/0'
    });
})
.controller('example', function($scope, $routeParams, $resource, $location){
    console.log("example controller");
});

Может кто-нибудь, пожалуйста, посоветуйте? Благодарю.

Answer 1

Angular изучает весь путь, чтобы увидеть, куда он должен идти. Итак, когда у вас есть example.com/mobile.html#/steps/age/0 Не существует подходящего маршрута, поэтому он заменяет маршрут вместо вас. mobile.html так что вы получите /steps/age/0#/steps/age/0 от твоего otherwise, Фундаментальная проблема заключается в том, что угловой не имеет смысла mobile.html значит, и принимает его в качестве параметра.

Одним из решений является использование маршрутов для разделения ваших страниц.

$routeProvider
    .when('/', {
        templateUrl : 'desktop.html', //was 'index.html pre edit
        controller : 'example'
    })
    .when('/mobile/', {
        templateUrl : 'mobile.html',
        controller : 'example'
    })
    .when('/steps/:steps*', {
        templateUrl : 'profile-app.html',
        controller : 'example'
    })
    .when('/mobile/steps/:steps*', {
        templateUrl : 'mobile-profile-app.html',
        controller : 'example'
    })
    .otherwise({
        redirectTo: '/'
    });
})

Контроллеры могут меняться по мере необходимости.

Альтернативы этому должны иметь mobile.html используйте свое собственное угловое приложение и маршрутизацию, что может быть полезно, так как вы не столкнетесь с директивами рабочего стола, просачивающимися в мобильные устройства. Вы можете добавить в него все свои директивы и контроллеры, но при этом иметь хорошее разделение индекса и мобильного устройства. Вы можете сделать этот шаг дальше и перенаправить на m.example.com, но это другая тема.

РЕДАКТИРОВАТЬ Я сделал ошибку. имеющий templateUrl быть index.html немного не так. index.html должен содержать ваш ng-app и ваш ng-view директивы, возможно, контроллер. Любой распространенный HTML должен находиться там. desktop.html а также mobile.html должен содержать конкретный HTML для этих платформ.

В качестве запоздалой мысли, внутри них вы могли бы иметь директиву под названием profile что делает весь ваш профиль работает, и с небольшим ng-switch Вы можете иметь это, если steps определяется в объеме, и используйте:

$routeProvider
.when('/steps?/:steps?', {
    templateUrl : 'desktop.html', //was 'index.html pre edit
    controller : 'example'
})
.when('/mobile/steps?/:steps?', {
    templateUrl : 'mobile.html',
    controller : 'example'
})

Но теперь я болтаю, я не уверен на 100%, что это сработает. КОНЕЦ РЕДАКТИРОВАНИЯ