是否可以从angular.js的url中移除#符号?

我仍然希望能够使用浏览器的后退按钮等,当我改变视图,将更新的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'});
}]);

我可以编辑这个有相同的功能没有#吗?


当前回答

我在web上写了一个规则。在app.js中设置$locationProvider.html5Mode(true)后配置。

霍普,帮助别人。

  <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重写器。

此外,如果你使用Web Api和IIS,这个匹配url将不起作用,因为它将改变你的Api调用。因此,添加第三个输入(第三行条件)并给出一个模式,该模式将排除来自www.yourdomain.com/api的调用

其他回答

为了移除一个漂亮的URL的散列标签,也为了让你的代码在缩小后工作,你需要 像下面的例子一样构建你的代码:

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

你可以调整html5mode,但这只适用于页面的html锚中包含的链接,以及url在浏览器地址栏中的样子。试图从页面外的任何地方请求不带标签(带或不带html5mode)的子页面将导致404错误。例如,以下CURL请求将导致一个page not found错误,与html5mode无关:

$ curl http://foo.bar/phones

虽然下面会返回根/主页:

$ curl http://foo.bar/#/phones

这样做的原因是,在请求到达服务器之前,标签之后的任何内容都会被剥离。因此,对http://foo.bar/#/portfolio的请求作为对http://foo.bar的请求到达服务器。服务器将响应http://foo.bar的200 OK响应(假设),代理/客户端将处理其余的内容。

因此,如果你想与他人分享一个url,你别无选择,只能包含这个标签。

以下两步: 1. 首先在你的应用配置文件中设置$locationProvider.html5Mode(true)。例如: 角。module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) {$locationProvider. html5mode (true);美元urlRouterProvider.otherwise(“/”);});

2.第二,在主页中设置<base>。 对于eg -> <基地href = " / " >

对于不支持HTML5 History API的浏览器,$location服务将自动回退到散列部分方法。

只需添加$locationProvider

.config(function ($routeProvider,$locationProvider)

然后添加$locationProvider.hashPrefix("); 后

.otherwise({
        redirectTo: '/'
      });

就是这样。

看来现在说这个有点晚了。但是将下面的配置添加到app.module导入中就可以了:

RouterModule.forRoot(routes, { useHash: false })