Question

我正在尝试使用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!

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

Answer 1

您可以像这样使用$ locationProvider -

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

或者，您可以在index.html中使用基本代码（我想这是您的目标网页）

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

删除基本标记可能会在旧IE浏览器中产生一些副作用，如IE9

Answer 2

从网址中删除＃的步骤：

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

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

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

Answer 3

您拥有依赖项数组中的额外逗号。您可以删除逗号以及在您拥有的html的head部分中包含基本标记，并且您可以删除主题标签

<base href="/">

您的依赖关系数组：

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

Answer 4

我知道这已经有一年了，但到目前为止，我还没有找到一个简洁而完整的解决方案。这是网上几个答案的所有点点滴滴，所以我将在这里详细解释它，希望它可以是其他访客可以得到一个完整答案的地方。 *我会附加答案，但这样做太长了。那么，让我们开始吧。

首先，您需要下载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>
```
到现在为止，您不应再使用＃strong> BUT 标签，如果您转到/以外的任何页面并重新加载，则会出现错误和页面不加载。您需要告诉服务器如何处理路径和基目录。因此，为了解决这个难题，你需要一台服务器而我更喜欢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并导航，就像您在已经为您配置的实时服务器一样。

Answer 5

Step1 ：在角度根的$locationProvider函数中注入config() 模块并将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>

Answer 6

试试这一行：

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

在此之前：

$routeProvider.

Answer 7

在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步：在href的标题部分中提供基本index.html属性。这应该放在所有脚本和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

如何从angularjs ng-route中删除hash＃

7 个答案: