详解AngularJS1.6版本中ui-router路由中#!的解决方法
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
详解AngularJS1.6版本中ui-router路由中#!的解决⽅法AngularJS 路由是通过 # + 标记帮助我们区分不同的逻辑页⾯并将不同的页⾯绑定到对应的控制器上。
因此在设置好路由规
则后，为html页⾯的a标签设置href路由链接切换不同的视图。
Angular1.6版本之前通常有href=“#...”或href=“#/...”这两种写法，结果这两种写法在Angular1.6中没有任何反应。
结果查看了下浏览器地址栏，默认视图链接竟然显⽰“#!/..”,是的，中间多加了个！号。
解决⽅案⼀：
所以在html页⾯a标签上将href的属性值添加⼀个！号就可以了。
<p><a href="#!/addStudent" rel="external nofollow" rel="external nofollow" >添加学⽣</a></p>
<p><a href="#!/viewStudents" rel="external nofollow" rel="external nofollow" >查看学⽣</a></p>
完整代码：
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS 视图</title>
<script src="https:///ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https:///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" rel="external nofollow" rel="external nofollow" >添加学⽣</a></p>
<p><a href="#!/viewStudents" rel="external nofollow" rel="external nofollow" >查看学⽣</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" rel="external nofollow" rel="external nofollow" >添加学⽣</a></p>
<p><a href="#viewStudents" rel="external nofollow" rel="external nofollow" >查看学⽣</a></p>
完整代码：
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS 视图</title>
<script src="https:///ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https:///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" rel="external nofollow" rel="external nofollow" >添加学⽣</a></p> <p><a href="#viewStudents" rel="external nofollow" rel="external nofollow" >查看学⽣</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>
这样浏览器访问时，就不会多出个！号了。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。