Вот мой файл файла app.js в AngularJS
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']); app.config(['$routeProvider', function ($routeProvider) { $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' }) //$locationProvider.html5Mode(true); }]) .run(function ($rootScope, $location, Data, $http) { $rootScope.$on("$routeChangeStart", function (event, next, current) { var nextUrl = next.$$route.originalPath; if (nextUrl == '/signin' || nextUrl == '/login' || nextUrl == '/verify' || nextUrl == '/register' || nextUrl == '/registered' || nextUrl == '/reset' || nextUrl == '/resetdone' || nextUrl == '/registersuccess') { $location.path(nextUrl); } else { $location.path('/'); } }); });
Здесь я использую .run для обработки нескольких запросов.
Я хочу удалить # из URL-адреса, чтобы сделать URL-адрес довольно,
Поэтому мне понравилось это, чтобы удалить #, как предложено здесь
app.config(['$routeProvider', '$locationProvider' function ($routeProvider, $locationProvider) {
и в последней строке
$locationProvider.html5Mode(true);
Но ничего не происходит с приложением, у него все еще есть # в URL-адресе.
Даже я пробовал этот путь
Как я могу достичь этого?
Обновить :
Если я сделаю
.run(function ($rootScope, $location, Data, $http, $locationProvider) {
и в последней строке
$locationProvider.html5Mode(true);
Я получаю эту ошибку
Error: $injector:unpr Unknown Provider
Я пробовал по-разному, но никто из них не работает.
Обновление 2:
Или может кто-нибудь предложить ссылку примера angularjs, которая предоставляет пример без # в url?
Почему вы хотите использовать .run() ? Добавьте <base href="/" /> к вам <head> или началу своего тела (первая строка), а затем в соответствии с логикой вашего .run () попробуйте это ( .otherwise("/path") для вашего $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); }]);
Если вы все еще сталкиваетесь с проблемами, я рекомендую https://github.com/angular-ui/ui-router
Обновить:
ваш 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>
Все остальные шаблоны такие же. Скопируйте вставьте следующие данные для home.html , login.html , dashboard.html , logout.html . Plunker не сможет отображать проблемы с маршрутами для клиентской стороны. Попробуй это. Это полностью функциональный код.
<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>
попробуйте изменить:
$locationProvider.html5Mode(true);
Для того, чтобы:
$locationProvider.html5Mode({ enabled: true, requireBase: false });
Вы не можете вводить $locationProvider в .run потому что поставщики доступны только для .config
Этот ответ должен помочь, но у вас будет 2 вопроса:
Вам понадобится проверка до $locationProvider.html5Mode(true) поскольку она не будет работать с IE 10 или старше.
if(window.history && window.history.pushState){ $locationProvider.html5Mode(true); }
Это будет работать только путем удаления # когда пользователь вводит его в URL-адрес, т. Е. Если пользователи будут использовать app/#/login оно изменится на app/login . Однако, если пользователь закладок или копирует измененное app/login url и входит в браузер, он получит сообщение об ошибке, поскольку сервер не знает об угловой маршрутизации, так как это только клиентская сторона. В потоке, который я связал выше, вы можете найти некоторые комментарии относительно того, как это исправить.
Проблема в том, что отсутствует инсталляция сервиса. Поэтому в разделе конфигурации попробуйте ввести $ locationProvider, как показано ниже.
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' }) $locationProvider.html5Mode(true); }])
Вы случайно получаете ошибку 404? Всякий раз, когда вы меняете режим на html5history, вы должны сообщать веб-серверу, что он всегда возвращает индексную страницу независимо от того, какой URL-адрес запрашивается. Как говорят угловые документы: https://docs.angularjs.org/guide/ $ location
Использование этого режима требует перезаписи URL-адресов на стороне сервера, в основном вы должны переписать все свои ссылки на точку входа вашего приложения (например, index.html). Требование
<base>также важно для этого случая, так как позволяет Angular различать часть URL-адреса, которая является базой приложения, и путь, который должен обрабатывать приложение.
Вы пытались это сделать и правильно настроили? Также помните, что вам нужно указать базовую запись href вашего приложения, чтобы она работала как
<base href="/" />
С html5mode вам нужно указать базовый url в вашем html-файле, например,
<base href="/">
Некоторые ссылки, которые вы можете пройти для справки,
https://docs.angularjs.org/error/ $ location / nobase
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
вам не удастся удалить хеш-банг (#) из href вручную, и это приводит к сбою в работе вашего маршрутизатора, потому что hashbangs позволяет браузеру не обрабатывать ваше состояние, чтобы отправить запрос на получение конечной точки. браузер не запускает запрос на получение над # / маршрутом, пока он выполняет over / route, если вы не используете провайдера url в режиме html5. Для режима html5 добавьте строку ниже в свою функцию app.config:
$locationProvider.html5Mode(true).hashPrefix('!')