HTML5 PushState Clash مع توجيه عنوان URL لجهاز توجيه واجهة المستخدم الزاوي

Question

لدي تطبيق ويب Angular.js يستخدم جهاز توجيه واجهة المستخدم (https://github.com/angular-ui/ui-router) مع طرق عرض مسماة متوازية مثل:

.state(
            'app.experience', {
                url: 'e/:experienceId',
                views: {
                    'center-pane@': {
                        templateUrl: 'partials/experience.html',
                        controller: 'ExperienceController'
                    }
                })

لقد قمت بتمكين HTML5 PushState عبر

$locationProvider.html5Mode(true);

متى

http://www.mysite.com/e/123

عندما يتم طلب ذلك، تقوم الواجهة الخلفية الخاصة بي بإرسال ملف Index.html إلى الدليل الجذر.(حسب استخدام HTML5 Pushstate على angular.js) ومع ذلك، عندما يستقبل المتصفح ملف Index.html ويبدأ في جلب كافة موارد CSS/JS، تكون الطلبات مخصصة لـ

/e/js/script1.js

في مقابل

/js/script1.js

والذي يوجد فقط على مستوى الجذر.يبدو أن الدليل الجذر هو الافتراضي mysite.com/e/ (من عنوان URL المطلوب) وليس الجذر الفعلي، mysite.com/.

هل هناك شيء أفتقده هنا؟أليس من الممكن استخدام srcs النسبي لجافا سكريبت وcss في ملف Index.html؟

شكرا على المساعدة!

Answer 1

ملحوظة:لم توضح لنا كيف يبدو HTML ولكن بناءً على مشكلتك، سأفترض أنك كذلك لا باستخدام عناوين URL النسبية من جذر المستند.

يمكنك استخدام عناوين URL النسبية ولكن يجب أن تكون نسبية استنادا إلى جذر الوثيقة.

على سبيل المثال، قد يكون لديك شيء مثل هذا في ملف HTML الخاص بك

<img src="images/foo.jpg" />

يجب عليك فعل ذلك حقًا بهذه الطريقة (لاحظ إضافة الشرطة المائلة للبداية '/')

<img src="/images/foo.jpg" />

هذا ليس شيئًا محددًا لـ angularjs، إنه شيء HTML، انظر هذه الإجابة لمزيد من التفاصيل.

سبب استخدام متصفحك لـ /e/ في عنوان url لأن المتصفح طلب بالفعل موردًا يحتوي على /e/ في عنوان URL.لا يعرف المتصفح أن الخادم الخاص بك قد استجاب بملف غير موجود في ملف /e/ الدليل.

لذلك، إذا كان لديك عنوان URL نسبي بدون شرطة مائلة للأمام في البداية، فسيكون مرتبطًا بالمسار أو المورد الأصلي المطلوب.ما تريده هو استخدام عناوين URL النسبية بشرطة مائلة في البداية.