从AngularJS urls中删除片段标识符（＃符号）-Java 学习之路

248

是否可以从angular.js网址中删除＃符号？

当我更改视图并使用params更新URL时，我仍然希望能够使用浏览器的后退按钮等，但我不想要＃符号 .

教程routeProvider声明如下：

angular.module('phonecat', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
  when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
  otherwise({redirectTo: '/phones'});
}]);

如果没有＃，我可以编辑它以具有相同的功能吗？

14 回答

是的，您应该配置$locationProvider并将html5Mode设置为 true ：

angular.module('phonecat', []).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
      otherwise({redirectTo: '/phones'});

    $locationProvider.html5Mode(true);

  }]);

回复于 2024-05-02T20:44:15+08:00

请务必检查html5历史记录API的浏览器支持：

if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
  }

回复于 2024-05-02T20:44:15+08:00

要删除 pretty URL 以及 code to work after minification 的哈希标记，您需要构建代码，如下例所示：

jobApp.config(['$routeProvider','$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus/:id', {
                templateUrl: 'views/job-detail.html',
                controller: 'JobDetailController'
            });

         //you can include a fallback by  including .otherwise({
          //redirectTo: '/jobs'
        //});


        //check browser support
        if(window.history && window.history.pushState){
            //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a  tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">

         // to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase

         // if you don't wish to set base URL then use this
         $locationProvider.html5Mode({
                 enabled: true,
                 requireBase: false
          });
        }
    }]);

回复于 2024-05-02T20:44:15+08:00

在 app.js 中设置了 $locationProvider.html5Mode(true) 之后，我在web.config中写出了一条规则 .

希望，帮助别人 .

<system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" 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_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

在我的index.html中，我将其添加到 <head>

<base href="/">

不要忘记在服务器上安装iis的url rewriter .

此外，如果您使用Web Api和IIS，此匹配URL将无法解决，因为它将更改您的api调用 . 所以添加第三个输入（条件的第三行）并给出一个将排除来自 www.yourdomain.com/api 的调用的模式

回复于 2024-05-02T20:44:15+08:00

1
如果你使用AngularJS与MVC进行.NET堆栈，那么你需要做的就是从url中删除'＃'：
- 在_Layout页面中设置基本href： <head> <base href="/"> </head>
- 然后，在您的角度应用程序配置中添加以下内容： $locationProvider.html5Mode(true)
- 以上将从网址中删除“＃”，但页面刷新将无效，例如如果你在“yoursite.com/about”页面，refreash将给你一个404.这是因为MVC不知道角度路由，并且通过MVC模式它将寻找MVC页面的'about'，这在MVC中是不存在的路由路径 . 解决方法是将所有MVC页面请求发送到单个MVC视图，您可以通过添加捕获所有MVC页面的路径来执行此操作
网址：
```
routes.MapRoute(
    name: "App",
    url: "{*url}",
    defaults: new {
        controller = "Home", action = "Index"
    }
);
```
回复于 2024-05-02T20:44:15+08:00
45
您可以调整html5mode，但这仅适用于页面的html锚点中包含的链接以及网址在浏览器地址栏中的显示方式 . 尝试从页面外的任何位置请求没有主题标签（带或不带html5mode）的子页面将导致404错误 . 例如，以下CURL请求将导致页面未找到错误，无论html5mode如何：
```
$ curl http://foo.bar/phones
```
虽然以下将返回root / home页面：
```
$ curl http://foo.bar/#/phones
```
这样做的原因是在请求到达服务器之前删除了hashtag之后的任何内容 . 因此， http://foo.bar/#/portfolio 的请求作为 http://foo.bar 的请求到达服务器 . 服务器将以 http://foo.bar 的200 OK响应（大概）响应，代理/客户端将处理其余的响应 .

因此，如果您想与其他人共享网址，则除了包含主题标签外别无选择 .
回复于 2024-05-02T20:44:15+08:00
246

按照2个步骤 -
1.首先在app配置文件中设置 $locationProvider.html5Mode(true) .
例如 -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.第二步在主页面中设置 <base> .
例如 - >
<base href="/">

对于不支持HTML5 History API的浏览器，$ location服务将自动回退到hash-part方法 .

回复于 2024-05-02T20:44:15+08:00

我的解决方案是创建.htaccess并使用#Sorian代码..没有.htaccess我无法删除＃

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]

