AngularJS 路由 是通過 # + 標記 幫助我們區分不同的邏輯頁面並將不同的頁面綁定到對應的控制器上。因此在設置好路由規則後，爲html頁面的a標籤設置href路由鏈接切換不同的視圖。Angular1.6版本之前通常有href=“#...”或href=“#/...”這兩種寫法，結果這兩種寫法在Angular1.6中沒有任何反應。
結果查看了下瀏覽器地址欄，默認視圖鏈接竟然顯示“#!/..”,是的，中間多加了個！號。
AngularJS升級到了1.6版本後，裏面多了很多/#!/的改動。那麼1.6究竟做了哪些改變呢？可以參考這個：https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52
解決方案一：
所以在html頁面a標籤上將href的屬性值添加一個！號就可以了。
<p><a href="#!/addStudent">添加學生</a></p>
<p><a href="#!/viewStudents">查看學生</a></p><html>
<head>
<meta charset="utf-8" />
<title>AngularJS 視圖</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS 視圖</h2>
<div ng-app="mainApp">
<p><a href="#!/addStudent">添加學生</a></p>
<p><a href="#!/viewStudents">查看學生</a></p>
<div ng-view></div>
<script type="text/ng-template" id="addStudent.html">
<h2>添加學生</h2>
{{message}}
</script>
<script type="text/ng-template" id="viewStudents.html">
<h2>查看學生</h2>
{{message}}
</script>
</div>
<script>
var mainApp=angular.module("mainApp",['ngRoute']);
mainApp.config(["$routeProvider",function($routeProvider){
$routeProvider.when('/addStudent',{
templateUrl:'addStudent.html',
controller:'AddStudentController'
}).when('/viewStudents',{
templateUrl:'viewStudents.html',
controller:'ViewStudentsController'
}).otherwise({
redirectTo:'/addStudent'
});
}]);
mainApp.controller("AddStudentController",function($scope){
$scope.message="這個頁面是用於顯示學生信息的輸入表單";
});
mainApp.controller("ViewStudentsController",function($scope){
$scope.message="這個頁面是用於顯示所有學生信息";
});
</script>
</body>
</html>解決方案二：
如果想讓路由依舊錶現的與之前版本的一致可以這樣做：
mainApp.config(["$locationProvider","$routeProvider",function($locationProvider,$routeProvider){
$locationProvider.hashPrefix('');
}]);<p><a href="#addStudent">添加學生</a></p>
<p><a href="#viewStudents">查看學生</a></p><html>
<head>
<meta charset="utf-8" />
<title>AngularJS 視圖</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS 視圖</h2>
<div ng-app="mainApp">
<p><a href="#addStudent">添加學生</a></p>
<p><a href="#viewStudents">查看學生</a></p>
<div ng-view></div>
<script type="text/ng-template" id="addStudent.html">
<h2>添加學生</h2>
{{message}}
</script>
<script type="text/ng-template" id="viewStudents.html">
<h2>查看學生</h2>
{{message}}
</script>
</div>
<script>
var mainApp=angular.module("mainApp",['ngRoute']);
mainApp.config(["$locationProvider","$routeProvider",function($locationProvider,$routeProvider){
$locationProvider.hashPrefix('');
$routeProvider.when('/addStudent',{
templateUrl:'addStudent.html',
controller:'AddStudentController'
}).when('/viewStudents',{
templateUrl:'viewStudents.html',
controller:'ViewStudentsController'
}).otherwise({
redirectTo:'/addStudent'
});
}]);
mainApp.controller("AddStudentController",function($scope){
$scope.message="這個頁面是用於顯示學生信息的輸入表單";
});
mainApp.controller("ViewStudentsController",function($scope){
$scope.message="這個頁面是用於顯示所有學生信息";
});
</script>
</body>
</html>這樣瀏覽器訪問時，就不會多出個！號了。
