如何从 angularjs ng-route 中删除散列#

Question

我正在尝试使用 locationProvider 从 angular 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
})

我收到以下错误（已更改为 angular 完整版以获得对错误的更好解释而不是缩小版本）

Error: [$location:nobase] $location in HTML5 mode requires a <base> tag to be present!

http://errors.angularjs.org/1.3.13/$location/nobase

Answer 1

您可以像这样使用 $locationProvider -

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

或者，您可以在 index.html 中使用基本标签（我想这是您的着陆页）

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

删除 base 标签可能会在旧的 IE 浏览器（如 IE9）中产生一些副作用

Answer 2

您的依赖项数组中多了一个逗号。您可以删除逗号并在您拥有的 html 的头部部分包含基本标签，您可以很好地删除主题标签

<base href="/">

你的依赖数组：

var eclassApp = angular.module('eclassApp', ['ngRoute', 'eclassControllers'] );

Answer 3

从 URL 中删除 # 的步骤：

在 angular 根模块的 config() 函数中注入 $locationProvider 并将 html5Mode() 设置为 true

angular.module( 'app', [ ] ).config(function( $locationProvider) {
   $locationProvider.html5Mode(true);
});

在应用程序第一个加载页面的头部部分包含 base 标记..

Answer 4

Step1: 在angular根的config()函数中注入$locationProvider 模块并将 html5Mode() 设置为 true，语法在 angular 1.3 上发生变化版本。
```
$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});
```
Step2: 在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>

Answer 5

我知道这已经一年了，但直到今天，我仍然没有找到一个简洁而完整的解决方案。都是网上几个答案的零零碎碎，所以我将在这里详细解释它，希望它能成为其他访问者可以获得一个完整答案的地方。 *我会附加到答案，但这太长了。那么，让我们开始吧。

首先你需要下载 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 window。（当时我通常有 4 运行ning。1-服务器，2-Gulp 用于 BrowserSync，3-MongoDB，4-下载我可能需要的任何依赖项).因此，转到您的 CMD 并对运行您的服务器执行此操作并将其最小化
```
node server.js
```
现在，您可以自由前往 localhost:3006 并像在已经为您配置好的实时服务器中一样导航。

Answer 6

试试这一行：

$locationProvider.hashPrefix('!').html5Mode(true);

在此行之前：

$routeProvider.

Answer 7

在 Angular 1.6.1 版本上测试：

需要 3 个步骤才能从 URL 中删除主题标签 (#)。

第 1 步：通过配置在 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 的头部提供一个基础 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 应用程序：从其他 Whosebug 帖子，您应该启用 url-rewrite 模块。从 Apache 版本 2.2+ 开始，这可以通过使用命令来实现：FallbackResource。示例代码：在 Apache 服务器的根目录下创建一个 .htaccess 文件。添加以下命令并重新启动服务器。提供相对路径 index.html 来处理由于 angular-路由功能引起的 404 错误。这应该解决 refresh/accessing deep-url 和所有 404 错误。

FallbackResource /demo/sub-directory/index.html

如何从 angularjs ng-route 中删除散列#

How to remove the hash # from the angularjs ng-route

javascript

angularjs

angular-routing