AngularJS 中的路由没有！（使用 #! 它有效）

Question

我正在使用 AngularJS 1.6.4。我有一个服务器启动 @8080 端口（只是确保不要错过任何东西）。下面是我的代码：

app.js

 //Defines the root module, initialize with additional dependencies
angular.module("MyPhoneApp", ['ngRoute']);
angular.module("MyPhoneApp").component('greetUser', {
    template: 'Hello, {{$ctrl.user}}!',
    controller: function GreetUserController() {
        this.user = 'world';
    }
});

angular.module("MyPhoneApp").component('phoneList', {
    templateUrl: 'app/phoneList.template.html',
    controller: ['$http', function PhoneListController($http){
        var self = this;
        self.criteria = "model";
        $http.get("app/phones.json").then(function(response){
            self.phones = response.data;
        });
    }]
});

//Code for phone-detail snippet
angular.module("MyPhoneApp").component('phoneDetail', {
    template: 'Hello world from Phone Detail component! {{$ctrl.phoneId}}',
    controller: ['$routeParams',
        function PhoneDetailController($routeParams) {
            this.phoneId = $routeParams.phoneId;
        }
    ]
});


//Routing code, to be seperated in different file named app.config.js
angular.module("MyPhoneApp").config(['$locationProvider', '$routeProvider', 
    function config($locationProvider, $routeProvider) {
        $locationProvider.hashPrefix("!");
        $locationProvider.html5Mode({
            required : true,
            requireBase : false
        });
        $routeProvider.when('/phones', {template:'<phone-list></phone-list>'})
                      .when('/phones/:phoneId', {template: '<phone-detail></phone-detail>'})
                      .otherwise('/phones');
    }   
]);

phoneList.template.html

    <input type="text" class="form-control" ng-model="$ctrl.query" placeholder="Search Phones"><br/>
<select name="type" id="" ng-model="$ctrl.criteria" class="form-control" placeholder="Select Filter Criteria">
    <option value="maker" >By Manufacturer</option>
    <option value="model">By Model</option>
</select>
<ul type="none">
    <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.criteria" class="panel panel-success">
        <a href="#!/phones/{{phone.id}}" class="thumb">
            <img ng-src="{{phone.image}}" alt="{{phone.model}}" height="180px" width="150px"/>
        </a>
        <a href="#!/phones/1">
            {{phone.maker}} : {{phone.model}}
        </a><br/>
        {{phone.desc}}
    </li>
    <li>
        Number of phones : {{$ctrl.phones.length}}
    </li>
</ul>
<pre>{{$ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.criteria | json}}</pre>

和index.html

<html>

<head>
    <title>First AngularJS App</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <base href="/"/>
</head>

<body ng-app="MyPhoneApp">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-2 col-md-8 col-md-offset-2">
                <div ng-view></div>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.min.js"></script>
<script src="app/app.js"></script>
</html>

问题是每当我必须放置链接时，我必须将它们放在“#!/someplace/somevalue”而不是“#/someplace/somevalue”（注意散列后的感叹号）路由工作。为此使用官方 AngularJS 教程，我认为我缺少一些东西。 Enabled html5Mode 也是为了方便一些，但那样的话还需要把# 放在上面。我在这里错过了什么？

Answer 1

我自己解决了这个问题，看到这个：

https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52

我发现app.js中的$locationProvider.hashPrefix("!");是原因，根据

我们应该将其设置为 $locationProvider.hashPrefix(""); 以解决锚标记 URL 问题，同时删除哈希仍然是一个小问题，如果找到，将会提出解决方案。

AngularJS 中的路由没有！（使用 #! 它有效）

Routing in AngularJS not working without ! (With #! it works)

angularjs

angularjs-routing

AngularJS 中的路由没有！ （使用 #! 它有效）

Routing in AngularJS not working without ! (With #! it works)

angularjs

angularjs-routing

AngularJS 中的路由没有！（使用 #! 它有效）