详解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 相关文章推荐
解决jquery插件冲突的问题
Jan 23 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
如何从头实现一个node.js的koa框架
Jun 17 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
PHP5中MVC结构学习
2006/10/09 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
Less 安装及基本用法
2018/05/05 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python 对象中的数据类型
2017/05/13 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
Pyqt5实现英文学习词典
2019/06/24 Python
python里运用私有属性和方法总结
2019/07/08 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
python中dict()的高级用法实现
2019/11/13 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Python pandas库中的isnull()详解
2019/12/26 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
小学生美德少年事迹
2014/02/02 职场文书
安全责任书范文
2014/03/12 职场文书
房屋转让协议书
2014/04/11 职场文书
网吧温馨提示
2015/07/17 职场文书
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers