0
我正在使用AngularJS 1.6.4。我有一臺服務器在@ 8080端口上啓動（只要確保不要錯過任何內容）。下面是我的代碼：在AngularJS中路由不工作沒有！ （用＃！它的工作原理）
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>
的問題是，每當我必須放置鏈接時，我都是e把它們放在「＃！/ someplace/somevalue」而不是「＃/ someplace/somevalue」（注意散列之後的歎號）以使路由工作。使用官方的AngularJS教程，我認爲有一些我錯過了。啓用html5Mode也有一些緩解，但在這種情況下，還需要把＃放在。我在這裏錯過了什麼？