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.

 $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

Bài đăng phổ biến từ blog này

Upload và remove hình ảnh trong laravel

Chuyển đổi HTML sang PDF sử dụng Javascript

Mã hóa dữ liệu trong Database