AngularJS и Spring MVC Project удаляют '#!'
Я работаю над проектом, использующим AngularJS в качестве внешнего интерфейса и Spring MVC в качестве внутреннего. Также я использовал плагин ui-router
, Основной URL выглядит как localhost:8080/PROJECT_NAME/#!
Для лучшего вида я пытаюсь убрать /#!/
с URL
Мне не удалось получить правильный результат из общего решения из Интернета:
// Insert this into Angularjs module config file
$locationProvider.html5Mode(true);
// Add this into META tag
<base href="/">
После этого все ресурсы рухнули, поэтому я добавил название своего проекта:
<base href="PROJECT_NAME">
Ресурсы правильно выбраны, однако, журнал показывает:
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
Я не знаю, что делать дальше, может понадобиться твоя помощь, спасибо!
Код маршрутизатора:
app.config(
function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state('index', {
url: "/",
templateUrl: "homeview"
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
}
);
3 ответа
[1] Установите html5Mode как true, используя приведенный ниже код,
.config(["$locationProvider", function($locationProvider) {
$locationProvider.hashPrefix('');
$locationProvider.html5Mode(true);
}])
[2] Установите базовый URL в index.html следующим образом:
<base href="/" />
[3] Создать контроллер для перенаправления URL-адресов в индексный файл
@RequestMapping(value = "/{[path:[^\\.]*}")
public String stalklist() {
return "forward:/";
}
Тот #
уведомляет AngularJS о том, что нет необходимости переходить на сервер для этого URL, вместо этого перейдите на ng-router
,
Так что в идеале вы не должны удалять это.
Используйте модуль $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);
}]);