Question

是否可以通过直接从url提供id来从url中给＃符号显示记录？我正在开发一个网站，其中我只有一个查看页面Login.html。我需要通过从url给出用户的id作为abc.in/1来访问它，这里1是用户的id。我将Login.html设置为默认页面，当我尝试通过提供abc.in/1来访问它时，即。在url中的id无法显示记录。但是当我给abc.in#/1时，它会正确显示记录。我不想通过在网址中提供#来访问它。我的代码如下 -

    <html ng-app="myApp" style="height: 500px; overflow: auto;">
    <head>
        <meta charset="utf-8">

        <base href="/">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title style="color: white;">c60</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <script src="../app/js/controllers/LoginController.js"></script>

    </head>

    <body>
    ---record details
    </body>
</html>

并在app.js中 -

    angular.module('myApp', [
      'ngRoute', 'ngResource', 'ngCookies',
      'myApp.filters',
      'myApp.services',
      'myApp.directives',
      'myApp.controllers',
      'ui.bootstrap', 'ngAnimate', 'ngDragDrop'  //'ngSanitize',
    ]).
    config(['$routeProvider','$locationProvider', function ($routeProvider,$locationProvider) {

           $routeProvider.when('/:id',
          {
              templateUrl: '/Login.html',
              controller: 'LoginController'
          });

        $routeProvider.otherwise({ redirectTo: '' });

        //check browser support
        if (window.history && window.history.pushState) {

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

怎么做？我只是不想在url中给＃显示url中提供的特定id的记录。我需要一个干净的url。怎么做？

我尝试使用以下问题Removing the # symbol from angular.js urls中的提示从我的溃疡中删除＃。现在，问题是如果我尝试直接访问它们，我的网址无效。如果将以下网址直接放在浏览器http://localhost/phones中，则从相关问题中的给定示例中获取;就我而言，它是abc.in/1

我得到404错误。知道如何解决这个问题吗？

Answer 1

可以抑制角度应用的URL中的＃。为此，您需要配置已在应用程序配置中注入的$ locationProvider。在$ routeProvider配置

之后添加以下内容

$locationProvider.html5Mode(true);

最后将以下内容添加到html文件的head部分

<base href="/">

这里有几件事似乎是错的。首先，即使您的应用程序中只有一个视图，也可以使用index.html来托管您的ng-view指令。然后，当您导航到应用程序的一个视图时，将在具有ng-view指令的位置加载该视图。其次，从你的app.js，你有如下所示的东西

$routeProvider.when('/:id',
      {
          templateUrl: '/Login.html',
          controller: 'LoginController'
      });

    $routeProvider.otherwise({ redirectTo: '' });

所以这清楚地表明，当您在浏览器的地址栏中输入'/'或'/ 1'时，您的应用程序将按照templateUrl中的说明获取login.html。但是，在您的测试中，您在浏览器的URL地址栏中输入abc.in/1（我不知道它来自哪里）。当在路由提供商的路由中检查此URL时，将找不到匹配项。因此，您会收到404错误。为了使问题更糟，你的$ routeProvider.otherwise将重定向到空字符串。正确的做法是使用各自的templateUrl为您的应用程序说明各种路由，并将otherwsise设置为重定向到您的应用程序的根目录，在您的情况下仍然是login.html或index.html如果您现在添加它只是因为您只有一种观点。希望这会有所帮助。

如果没有在网址中提供＃，我将收到404错误

1 个答案: