javascript - tutorial - angularjs شرح




توجيه AngularJS بدون التجزئة '#' (7)

يتيح كتابة الإجابة التي تبدو بسيطة وقصيرة

في جهاز التوجيه في نهاية إضافة html5Mode (صحيح) ؛

app.config(function($routeProvider,$locationProvider) {

    $routeProvider.when('/home', {
        templateUrl:'/html/home.html'
    });

    $locationProvider.html5Mode(true);
})

في رأس html إضافة علامة الأساسية

<html>
<head>
    <meta charset="utf-8">    
    <base href="/">
</head>

وذلك بفضل plus - لتقديم تفاصيل عن الإجابة المذكورة أعلاه

أنا أتعلم AngularJS وهناك شيء واحد يزعجني حقا.

يمكنني استخدام $routeProvider لإعلان قواعد التوجيه للتطبيق الخاص بي:

$routeProvider.when('/test', {
  controller: TestCtrl,
  templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });

ولكن عند الانتقال إلى التطبيق الخاص بي في المتصفح ، أرى app/#/test بدلاً من app/test .

حتى سؤالي هو لماذا يضيف AngularJS هذا تجزئة # إلى عناوين المواقع؟ هل هناك أي إمكانية لتجنب ذلك؟


**

من المستحسن استخدام نمط HTML 5 (PathLocationStrategy) كاستراتيجية الموقع في Angular

** لأن

  1. فهي تنتج عناوين URL نظيفة وفعّالة SEO يسهل على المستخدمين فهمها وتذكرها.
  2. يمكنك الاستفادة من العرض من جانب الخادم ، مما سيجعل تحميل التطبيق أسرع ، عن طريق تقديم الصفحات في الخادم أولاً قبل توصيله للعميل.

استخدام Hashlocationstrtegy فقط إذا كان لديك لدعم المتصفحات القديمة.

انقر هنا لمعرفة المزيد


إذا كنت تريد تكوين هذا محليًا على OS X 10.8 لخدمة Angular with Apache ، فقد تجد ما يلي في ملف htaccess الخاص بك:

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /~yourusername/appname/public/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
    RewriteRule (.*) index.html [L]
</IfModule>

خيارات + FollowSymlinks في حالة عدم التعيين قد تعطيك خطأ ممنوع في السجلات كما هو الحال:

Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden

مطلوب إعادة كتابة القاعدة وإلا سيتم حل الطلبات إلى جذر الخادم الخاص بك بشكل افتراضي ليس دليلك للمشروع إلا إذا قمت بتكوين ملفاتك بشكل خاص ، لذلك تحتاج إلى تعيين المسار بحيث يجد الطلب دليلك الجذر للمشروع. على سبيل المثال على جهازي لدي دليل / Users / me / Sites حيث أحتفظ بكل مشروعاتي. مثل نظام التشغيل القديم X إعداد.

يوضح السطرين التاليين على نحو فعال ما إذا كان المسار ليس دليلاً أو ملفًا ، لذلك عليك التأكد من عدم وجود ملفات أو أدلة مماثلة لمسارات مسار التطبيق.

الشرط التالي يقول إذا كان الطلب لا ينتهي مع إضافات الملف المحددة لذلك أضف ما تحتاجه هناك

و [L] آخر واحد يقول لخدمة ملف index.html - التطبيق الخاص بك لجميع الطلبات الأخرى.

إذا كنت لا تزال تواجه مشاكل ، فقم بفحص سجل apache ، فمن المحتمل أن يعطيك تلميحات مفيدة:

/private/var/log/apache2/error_log

المعلومات التالية من:
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

من السهل جدًا الحصول على عناوين URL نظيفة وإزالة علامة التصنيف من عنوان URL في Angular.
بشكل افتراضي ، سيقوم AngularJS بتوجيه عناوين URL بعلامة تصنيف hashtag على سبيل المثال:

هناك أمران يجب القيام بهما.

  • تكوين $ locationProvider

  • وضع قاعدتنا للروابط النسبية

  • خدمة الموقع $

في الزاوي ، تقوم خدمة الموقع $ بتوزيع عنوان URL في شريط العناوين وإجراء تغييرات على التطبيق الخاص بك والعكس صحيح.

أوصي بشدة بالاطلاع على مستندات الموقع الرسمية $ Angular $ للتعرف على خدمة الموقع وما يقدمه.

