详解AngularJS1.6版本中ui-router路由中/#!/的解决方法


Posted in Javascript onMay 22, 2017

AngularJS 路由 是通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。因此在设置好路由规则后,为html页面的a标签设置href路由链接切换不同的视图。Angular1.6版本之前通常有href=“#...”或href=“#/...”这两种写法,结果这两种写法在Angular1.6中没有任何反应。

结果查看了下浏览器地址栏,默认视图链接竟然显示“#!/..”,是的,中间多加了个!号。

详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

AngularJS升级到了1.6版本后,里面多了很多/#!/的改动。那么1.6究竟做了哪些改变呢?可以参考这个:https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52

解决方案一:

所以在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://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" 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://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" 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>

这样浏览器访问时,就不会多出个!号了。

详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
js图片轮播插件的封装
Jul 21 Javascript
Angular2之二级路由详解
Aug 31 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
JS实现上传图片实时预览功能
May 22 #Javascript
详解Angular 4.x NgIf 的用法
May 22 #Javascript
JS实现无缝循环marquee滚动效果
May 22 #Javascript
jQuery表单验证之密码确认
May 22 #jQuery
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 #Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 #Javascript
JavaScript表单验证实现代码
May 22 #Javascript
You might like
PHP 可阅读随机字符串代码
2010/05/26 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python:socket传输大文件示例
2017/01/18 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
客房主管岗位职责
2013/12/09 职场文书
女方回门宴答谢词
2014/01/14 职场文书
责任担保书范文
2014/05/21 职场文书
唐山大地震的观后感
2015/06/05 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
结婚纪念日感言
2015/08/01 职场文书