داشتن URL تمیز در AngularJS – حذف هشتگ

داشتن URL تمیز در AngularJS – حذف هشتگ

بطور پیشفرض AngularJS به مسیرهای (route) برنامه همانند زیر هشتگ اضافه می کند:

  • http://example.com
  • http://example.com/#/about
  • http://example.com/#/contact

داشتن URL ساده و تمیز بسیار خود است! حذف هشتگ از URL بسیار آسان است تنها دو چیز نیاز دارید تا انجام دهید:

  1. پیکربندی locationProvider$
  2. تنظیم لینک های relative

location Service$

در آنگولار سرویس location$ آدرس (URL) را تجزیه و تحلیل می کند و تغییراتی را در برنامه اعمال می کند و بر عکس.

پیشنهاد می شود مستندات Angular $location را مطالعه کنید تا با سرویس location$ بیشتر آشنا شوید.

 

locationProvider & html5Mode$

در ادامه ما از ماژول locationProvider$ استفاده می کنیم و مقدار true را به html5Mode اختصاص می دهیم.

این کار را هنگامی انجام می دهیم که برنامه Angular را تعریف کرده و route برنامه را نیز تنظیم کرده باشیم.

HTML5 History API چیست؟ یک روش استاندارد برای دستکاری history مرورگر از طریق اسکریپت است. این به آنگولار اجازه می دهد که route و URL صفحه ما بدون رفرش شدن صفحه صورت گیرد. برای اطلاعات بیشتر در این رابطه مقاله HTML5 History API Article را مطالعه کنید.

پیکربندی برای لینکهای Relative

برای لینک نمودن برنامه با استفاده از لینک های relative نیاز است که از تگ <base> در داخل تگ <head> در سند خود استفاده کنید.

روش های مختلفی برای پیکربندی این مورد و حل لینک های relative با استفاده از اختصاص دادن مقدار true به بطور خودکار به حالت HTML5 وجود دارد. این تنها برای من کار می کند. اگر ریشه برنامه شما متفاوت است می توانید آن را ویرایش کنید (به عنوان مثال my-base/).

 

در نتیجه

این یک روش ساده برای حذف # از URL برنامه Angular است. از این راه لذت ببرید و برنامه های تمیز و سریع درست کنید!


 

  • تو React هم میشه با تنظیم hisrory روی browserHistory آدرس های تر و تمیز درست کرد.
    البته بهتره سمت سرور هم یه route برای اون آدرس تعریف کنیم، تا اگه کاربر صفحه رو دستی refresh کرد سرور براش پیغام خطا نفرسته.