详解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下组织javascript代码(js函数化)
Aug 25 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
Javascript 构造函数详解
Oct 22 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 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数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
js读写json文件实例代码
2014/10/21 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python开发编码规范
2006/09/08 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
python实现的自动发送消息功能详解
2019/08/15 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
一些PHP的面试题
2015/05/06 面试题
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
便利店投资创业计划书
2014/02/08 职场文书
2014年营销工作总结
2014/11/22 职场文书
在职证明范本
2015/06/15 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python