Loại bỏ kí tự # trong AngularJS
Nếu bạn đã và đang lập trình với AngularJS. Chắc hẳn bạn sẽ thấy kí tự "#" trong toàn bộ các URL của mình. Mặc định trong AngularJS sẽ điều hướng các URL vs kí tự này.
Ví dụ:
http://localhost:8000/#/
http://localhost:8000/#/home
http://localhost:8000/#/login
Vô tình kí tự "#" làm cho các url của bạn ko được đẹp và nhìn cũng khá là "gai mắt".
Sau đây mình sẽ hướng dẫn các bạn cách loại bỏ kí tự "#" trong AngularJS.
Có 2 bước để thực hiện:
1. Cấu hình lại $locationProvider
Ở đây chúng ta sử dụng $locationProvider.html5Mode(true) sau khi đã định nghĩa và cấu hình các routes xong.
Bài viết có tham khảo tại: https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
Ví dụ:
http://localhost:8000/#/
http://localhost:8000/#/home
http://localhost:8000/#/login
Vô tình kí tự "#" làm cho các url của bạn ko được đẹp và nhìn cũng khá là "gai mắt".
Sau đây mình sẽ hướng dẫn các bạn cách loại bỏ kí tự "#" trong AngularJS.
Có 2 bước để thực hiện:
1. Cấu hình lại $locationProvider
Ở đây chúng ta sử dụng $locationProvider.html5Mode(true) sau khi đã định nghĩa và cấu hình các routes xong.
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'components/home/home.view.html',
controllerAs: 'vm'
})
.when('/login', {
controller: 'AuthController',
templateUrl: 'components/login/login.view.html',
controllerAs: 'vm'
})
.when('/register', {
controller: 'AuthController',
templateUrl: 'components/register/register.view.html',
controllerAs: 'vm'
})
.otherwise({ redirectTo: '/login' });
$locationProvider.html5Mode(true);
2. Cấu hình đường dẫn cho ứng dụng <!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
Ở đây vì đường dẫn trỏ tới website của mình đang là: http:/localhost:8000/ nên <base href="/">. Nếu website bạn có dạng: http://example.com/angular-tut/ thì lúc này bạn sẽ thiết lập <base href="/angular-tut/" >Bài viết có tham khảo tại: https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
Nhận xét
Đăng nhận xét