يقوم 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% من أن الأمر سينجح. إنهاء التعديل