Removing # from url in Angularjs while having .run in routes
Why do you want to use the .run() ? Add <base href="/" /> to you <head> or start of your body (first line) and then to match the logic of your .run() try this ( .otherwise("/path") to your $routeProvider):
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $routeProvider. when('/login', { title: 'Login', templateUrl: 'resources/views/layouts/loginUser.php', controller: 'authCtrl' }) .when('/', { title: 'Login', templateUrl: 'resources/views/layout/login.php', controller: 'logoutCtrl' }) .when('/reset', { title: 'Reset Password', templateUrl: 'resources/views/layouts/forgetPassword.php', controller: 'authCtrl' }) .when('/invalidtoken', { title: 'Login', templateUrl: 'resources/views/layout/invalidtoken.php', controller: 'authCtrl', role: '0' }). otherwise("/"); $locationProvider.html5Mode(true); }]);If you still face issues, I recommend https://github.com/angular-ui/ui-router
Update:
your index.html
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Green Hopping</title> <link rel="shotcut icon" type="favicon.ico" href="public/images/favicon.ico" /> <link rel="icon" type="favicon.ico" href="public/images/favicon.ico" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <script src="https://code.angularjs.org/1.4.2/angular-route.min.js"></script> </head> <body ng-cloak=""> <base href="/"> <div data-ng-view="" id="ng-view" class="slide-animation"></div> </body> <script> var app = angular.module('myApp', ['ngRoute']); app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $routeProvider. when('/', { title: 'Home', templateUrl: 'home.html', controller: 'homeCtrl' }) .when('/login', { title: 'Login', templateUrl: 'login.html', controller: 'authCtrl' }) .when('/logout', { title: 'Logout', templateUrl: 'logout.html', controller: 'logoutCtrl' }) .when('/dashboard', { title: 'Dashboard', templateUrl: 'dashboard.html', controller: 'dashboardCtrl' }) .otherwise('/'); $locationProvider.html5Mode(true); }]) .run(function ($rootScope, $location, $http, loginSrv) { $rootScope.$on("$routeChangeStart", function (event, next, current) { var nextUrl = next.$$route.originalPath; var orUseUrl = $location.path(); console.log(nextUrl); if (nextUrl === '/logout'){loginSrv.logout();} if (nextUrl === '/login'){loginSrv.login();} if (loginSrv.loggedin === false) { $location.path('/'); } else { $location.path(nextUrl); } }); }); app.service("loginSrv",function(){ var ls= this; ls.loggedin = false; ls.logout = function(){ ls.loggedin = false; } ls.login = function(){ ls.loggedin = true; } }); app.controller("homeCtrl",function($scope, loginSrv){ $scope.loggedin = loginSrv.loggedin; }) app.controller("dashboardCtrl",function($scope, loginSrv){ $scope.loggedin = loginSrv.loggedin; }) app.controller("authCtrl",function($scope, loginSrv){ $scope.loggedin = loginSrv.loggedin; }) app.controller("logoutCtrl",function($scope, loginSrv){ $scope.loggedin = loginSrv.loggedin; }) </script></html>All other templates are same like this. Copy paste the following for home.html , login.html , dashboard.html , logout.html . Plunker will not be able to show issues with routes for client side. Try this. This is completely functional code.
<div> <div><a href="/">Home</a> | <a href="/login">Login</a> | <a href="/dashboard">Dashboard</a> | <a href="/logout">Logout</a></div> <div> This is from the home/login/dashboard/logout Controller. Loggedin: {{loggedin}}</div></div>
try changing:
$locationProvider.html5Mode(true);To:
$locationProvider.html5Mode({ enabled: true, requireBase: false});
You can't inject $locationProvider in .run because providers are only available for .config
This answer should help but you will have 2 issues:
You will need a check before
$locationProvider.html5Mode(true)as it will not work on IE 10 or older.if(window.history && window.history.pushState){ $locationProvider.html5Mode(true);}This will work only by removing the
#when the user enters it in the url, i.e. if the users typesapp/#/loginit will change toapp/login. However, if the user bookmarks or copies the changed urlapp/loginand enters that in the browser he will get an error as the server does not know about angular routing since it is client side only. In the thread I linked above you may find some comments on how to fix this.