Javascript 如何从angularjs ng路由中删除散列

我试图使用locationProvider从angular js中的url路由中删除hashtag，但它给了我一个错误

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
})

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);

}]);

我得到以下错误（更改为“角度完全”，以便更好地解释缩小版的错误istead）

错误：[$location:nobase]$location在HTML5模式下需要一个标记！

---

您可以像这样使用$locationProvider-

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

或者，您可以在index.html中使用base标记（我想这是您的登录页）

---

删除基本标记可能会在旧IE浏览器（如IE9）中产生一些副作用。在依赖项数组中有一个额外的逗号。您可以删除逗号，也可以在html的头部分中包含基本标记，您可以很好地删除hashtags

<base href="/">

从URL中删除#的步骤：

在角根模块的config（）函数中注入$locationProvider，并将html5Mode（）设置为true

在应用程序的第一个加载页面的标题部分包括基本标签

• 步骤1：在角度根的

  config（）

  函数中插入

  $locationProvider

  模块并将

  html5Mode（）

  设置为true，语法在

  angular 1.3上更改
  版本
  
  

• 步骤2：在

  web.config

---

---

我知道这已经有一年了，但我至今还没有找到一个简洁完整的解决方案。这些都是网络上的一些答案中的零碎部分，所以我将在这里详细解释，希望它能成为其他访问者获得完整答案的地方*我想在答案后面加上，但这太长了。那么，让我们开始吧

首先，您需要下载ngRoute或angular ui路由器。我选择后者是因为它已经包含了ngRoute中的所有内容，而且它还有更多的功能。那为什么不呢

转到CMD并键入此命令

npm install --save angular-ui-router

现在转到你的app.js文件，像这样写你的路线

$locationProvider.html5Mode({
    enabled:true
})

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);

}]);

对于下一步，您需要转到

并添加基本目录

<base href="/"> </base>

现在已经安装了服务器，您必须创建一个

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台浏览器同步，3台MongoDB，4台下载我可能需要的任何依赖项）。因此，转到CMD并执行此操作以运行服务器并将其最小化

node server.js

现在，您可以自由地转到

localhost:3006

并导航，就像您在一个已为您配置的实时服务器中一样

试试这句话：

$locationProvider.hashPrefix（“！”）.html5Mode（true）

在这一行之前：

$routeProvider。
在Angular 1.6.1版本上测试：

从URL中删除hashtag（#）需要3个步骤

步骤1：通过配置在locationProvider上启用HTML5模式。示例代码：

app.config(function($locationProvider, $routeProvider){
            $locationProvider.html5Mode(true);
            $routeProvider.when('/', {templateUrl: 'partials/home.html'}).when('/info', {templateUrl: 'partials/info.html'});
        });

步骤2：在
index.html
的头部分提供一个base
href
属性。这应该放在所有脚本和CSS标记的顶部。
href
属性定义项目的相对路径。示例代码：
base href=“/demo/”
。我的演示应用程序位于ApacheWeb服务器的根目录上。如果您的应用程序是一个子目录，请使用：
base href=“/demo/sub-directory/”
或
base href=”http://localhost/demo/sub-directory/“

步骤3：如果您正在Apache服务器上运行这个AngularJS应用程序（Wamp、Mamp等）：从其他StackOverflow帖子中，您应该启用
url重写
模块。从Apache版本2.2+开始，这可以通过以下命令实现：
FallbackResource
。示例代码：在Apache服务器的根目录上创建一个
.htaccess
文件。添加以下命令并重新启动服务器。提供相对路径
index.html
，用于处理由于角度路由功能而导致的404错误。这将解决刷新/访问深度url和所有404错误

FallbackResource /demo/sub-directory/index.html

不要将hashtag（搜索链接的标识符）与URL中的片段标识符混淆。他们唯一的共同点就是使用了散列字符。我认为这篇文章可以帮助你使用@Quentin yes true…我使用散列字符。是的，我理解。但我不能理解基本URL和相对URL。我的html文件在html文件夹中，所以它是。我想我必须像这样设置基本标记，因为当我将href设置为“/”时，它将不起作用。我必须在应用程序配置中将第一个url设置为“/html”。你能解释一下基地是如何运作的吗？我想我已经明白了！！在从角度路由1.2.x升级到1.3.13时，受到了这一新要求的冲击。选择了你的第二个解决方案。是的，python也为我这样做，问题解决了吗？是的，谢谢。现在我有另一个关于angular中url路由的问题，我将为其打开一个单独的问题：）
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)
});

npm install ejs --save

node server.js

app.config(function($locationProvider, $routeProvider){
            $locationProvider.html5Mode(true);
            $routeProvider.when('/', {templateUrl: 'partials/home.html'}).when('/info', {templateUrl: 'partials/info.html'});
        });

FallbackResource /demo/sub-directory/index.html