به صورت پیش فرض، زمانی که از قابلیت routing در angular js استفاده می کنیم، angular آدرس ها را به همراه کارکتر # ایجاد می کند. برای مثال:
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
- http://site.com/#/home
- http://site.com/#/about
- http://site.com/#/contact
برای حذف کاراکتر # از آدرس ها، دو کار خیلی ساده را باید انجام دهیم.
- انجام تنظیمات برای $locationProvider
- تنظیم base برای relative url ها در کد html
برای تنظیمات $locationProvider باید html5Mode را برابر true قرار دهیم. نمونه زیر تنظیمات مربوط به route در angular می باشد:
var productsApp = angular.module('productsApp', ['ngRoute']);
productsApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
pageTitle: 'Home Page',
templateUrl: 'app_core/products/views/home.html',
controller: 'homeController'
})
.when('/contact', {
pageTitle: 'Contact Page',
templateUrl: 'app_core/products/views/contact.html',
controller: 'contactController'
})
.when('/about', {
pageTitle: 'About Page',
templateUrl: 'app_core/products/views/about.html',
controller: 'aboutController'
});
$locationProvider.html5Mode(true);
});
در قدم بعدی، تگ زیر را به بخش head صفحه html اضافه می کنیم:
<base href="/"/>
با انجام این کار، آدرس های ایجاد شده توسط angular js routing به صورت زیر خواهد بود:
- http://site.com/home
- http://site.com/about
- http://site.com/contact
نکته مهمی که باید به آن توجه داشت، این قابلیت تنها در مرورگرهایی که از HTML5 پشتیبانی می کنند کار خواهد کرد. در صورتی عدم پشتیبانی از HTML5، آدرس ها با کاراکتر # ایجاد خواهند شد.