1. ماذا تفعل؟
تقوم خدمة موقع $ بتحليل عنوان URL في شريط عناوين المتصفح (استنادًا إلى window.location) ، مما يتيح لنا استخدام عنوان URL بشكل أكثر ملاءمة في التطبيق. سيستجيب تغيير عنوان URL في شريط العناوين لخدمة موقع $ ، وسيستجيب تعديل عنوان URL في موقع $ إلى شريط العناوين.
خدمة الموقع $:
فضح عنوان URL لشريط عنوان المتصفح الحالي ، حتى نتمكن من ذلك
1. انتبه إلى عناوين URL ومراقبة
2. تغيير عنوان URL
عندما يقوم المستخدم بما يلي ، قم بمزامنة عنوان URL مع المتصفح:
1. تغيير شريط العناوين
2. انقر فوق الزر "الخلفية أو" (أو انقر فوق رابط تاريخي).
3. انقر على رابط
طريقة تصف كائن عنوان URL كسلسلة من الطرق (البروتوكول ، المضيف ، المسار ، البحث ، التجزئة).
1. قارن موقع $ و window.location
1) الغرض: كل من Window.location وخدمات الموقع $ تسمح للقراءة والكتابة الوصول إلى موقع المتصفح الحالي.
2) API: window.locked تكشف تحديد كائن غير معالج مع بعض الخصائص التي يمكن تعديلها مباشرة ؛ بينما تكشف خدمة موقع $ بعض أساليب getter/setter على غرار jQuery.
3) التكامل مع دورة إعلان التطبيق الزاوي: يعرف موقع $ عن جميع مراحل دورة الإعلان الداخلي ، ويتكامل مع watch $ ، إلخ ؛ في حين أن window.location لا يعمل.
4) الجمع بسلاسة مع HTML5 API: مع احتياطي للمتصفحات القديمة ، هل هناك أي طرق توافق لإصدارات أقل من المتصفحات؟) ؛ في حين أن window.location لا.
5) تعرف على دليل الجذر أو سياق المستند الذي تم تحميله بواسطة التطبيق: window.location لا يعمل ، وسيعود wnidow.location.path "/docroot/subpath" ؛ و $ location.path () إرجاع docroot الحقيقي.
2. متى يجب أن أستخدم موقع $؟
في التطبيق ، في أي وقت تحتاج إلى الاستجابة للتغييرات في عنوان URL الحالي ، أو ترغب في تغيير عنوان URL للمتصفح الحالي.
3. ماذا لا تفعل؟
عندما يتغير عنوان URL للمتصفح ، لن يتم إعادة تحميل الصفحة. إذا كنت بحاجة إلى القيام بذلك (قم بتغيير العنوان وتنفيذ إعادة تحميل الصفحة) ، فاستخدم واجهة برمجة تطبيقات منخفضة المستوى ، $ window.location.href.
2. نظرة عامة عامة على واجهة برمجة التطبيقات (نظرة عامة عامة على API)
يمكن أن تتصرف خدمة موقع $ بشكل مختلف وفقًا للتكوين عند تهيئتها. التكوين الافتراضي مناسب لمعظم التطبيقات ، ويتم تخصيص التكوينات الأخرى ، والتي يمكن أن تمكن بعض الميزات الجديدة.
عند تهيئة خدمة موقع $ ، يمكننا استخدامها في أساليب jQuery Style Getter و Setter ، مما يتيح لنا الحصول على عنوان URL للمتصفح الحالي أو تغييره.
1. تكوين خدمة الموقع $
لتكوين خدمة موقع $ ، تحتاج إلى الحصول على $ locationprovider (http://code.angularjs.org/1.0.2/docs/api/ng.$LocationProvider) وتعيين المعلمات التالية:
html5mode (mode): {boolean} ، true - انظر وضع html5 ؛ خطأ - انظر وضع Hashbang ، الافتراضي: خطأ. (ستشرح الفصول التالية أوضاع مختلفة)
HashPrefix (بادئة): {String} ، البادئة المستخدمة من قبل HashBang (عندما يكون HTML5Mode خاطئًا ، استخدم وضع Hashbang لتناسب المتصفحات التي لا تدعم وضع HTML5) ، الافتراضي: "!"
2. أساليب getter و setter
توفر خدمة الموقع $ طرقًا لـ Getter لقطع غيار URL للقراءة فقط (Abruurl ، Protocol ، Host ، Port) ، كما توفر أساليب Getter و Setter لعنوان URL والمسار والبحث والتجزئة.
// احصل على المسار الحالي $ location.path () ؛ // قم بتغيير المسار $ location.path ('/newValue')جميع أساليب Setter تُرجع نفس كائن موقع $ لتنفيذ بناء جملة بالسلاسل. على سبيل المثال ، تعديل سمات متعددة في جملة واحدة ، تتشابه طريقة Setter بالسلاسل:
$ location.path ('/newValue'). Search ({key: value}) ؛
هناك طريقة استبدال خاصة يمكن استخدامها لإخبار خدمة موقع $ لاستخدام مسار بدلاً من إنشاء سجل جديد عند مزامنتها مع المتصفح في المرة القادمة التي تتم فيها مزامنة المتصفح. تكون طريقة الاستبدال مفيدة عندما نريد تنفيذ إعادة التوجيه ولكن لا ترغب في إبطال زر العودة (الزر الخلفي مرة أخرى واسترداد إعادة التوجيه). إذا كنت ترغب في تغيير عنوان URL الحالي دون إنشاء تاريخ جديد ، فيمكننا القيام بذلك:
$ location.path ('/somenewpath'). استبدال () ؛
لاحظ أن طريقة Setter لن تحديث Window.Location على الفور. بدلاً من ذلك ، ستعرف خدمة موقع $ دورة حياة النطاق ودمج تغييرات موقع متعددة $ إلى واحد ، وتقديمها إلى الكائن. نظرًا لأن التغييرات في حالات متعددة من موقع $ سيتم دمجها في تغيير واحد ، في المتصفح ، تسمى طريقة استبدال () مرة واحدة فقط ، بحيث يكون للالتزام بأكمله استبدال واحد فقط () ، مما لن يتسبب في إنشاء المتصفح تاريخًا إضافيًا. بمجرد تحديث المتصفح ، ستقوم خدمة موقع $ بإعادة تعيين بت العلم من خلال طريقة استبدال () ، وستقوم التغييرات المستقبلية بإنشاء سجل جديد ما لم يتم استدعاء استبدال () مرة أخرى.
تشفير الأحرف والحرمان
يمكننا تمرير أحرف خاصة في خدمة موقع $ ، وستقوم الخدمة تلقائيًا بتشفيرها وفقًا لمعيار RFC3986. عندما نصل إلى هذه الطرق:
3. أوضاع Hashbang و HTML5
تحتوي خدمة موقع $ على وضعين للتكوين يمكنهما التحكم في تنسيق عنوان URL لشريط عنوان المتصفح: وضع Hashbang (افتراضي) ووضع HTML5 استنادًا إلى استخدام API HTML5 History. في كلا الوضعين ، يستخدم التطبيق نفس واجهة برمجة التطبيقات. ستتعاون خدمة موقع $ مع مقتطف URL الصحيح وواجهة واجهة برمجة تطبيقات المستعرض لمساعدتنا على إجراء تغييرات URL للمتصفح وإدارة التاريخ.
1. وضع Hashbang (الوضع الافتراضي)
في هذا الوضع ، يستخدم موقع $ عنوان URL Hashbang في جميع المتصفحات. تحقق من مقتطف الرمز التالي لمعرفة المزيد:
IT ('يجب أن تظهر مثالًا "، حقن (وظيفة ($ locationProvider) {$ locationprovider.html5mode = false ؛ $ locationprovider.hashprefix ='! http://host.com/base/index.html#! $ location.search ({a: 'b' ، c: true}) ؛ $ location.absurl () == 'http://host.com/base/index.html# !/new؟x=y' ؛تزحف تطبيقك (يسمح لـ Google بفهرسة تطبيقنا)
إذا أردنا فهرسة تطبيق Ajax الخاص بنا ، نحتاج إلى إضافة علامة ميتا خاصة إلى الرأس:
<meta name = "fragment" content = "!" />
سيسمح للقيام بذلك لروبوت الزاحف بطلب الرابط الحالي باستخدام المعلمة _escaped_fragment_ ، وأعلم خادمنا روبوت الزاحف ، وتوفير لقطة HTML المقابلة. لمزيد من المعلومات حول هذه التكنولوجيا ، يرجى زيارة https://developers.google.com/webmasters/ajax-crawling/docs/specific
4. وضع HTML5
في وضع HTML5 ، يتفاعل Getters و Setters لخدمة موقع $ مع عنوان URL للمتصفح من خلال واجهة برمجة تطبيقات HTML5 ، مما يسمح باستخدام وحدات المسار والبحث العادية لاستبدال وضع Hashbang. إذا كانت بعض المتصفحات لا تدعم واجهة برمجة تطبيقات HTML5 History ، فستعود خدمة موقع $ تلقائيًا إلى الوضع باستخدام عنوان URL HashBang. للسماح لنا بالتخلص من المخاوف من أنه من غير الواضح ما إذا كان المتصفح الذي يوضح تطبيقنا يدعم واجهة برمجة تطبيقات التاريخ ، فإن استخدام خدمة موقع $ هو الخيار المناسب والأفضل.
سيتم تحويل عنوان URL العادي في متصفح أقدم إلى Hashbangurl.
سيتم إعادة كتابة عنوان URL للهاشبانج في متصفح حديث بعنوان URL العادي.
1. التوافق إلى الأمام مع المتصفحات القديمة
بالنسبة للمتصفحات التي تدعم HTML5 History API ، يعود موقع $ إلى كتابة المسار والبحث. إذا لم يدعم المتصفح واجهة برمجة تطبيقات History ، فسيتم تحويل موقع $ لتوفير عنوان URL Hashbang. يتم تحويل هذا تلقائيًا بواسطة خدمة موقع $.
2. إعادة كتابة رابط HTML
عندما نستخدم وضع API History ، نحتاج إلى روابط مختلفة لمتصفحات مختلفة ، لكننا نحتاج فقط إلى توفير عنوان URL منتظم ، على سبيل المثال <a href = "/some؟ foo = bar"> </a>
عندما ينقر المستخدم على هذا الارتباط التشعبي:
في المتصفح القديم ، سيتم تغيير عنوان URL إلى /index.html# !/some؟foo=bar
في المتصفحات الحديثة ، سيتم تغيير عنوان URL إلى /بعض؟ foo = bar
في الحالة التالية ، لن يتم إعادة كتابة الرابط ، ولكن سيؤدي إلى تحميل الصفحة في عنوان URL المقابل:
الارتباط التشعبي الذي يحتوي على الهدف: <a href = "/ext/link؟ a = b" target = "_ self"> link </a>
الرابط المطلق لمجالات مختلفة: <a href = "http://angularjs.org/"> الرابط </a>
بعد تعيين المسار الأساسي ، استخدم الرابط الذي يبدأ بـ "/" إلى الارتباطات التشعبية للمسارات الأساسية المختلفة: <a href = "/not-my-base/link"> الرابط </a>
3. جانب الخادم
باستخدام هذه الطريقة ، وطلب إعادة توجيه عنوان URL على الخادم ، عادة ما نحتاج إلى إعادة توجيه جميع روابطنا إلى تطبيقنا. (على سبيل المثال ، index.html).
4. زحف تطبيقك
نفسه كما كان من قبل
5. الروابط النسبية
تأكد من التحقق من جميع الروابط النسبية ، والصور ، والبرامج النصية ، وما إلى ذلك ، علينا تحديد عنوان URL الأساسي (<base href = " /my-base">) في <head> واستخدام عنوان URL المطلق (بدءًا من /) في كل مكان. لأنه سيتم تحويل عنوان URL النسبي إلى عنوان URL مطلقًا استنادًا إلى المسار الأولي للوثيقة (عادة ما يكون مختلفًا عن جذر التطبيق). (سيتم حل عناوين URL النسبية إلى عناوين URL المطلقة باستخدام عنوان URL المطلق الأولي للوثيقة ، والتي تختلف غالبًا عن جذر التطبيق).
نشجعنا للغاية على تشغيل التطبيقات الزاوية التي تسمح لـ History API في جذر المستند ، لأن هذا يأخذ في الاعتبار مشكلات الارتباط النسبية بشكل جيد.
6. إرسال روابط بين المتصفحات المختلفة
(هذا يفسر أنه يمكن تكييف عناوين الوضعين مع متصفحات مختلفة ، وتحويلها تلقائيًا وتكرارها مرة أخرى ...)
7. مثال
في هذا المثال ، يمكنك رؤية حالتين لموقع $ ، وكلاهما هو وضع HTML5 ، ولكن في متصفحات مختلفة ، حتى نتمكن من رؤية الاختلافات بين الاثنين. يتم توصيل خدمات المواقع $ هذه بـ "متصفحات" مزيفة. يمثل كل إدخال شريط عناوين المتصفح.
لاحظ أنه عندما ندخل عنوان Hashbang إلى "المتصفح" الأول (أو الثاني؟) ، فإنه لن يعيد كتابة عنوان URL أو إعادة توجيهه ، وستتحدث عملية التحويل هذه فقط عند إعادة تحميل الصفحة.
<! doctype html> <html ng-app> <head> <base href = ""/> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> hape-brower </title> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> <viv ng-non-bindable> <div id = "html5-mode" ng-controller = "html5cntl"> <h4> browser with history api </h4> <div ng-address browser = "html5" {{$ location.protocol ()}}} <br> $ location.host () = {{$ location.host ()}} <br> $ location.port () = {$ location.port ()}} <br> $ location.path () = {{$ location.path ()}}}} {{دولار الموقع <a href = "http://www.host.com/base/sec/ond؟flag#hash"> sec/ond؟ flag#hash </a> | <a href = "/other-base/other؟ search"> خارجي </a> </div> <div id = "hashbang-mode" ng-controller = "hashbangcntl"> <h4> browser بدون api history </h4> <div ng-address-barrower = "hashbang"> {{$ location.protocol ()}}} <br> $ location.host () = {{$ location.host ()}} <br> $ location.port () = {$ location.port ()}} <br> $ location.path () = {{$ location.path ()}}}} {{دولار الموقع <a href = "http://www.host.com/base/sec/ond؟flag#hash"> sec/ond؟ flag#hash </a> | <a href = "/other-base/other؟ search"> خارجي </a> </div> </viv> <script src = "../ angular.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> functionbrowser (initurl ، basehref) { fn ؛ } ؛ this.url = function () {return initurl ؛ } ؛ this.defer = function (fn ، delay) {setTimeOut (function () {fn () ؛} ، delay || 0) ؛ } ؛ this.basehref = function () {return basehref ؛ } ؛ this.notifywhenoutseSterRequests = Angular.noop ؛ } var browsers = {html5: new Goperbrowser ('http://www.host.com/base/path؟a=b#h' ، '/base/index.html') ، Hashbang: New Gopybrowser ('http://www.host.com/base/index.html. '/base/index.html')} ؛ دالة html5cntl (scope $ ، $ location) {$ scope. $ location = $ location ؛ } وظيفة HashBangcntl (Scope $ ، $ location) {$ Scope. $ location = $ location ؛ } وظيفة initenv (name) {var root = Angular.Element (document.getElementById (name + '-mode')) ؛ angular.bootstrap (الجذر ، [الوظيفة ($ compileProvider ، $ locationprovider ، $ provider) {debugger ؛ $ locationprovider.html5mode (true) .hashprefix ('! {History: name == 'html5'}) ؛ keyup '، function () if (Delays) } ؛}) ؛ root.bind ('click' ، function (e) {E.StopPropagation () ؛}) ؛ } initenv ('html5') ؛ initenv ('hashbang') ؛ </script> </body> </html>خامسا تعليمات إضافية
1.
تتيح لنا خدمة موقع $ فقط تغيير عنوان URL ؛ لا يسمح لنا بإعادة تحميل الصفحة. عندما نحتاج إلى تغيير عنوان URL وإعادة تحميل الصفحة أو القفز إلى الصفحات الأخرى ، نحتاج إلى استخدام النقطة ذات المستوى المنخفض للحصول على API ، $ window.location.href.
2. باستخدام موقع $ خارج دورة الحياة النطاق
موقع $ يعرف دورة حياة Angular. عندما يتغير عنوان URL الخاص بالمتصفح ، يقوم بتحديث موقع $ ويتم تطبيق $ $ ، لذلك يتم إخطار جميع المراقبين $ و $ Observer. عندما نقوم بتعديل موقع $ في مرحلة $ Digest ، لن تكون هناك مشكلة ؛ سيقوم موقع $ بنشر هذا التعديل إلى المتصفح وإخطار جميع المراقبين $ و $ Observer. عندما نحتاج إلى تغيير موقع $ خارج Angular (على سبيل المثال في أحداث DOM أو في الاختبارات) ، يتعين علينا استدعاء $ تنطبق لنشر هذا التغيير.
3. $ location.path () و! أو / البادئات
يمكن بدء المسار مباشرة مع "/" ؛ سيتم ملء $ location.path () setter تلقائيًا عندما لا تبدأ القيمة بـ "/".
لاحظ "!" البادئة ، في وضع Hashbang ، لا تنتمي إلى جزء من $ location.path (). انها مجرد hashprefix.
6. الاختبار مع خدمة موقع $
عند استخدام خدمة موقع $ في الاختبار ، تكون خارج دورة حياة النطاق الزاوي. هذا يعني أننا بحاجة إلى أن نكون مسؤولين عن الاتصال. apply ().
وصف ('serviceNderTest' ، function () {isheach (module (function ($ proved) {$ prove.factory ('serviceNderTest' ، function ($ location) {// isher ...}) ؛} ؛ يجب أن تفعل الخدمة ...})) ؛}) ؛7. الهجرة من إصدارات AngularJS السابقة
في وقت مبكر من الزاوي ، استخدم موقع HashSpath أو hashSearch لمعالجة طرق المسار والبحث. في هذا الإصدار ، عند الضرورة ، تقوم خدمة موقع $ بمعالجة طرق المسار والبحث ، ثم تستخدم المعلومات التي تم الحصول عليها لتشكيل عنوان URL HashBang (على سبيل المثال ، http://server.com/# !/path؟search=A).
8. في اتجاهين ملزمة لموقع $
لا يدعم برنامج التحويل البرمجي Angular حاليًا الربط ثنائي الاتجاه للطرق (https://github.com/angular/angular.js/issues/404). إذا كنا نريد تنفيذ ارتباط ثنائي الاتجاه لكائن موقع $ (باستخدام توجيه NGMODEL في الإدخال) ، نحتاج إلى تحديد خاصية نموذج إضافية (على سبيل المثال: موقع POTTARD) ، وإضافة ساعتين $ للاستماع إلى تحديثات موقع $ في كلا الاتجاهين ، على سبيل المثال:
<type type = "text" ng-model = "locationpath" />
// js - controller $ scope. $ watch ('locationpath' ، function (path) {$ location.path (path) ؛) ؛ $ scope. $ watch ('$ location.path ()' ، function (path) {scope.locationPath = path ؛}) ؛ما سبق هو المعلومات حول AngularJS باستخدام موقع $. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!