详解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 相关文章推荐
Javascript中的常见排序算法
Mar 27 Javascript
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
javascript操作表格排序实例分析
May 06 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 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
Adodb的十个实例(清晰版)
2006/12/31 PHP
MySQL授权问题总结
2007/05/06 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
vue中activated的用法
2021/01/03 Vue.js
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
python实现用户答题功能
2018/01/17 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
应届毕业生求职信范文
2013/12/18 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
百年校庆感言
2015/08/01 职场文书
施工安全责任协议书
2016/03/23 职场文书