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”（注意哈希后的exclaimation）以使路由工作。使用官方AngularJS教程，我认为有一些我缺少的东西。启用html5Mode也很容易，但在这种情况下还需要将＃开启。我在这里缺少什么？

Answer 1

对此我自己解决了这个问题：

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

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

angularjs 1.6.0 (latest now) routes not working

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

AngularJS中的路由无法正常工作！（＃！它有效）

1 个答案:

AngularJS中的路由无法正常工作！ （＃！它有效）

1 个答案:

AngularJS中的路由无法正常工作！（＃！它有效）