Angular RouteProvider가 다른 HTML 파일로 리디렉션됩니다.

StackOverflow https://stackoverflow.com//questions/25038663

문제

기존 웹사이트용 앱을 구축해야 하는데 안타깝게도 웹사이트(내 통제 범위 밖에 있음)가 사용자 장치를 감지하여 모바일 버전으로 리디렉션합니다.

동일한 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으로 이동합니다.

이는 예상대로 작동하지 않습니다(2단계에서 새로 고침하면 동일한 URL에 유지될 것으로 예상됨).

아래 코드:

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");
});

누구든지 조언을 해주실 수 있나요?감사해요.

도움이 되었습니까?

해결책

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 BE 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% 확신할 수 없습니다. 편집 종료

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top