AngularJS and Spring MVC Project remove '#!'
I'm working on a project Using AngularJS as front-end and Spring MVC as back-end. Also I used plugin ui-router . The base url looks like localhost:8080/PROJECT_NAME/#! For a better looking I'm trying to remove the /#!/ from url.
I failed to get a correct result from the common solution from internet:
// Insert this into Angularjs module config file
$locationProvider.html5Mode(true);
// Add this into META tag
<base href="/">
After doing this what I got is all resources crashed, so I added my project name:
<base href="PROJECT_NAME">
Resources are correctly fetched, however, the log shows:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
(anonymous function) @ angular.js:68
(anonymous function) @ angular.js:4756
forEach @ angular.js:357
loadModules @ angular.js:4717
createInjector @ angular.js:4639
doBootstrap @ angular.js:1838
angular.resumeBootstrap @ angular.js:1867
maybeBootstrap @ hint.js:569
I don't know what to do next, may need your help, thanks!
Router code:
app.config(
function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state('index', {
url: "/",
templateUrl: "homeview"
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
}
);
[1] Set html5Mode as true using below mentioned code,
.config(["$locationProvider", function($locationProvider) {
$locationProvider.hashPrefix('');
$locationProvider.html5Mode(true);
}])
[2] Set base url in index.html as follows,
<base href="/" />
[3] Create a controller to redirect urls to the index file
@RequestMapping(value = "/{[path:[^.]*}")
public String stalklist() {
return "forward:/";
}
That # notifies the AngularJS that there is no need to go to the server for that url instead go to ng-router .
So ideally you should not remove that.
使用$ locationProvider模块并将html5Mode设置为true。
angular.module('StudentView', []).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/student', {templateUrl: 'partials/studentList.html', controller: StudentListCtrl}).
when('/student/:studentId', {templateUrl: 'partials/studentDetail.html', controller: StudentDetailCtrl}).
otherwise({redirectTo: '/phones'});
$locationProvider.html5Mode(true);
}]);