IT技术 - 如何从 angularjs ng-route 中删除哈希 # - 吾爱随笔录

如何从 angularjs ng-route 中删除哈希 #

IT技术 javascript angularjs angular-routing

2021-03-04 06:05:32

我正在尝试使用 locationProvider 从 angular js 中的 url 路由中删除主题标签，但它给了我错误。

应用程序.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 full 以获得对错误的更好解释，而不是缩小版本）

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

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

6个回答

你可以像这样使用 $locationProvider -

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

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

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

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

我想我明白了！！

2021-04-22 06:05:32

在从 angular-route 1.2.x 升级到 1.3.13 时遇到了这一新要求。选择您的第二个解决方案来解决它。

2021-05-06 06:05:32

是的我明白。但我无法理解基本网址和相对网址。我的 html 文件在 html 文件夹中，所以它是localhost:8000/html/index.html。我想我必须设置像 <base href="/html"> 这样的基本标签，因为当我将 href 设置为“/”时它不起作用。我必须在应用程序配置中将第一个 url 设置为“/html”。你能解释一下 base 是如何工作的吗？

2021-05-09 06:05:32

从 URL 中删除 # 的步骤：

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

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

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

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

<base href="/">

你的依赖数组：

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

是的，python 也对我这样做了，问题解决了吗？

2021-05-16 06:05:32

是的，谢谢。现在我有另一个关于 url 角度路由的问题，我将为此打开一个单独的问题:)

2021-05-20 06:05:32

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

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

第一步：进样$locationProvider在config()角根module和组的功能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>

其它你可能感兴趣的问题

上一篇VueJS/Typescript - 找不到module“./components/Navigation”或其相应的类型声明下一篇为什么 JavaScript IIFE 需要括号？