https://docs.angularjs.org/api/ng/service/$location

$ locationProvider و html5Mode

  • سنستخدم وحدة $ locationProvider ونضبط html5Mode إلى true.
  • سنفعل ذلك عند تحديد تطبيق Angular الخاص بك وتكوين مساراتك.

    angular.module('noHash', [])
    
    .config(function($routeProvider, $locationProvider) {
    
       $routeProvider
           .when('/', {
               templateUrl : 'partials/home.html',
               controller : mainController
           })
           .when('/about', {
               templateUrl : 'partials/about.html',
               controller : mainController
           })
           .when('/contact', {
               templateUrl : 'partials/contact.html',
               controller : mainController
           });
    
       // use the HTML5 History API
       $locationProvider.html5Mode(true); });
    

ما هي واجهة برمجة تطبيقات HTML5 History؟ إنها طريقة قياسية للتعامل مع محفوظات المستعرض باستخدام برنامج نصي. يتيح هذا لـ Angular تغيير التوجيه وعناوين URL لصفحاتنا دون تحديث الصفحة. لمزيد من المعلومات حول هذا ، إليك مقالة جيدة عن HTML1 History API:

http://diveintohtml5.info/history.html

الإعداد للارتباطات النسبية

  • للربط حول تطبيقك باستخدام الروابط النسبية ، ستحتاج إلى تعيين <base> في <head> من المستند. قد يكون هذا في ملف index.html root الخاص بتطبيق Angular. ابحث عن العلامة <base> واضبطها على عنوان URL الجذر الذي تريده لتطبيقك.

على سبيل المثال: <base href="/">

  • هناك الكثير من الطرق الأخرى لتكوين هذا ، ويجب أن يعمل وضع HTML5 الذي تم تعيينه على true على حل الروابط النسبية تلقائيًا. إذا كان جذر تطبيقك مختلفًا عن عنوان url (على سبيل المثال / my-base ، فاستخدم ذلك كقاعدة لك.

الرجوع إلى المتصفحات القديمة

  • ستعود خدمة الموقع $ تلقائيًا إلى طريقة hashbang للمتصفحات التي لا تدعم HTML5 History API.
  • يحدث ذلك بشفافية بالنسبة لك ولن تضطر إلى تهيئة أي شيء حتى يعمل. من مستندات موقع Angular $ ، يمكنك رؤية طريقة التراجع وكيفية عملها.

فى الختام

  • هذه طريقة بسيطة للحصول على عناوين URL جميلة وإزالة علامة التصنيف في تطبيق Angular. المتعة جعل هذه التطبيقات الزاوي نظيفة جدا وسرعة فائقة!

كما ذكر في أعلاه يجيب على الخطوات هي

أضف <base href="/"> إلى index.html
تمكين html5mode $ location.html5Mode (صواب) في app.js.

مع هذا التطبيق سوف تعمل بشكل جيد. ولكن فقط في السيناريوهات عند الانتقال من index.html إلى صفحات أخرى. على سبيل المثال ، صفحة الأساس الخاصة بي هي www.javainuse.com. إذا قمت بالنقر فوق ارتباط java فإنه سيتم الانتقال بشكل صحيح إلى www.javainuse.com/java.

ولكن إذا ذهبت مباشرة إلى www.javainuse.com/java ستحصل على الصفحة لم يتم العثور على خطأ.

لحل هذا علينا استخدام إعادة كتابة url. تتطلب شبكة نقطة إعادة كتابة عنوان URL لـ IIS.

إذا كنت تستخدم tomcat ، فيجب إعادة كتابة عنوان URL باستخدام Tuckey. يمكن الحصول على مزيد من المعلومات حول إعادة كتابة عنوان URL here



يتطلب استخدام وضع HTML5 إعادة كتابة عنوان URL على جانب الخادم ، فيجب عليك إعادة كتابة جميع الروابط الخاصة بك إلى نقطة دخول التطبيق الخاص بك (مثل index.html). إن طلب علامة <base> مهم أيضًا لهذه الحالة ، لأنه يسمح لـ AngularJS بالتفريق بين جزء عنوان url الذي يمثل قاعدة التطبيق والمسار الذي يجب أن يعالجه التطبيق. لمزيد من المعلومات ، راجع دليل مطوري AngularJS - استخدام $ $ HTML5 وضع جانب الخادم .





angularjs