Angularjs如何在没有hash-bang的情况下制作ngRoute [重复]答案

【问题标题】：Angularjs how to make ngRoute without hash-bang [duplicate]Angularjs如何在没有hash-bang的情况下制作ngRoute [重复]
【发布时间】：2018-10-24 11:01:40
【问题描述】：

在我的 angularjs 应用程序中，我在公共文件夹中有 index.html，其中包含以下代码，

<body ng-controller="TheController">
    <div id="startdiv">
        <label>Username</label><input type="text" tabindex="1" placeholder="Enter Your User Name" name="email" required>
        <label>Password</label><input type="password" tabindex="2"  placeholder="Enter Your Password" name="password" required>
        <br><br>
        <button ng-click="saveData()">Login</button><button ng-click="saveData()">SignUp</button><br>   
        <button ng-click="changeview()">ClickMe</button>
    </div>  
</body>

脚本部分如下，

var app = angular.module('plunker',['ngRoute']);

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

app.config(function($routeProvider) {
    $routeProvider
    .when("/test", {
        templateUrl : "index.html"
    })
    .when("/london", {
        templateUrl : "london.html",        
    });/*
    .otherwise({
            redirectTo: '/paris.html'
        }); */
});


app.controller('TheController', function ($scope,$location) {       
    console.log('hello')    
     $scope.changeview = function () {
        console.log('in functgion changeview')
        console.log($location)
        $location.path('/london');      
    }
});

我也有 london.html 在同一个公用文件夹中，我想在按钮单击时加载。

我的 london.html

<h1>London</h1>
<h3>London is the capital city of England.</h3>

问题是，点击按钮时，url 正在从“http://localhost:3000/”更改为“http://localhost:3000/#/london”，但 html 页面未加载。另外我想知道是否可以使用哈希字符进行路由。

请让我知道我在哪里犯了错误。谢谢。

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。避免同时提出多个不同的问题。

标签： angularjs ngroute angularjs-ng-route

【解决方案1】：

在app.module.js中使用它

$locationProvider.html5Mode(true);

示例：

window.routes = {
  '/': {
    templateUrl: 'app/visitor/visitor.html',
    anonymous: true
  },
  '/index': {
    templateUrl: 'app/visitor/visitor.html',
    caseInsensitiveMatch: true,
    anonymous: true
  },
  '/lu/:mt?/:tab?/:id?': {
    templateUrl: 'app/user/user.html',
    caseInsensitiveMatch: true,
    anonymous: false
  }
};

app.config(function ($routeProvider, $locationProvider) {
  for (var path in window.routes) {
    $routeProvider.when(path, window.routes[path]);
  }
  $routeProvider.otherwise({redirectTo: '/'});

  $locationProvider.html5Mode(true);
});

与示例中的templateUrl: 'app/visitor/visitor.html', 一样，设置文件的完整路径。

【讨论】：