如何從angularjs ng-route中刪除hash＃
[英]How to remove the hash # from the angularjs ng-route
問題描述
我試圖使用locationProvider從角度js中的url路由中刪除主題標簽，但它給了我錯誤。
app.js
var eclassApp = angular.module('eclassApp',
['ngRoute', 'eclassControllers', ]
);
eclassApp.config(['$routeProvider','$locationProvider',
function ($routeProvider, $locationProvider){
$routeProvider.
when('/',{
templateUrl: '/html/student-list.html',
controller: 'StudentsListCtrl',
}).
when('/students/:studentId',{
templateUrl: '/html/student-details.html',
controller: 'StudentDetailsCtrl',
}).otherwise({
redirectTo: '/students'
});
$locationProvider.htmlMode(true);
}]
);
錯誤：
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.13/$injector/modulerr?p0=eclassApp&p1=TypeE…oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.13%2Fangular.min.js%3A17%3A1)
我錯過了什么嗎？
編輯：用這樣的選項對象調用html5Mode函數
$locationProvider.html5Mode({
enabled:true
})
我得到以下錯誤（更改為角度已滿，以獲得更好的錯誤解釋而不是縮小版本）
Error: [$location:nobase] $location in HTML5 mode requires a <base> tag to be present!
7 個解決方案
解決方案1
44 已采納 2015-02-20 13:21:07
你可以像這樣使用$ locationProvider -
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
或者，您可以在index.html中使用基本標記（我想這是您的目標網頁）
<head>
<base href="/">
</head>
刪除基本標記可能會在IE9等舊IE瀏覽器中造成一些副作用
解決方案2
4 2015-09-06 15:03:54
從URL中刪除＃的步驟：
在angular root模塊的config（）函數中注入$ locationProvider並將html5Mode（）設置為true
angular.module( 'app', [ ] ).config(function( $locationProvider) { $locationProvider.html5Mode(true); });在應用程序的第一個加載頁面的頭部分中包含基本標記。
解決方案3
1 2015-02-20 13:24:49
您擁有依賴項數組中的額外逗號。 您可以刪除逗號以及在您擁有的html的head部分中包含基本標記，並且您可以刪除主題標簽
<base href="/">
你的依賴數組：
var eclassApp = angular.module('eclassApp', ['ngRoute', 'eclassControllers'] );
解決方案4
1 2016-11-06 05:27:41
我知道這已經有一年了，但到目前為止，我還沒有找到一個簡潔而完整的解決方案。 這是網上幾個答案的所有點點滴滴，所以我將在這里詳細解釋它，希望它可以是其他訪客可以得到一個完整答案的地方。 *我會附加答案，但這樣做太長了。 那么，讓我們開始吧。
首先，您需要下載ngRoute或angular-ui-router。 我選擇后者因為它已經包含了ngRoute中的所有內容，它仍然具有更多功能。 那為什么不呢？
轉到您的CMD並輸入
npm install --save angular-ui-router現在轉到你的app.js文件並寫下你的路線
var app = angular.module('ngCribs', ['ui.bootstrap', 'ui.router']); app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) { // Application routes $stateProvider .state('index', { url: '/', templateUrl: 'views/partials/home.html' }) .state('listings', { url: '/listings', templateUrl: 'views/partials/listings-list.html' }); // For unmatched routes $urlRouterProvider.otherwise('/'); $locationProvider.html5Mode(true); }]);下一步，您需要轉到
<head>並添加基目錄<base href="/"> </base>到現在為止，您不應該再使用＃標簽， 但如果您轉到
/以外的任何頁面並重新加載它，則會出現錯誤並且頁面無法加載。 您需要告訴服務器如何處理路徑和基目錄。 因此，為了解決這個難題，你需要一台服務器而我更喜歡Express，但你可以在那里使用其他人。 我推薦Express，因為在某些時候你需要參與MEAN堆棧並猜測是什么？ 除了Mongo，你已經在使用Angular和Node了，那么為什么不加入Express呢？！ 再次轉到您的CMD並執行此操作：$ npm install express --save現在您已經安裝了服務器，您必須創建一個
server.js文件並將其放在目錄的基礎中並將以下內容放入其中。 *確保您的文件夾路徑與您的目錄匹配，以便找到它們。var express = require('express'); var server = express(); server.use(express.static(__dirname + '/')); server.set('views', __dirname + 'views'); server.set('js', __dirname + 'js'); server.set('css', __dirname + 'css'); server.get('/', function(req, res){ res.render('index.ejs'); }); server.all('/*', function(req, res, next) { // Just send the index.html for other files to support HTML5Mode res.sendFile('index.html', { root: __dirname }); }); //the port you want to use var port = 3006; server.listen(port, function(){ console.log('server listening on port' + port) });還沒做完。 一旦您嘗試在端口3006上運行服務器，您將收到錯誤。 返回CMD並輸入：
npm install ejs --save你完成了，現在你只需要運行你的服務器並保持打開狀態。 因此，從這一點開始，您需要在CMD中執行任何操作，您將需要第二個CMD窗口。 （我通常有4個運行時間.1個服務器，2個Gulp用於BrowserSync，3個MongoDB，4個 - 下載我可能需要的任何依賴項）。 因此，請轉到您的CMD並執行此操作以運行您的服務器並將其最小化
node server.js現在，您可以自由地轉到
localhost:3006並進行導航，就像您在已經為您配置的實時服務器中一樣。
解決方案5
0 2015-12-18 16:27:46
Step1 ：在angular root模塊的
config()函數中注入$locationProvider並將html5Mode()設置為true，語法在angular 1.3版本上更改。$locationProvider.html5Mode({ enabled: true, requireBase: false });第2步 ：在
web.config上添加以下設置
<system.webServer>
<rewrite>
<rules>
<clear />
<rule name="AngularJS" enabled=true stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_FILENAME}" pattern"^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
解決方案6
0 2016-12-08 01:42:53
試試這一行：
$locationProvider.hashPrefix('!').html5Mode(true);
在此之前：
$routeProvider.
解決方案7
0 2017-06-05 22:04:20
在Angular 1.6.1版本上測試：
從URL中刪除＃標簽需要3個步驟。
第1步：通過Config在locationProvider上啟用html5mode。 示例代碼：
app.config(function($locationProvider, $routeProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/', {templateUrl: 'partials/home.html'}).when('/info', {templateUrl: 'partials/info.html'});
});
第2步：在index.html的head部分提供base href屬性。 這應該放在所有腳本和CSS標記之上。 href屬性定義項目的相對路徑。 示例代碼： base href="/demo/" 。 我的演示應用程序位於Apache Web服務器的根目錄中。 如果您的應用程序是子目錄，請使用： base href="/demo/sub-directory/"或base href="http://localhost/demo/sub-directory/"
第3步：如果您在Apache服務器（Wamp，Mamp等）上運行此AngularJS應用程序：從其他StackOverflow帖子中，您應該啟用url-rewrite模塊。 從Apache 2.2版開始，可以使用命令： FallbackResource來實現。 示例代碼：在Apache服務器的根目錄下創建.htaccess文件。 添加以下命令並重新啟動服務器。 提供相對路徑index.html ，它處理由於角度路由功能引起的404錯誤。 這應該解決刷新/訪問deep-url和所有404錯誤。
FallbackResource /demo/sub-directory/index.html
ng-route [如何]
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.