Angular RouteProviderを別のHTMLファイルにリダイレクトします

Question

既存のウェブサイトのアプリを構築する必要がありますが、残念ながら（私のコントロールの外側）はユーザーデバイスを検出し、モバイル版にリダイレクトします。

私は同じJSファイルを再利用しようとしていますが、さまざまなHTMLファイルを再利用しようとしています。

だから私は持っています：

1. desktop
のindex.html>
2. mobile.html for mobile

両方とも私の論理を扱いたいところ、私の問題は何らかの理由でルーティングが予想されていない理由ではありません。

デスクトップ：

1. example.com
に行きます
2. example.com /＃/ step / age / 0
にリダイレクトを取得する
3. ページを更新し、example.com /＃/ step / 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");
});

.

誰かが助言することができますか？ ありがとう。

Answer 1

角度は、経路全体を調べて、それがどこにルーティングするべきかを確認します。そのため、example.com/mobile.html#/steps/age/0が一致しない場合は、マッチングルートがありませんので、mobile.htmlから/steps/age/0#/steps/age/0を取得します。基本的な問題は、角度が一般的なものを意味するものを持たず、それをパラメータとして受け取ることです。

1つの解決策は、ルートを使用してページを区切ることです。

$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: '/'
    });
})

.

コントローラは必要に応じて変わり得る。

これに対する代替案は、otherwiseを独自のAngular Appとルーティングを使用させることです。これは、Mobileに漏れているデスクトップ指令に遭遇しないため、有益な場合があります。あなたはそれにあなたのすべての指令とコントローラを注入することができますが、それでもインデックスとモバイルの素晴らしい分離を持っています。あなたはそれをさらにステップとし、mobile.htmlへのリダイレクトを持つことができますが、それは異なるトピックです。

edit 私は間違えました。 mobile.htmlをm.example.comにすることは少し間違っています。 templateUrlには、index.htmlとindex.htmlディレクティブ、おそらくコントローラを含める必要があります。一般的なHTMLはそこに存在する必要があります。 ng-appとng-viewには、それらのプラットフォームの特定のHTMLを含める必要があります。

後期として、あなたが照会作業のすべてを行うdesktop.htmlと呼ばれるディレクティブを持つことができ、mobile.htmlが範囲内で定義されている場合は：

を使用することができます。

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

.

しかし今、私は浪費しています、私はTBHを働かせる100％確実ではありません。 終了編集