详解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的Repeater实现代码
Jul 17 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 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
source.php查看源文件
2006/12/09 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
vue中v-model对select的绑定操作
2020/08/31 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python开发编码规范
2006/09/08 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
详解Python的单元测试
2015/04/28 Python
python简单文本处理的方法
2015/07/10 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python3 Random模块代码详解
2017/12/04 Python
详解Python用户登录接口的方法
2019/04/17 Python
Python flask框架post接口调用示例
2019/07/03 Python
Python用字典构建多级菜单功能
2019/07/11 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
2019年分享net面试的经历和题目
2016/08/07 面试题
环境科学专业大学生自荐信格式
2013/09/21 职场文书
英语硕士生求职简历的自我评价
2013/10/15 职场文书
《争吵》教学反思
2014/02/15 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
一帮一活动总结
2014/05/08 职场文书
招标承诺书
2014/08/30 职场文书
社区端午节活动总结
2015/02/11 职场文书
教师聘用意向书
2015/05/11 职场文书
改造DE1103三步曲
2022/04/07 无线电
Consul在linux环境的集群部署
2022/04/08 Servers