回复于 2024-05-02T20:44:15+08:00

5

正如上述答案所述，步骤如下─

添加到index.html在app.js中启用html5mode $ location.html5Mode（true）

有了这个，应用程序将运行良好 . 但仅在您从index.html导航到其他页面的情况下 . 例如我的基页是www.javainuse.com . 如果我点击链接java，它将正确导航到www.javainuse.com/java .

但是，如果我直接访问www.javainuse.com/java将得到页面没有找到错误 .

要解决此问题，我们必须使用网址重写 . Dot net需要IIS的URL重写 .

如果您使用的是tomcat，则必须使用Tuckey完成URL重写 . 可以获得有关URL重写的更多信息here

回复于 2024-05-02T20:44:15+08:00
1
根据文件 . 您可以使用：
```
$locationProvider.html5Mode(true).hashPrefix('!');
```
注意：如果您的浏览器不支持HTML 5.请不要担心：D它有回退到hashbang模式 . 所以，你不需要手动检查if（window.history && window.history.pushState）

例如：如果单击： <a href="/other">Some URL</a>

In HTML5 Browser ：angular会自动重定向到 example.com/other

In Not HTML5 Browser ：angular会自动重定向到 example.com/#!/other
回复于 2024-05-02T20:44:15+08:00
3
这个答案假设您使用nginx作为反向代理，并且您已经将$ locationProvider.html5mode设置为true .
- 为了那些可能仍在努力应对上述所有酷炫事物的人 .
当然，@ maxim grach解决方案工作正常，但是对于如何响应不希望首先包含主题标签的请求的解决方案，可以做的是检查php是否发送404然后重写URL . 以下是nginx的代码，

在php位置，检测404 php错误并重定向到另一个位置，
```
location ~ \.php${
  ...
  fastcgi_intercept_errors on;
  error_page 404 = /redirect/$request_uri ;
}
```
然后在重定向位置重写url并使用proxy_pass将数据，offcourse，将您的网站网址放在我博客网址的位置 . （请求：仅在您尝试之后才对此提出疑问）
```
location /redirect {
  rewrite ^/redirect/(.*) /$1;
  proxy_pass http://www.techromance.com;
}
```
并看到魔术 .

它绝对有效，至少对我来说 .
回复于 2024-05-02T20:44:15+08:00
0
第1步：将$ locationProvider服务注入app config的构造函数

第2步：将代码行$ locationProvider.html5Mode（true）添加到app config的构造函数中 .

第3步：在容器（登陆，主页或布局）页面中，在标签内添加 <base href="/"> 等html标签 .

步骤4：从所有锚标签中删除路由配置的所有“＃” . 例如，href =“＃home”变为href =“home”; href =“＃about”变为herf =“about”; href =“#contact “变成href =”联系人“
```
<ul class="nav navbar-nav">
     <li><a href="home">Home</a></li>
     <li><a href="about">About us</a></li>
     <li><a href="contact">Contact us</a></li>
</ul>
```
回复于 2024-05-02T20:44:15+08:00

-1

从index.html开始从 <a href="#/aboutus">About Us</a> 删除所有 # 所以它必须看起来像 <a href="/aboutus">About Us</a> . 现在在index.html的head标签中，在最后一个元标记之后写入 <base href="/"> .

现在在您的路由js中注入 $locationProvider 并写入 $locatonProvider.html5Mode(true); 这样的东西： -

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "Templates/home.html",
            controller: "homeController"
        })
            .when("/aboutus",{templateUrl:"Templates/aboutus.html"})
            .when("/courses", {
                templateUrl: "Templates/courses.html",
                controller: "coursesController"
            })
            .when("/students", {
                templateUrl: "Templates/students.html",
                controller: "studentsController"
            })
        $locationProvider.html5Mode(true);
    });

详情请观看此视频https://www.youtube.com/watch?v=XsRugDQaGOo

回复于 2024-05-02T20:44:15+08:00

9
只需添加 $locationProvider In
```
.config(function ($routeProvider,$locationProvider)
```
然后添加 $locationProvider.hashPrefix('');
```
.otherwise({
        redirectTo: '/'
      });
```
而已 .
回复于 2024-05-02T20:44:15+08:00

从AngularJS urls中删除片段标识符（＃符号）

14 回答

相关问题