详解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实现可改变列宽的table实例
Jul 02 Javascript
js倒计时简单实现方法
Dec 17 Javascript
js 调用百度分享功能
Feb 27 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
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
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
yy婚礼司仪主持词
2014/03/14 职场文书
体现团队精神的口号
2014/06/06 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
流动人口婚育证明
2014/10/19 职场文书
2016寒假假期总结
2015/10/10 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
SQL Server中使用表变量和临时表
2022/05/20 SQL Server