详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

2024-09-30 07:28:46

AngularJS 路由是通过 # + 标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。因此在设置好路由规则后，为html页面的a标签设置href路由链接切换不同的视图。Angular1.6版本之前通常有href=“#...”或href=“#/...”这两种写法，结果这两种写法在Angular1.6中没有任何反应。

结果查看了下浏览器地址栏，默认视图链接竟然显示“#!/..”,是的，中间多加了个！号。

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>

这样浏览器访问时，就不会多出个！号了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解AngularJs ui-router 路由的简单介绍

之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,而ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域). 比如我们点击了一个link,我们需要在视图中跳转到指定的一个页面,那么ngRoute
浅析angularJS中的ui-router和ng-grid模块

在家里闲着无聊,正好在网上找到了一个关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里哟https://github.com/wwervin72/Angular. 有兴趣的小伙伴可以看看.那么然后这里我们就先来了解一下这两个模块的用法. 我们先来说说ui-router这个模块,这个模块主要是用来实现深层次的路由的.其实angular有个内置的指令ng-route,如果在项目中没
详解angularJs模块ui-router之状态嵌套和视图嵌套

状态嵌套的方法状态可以相互嵌套.有三个嵌套的方法: 使用"点标记法",例如:.state('contacts.list', {}) 使用parent属性,指定一个父状态的名称字符串,例如:parent: 'contacts' 使用parent属性,指定一个父状态对象,例如:parent: contacts(contacts 是一个状态对象) 点标记法在$stateProvider中可以使用点语法来表示层次结构,下面,contacts.list是contacts的子状态. $stat
详解angularjs 关于ui-router分层使用

最近感觉有很多学angular 的童鞋在路由问题中还不清楚怎么使用.其实我之前也是一直晕晕的不懂怎么用,现在要好得多了.在这里就记录下ui-router使用. 就已目前做的这个项目来介绍下怎么使用吧.Note:最好是按照层次规则来设置路由名,好处是容易看懂,也便于管理. 我这里是以总state到模块state再到下一层模块state(再到下一层模块state)最后到详细页面的state来分层. 首先我们先定义一个总的state如: .state('home', { url: '/home?bac
angularjs ui-router中路由的二级嵌套

关于ui-router中嵌套路由中的问题 1.首先我们的页面层次为其中Main.html是我们的主页,我们要在main.html中对路由进行统一的管理. main.html页面中有一个ui-view在这里将填充PageTab.html,同时被填充的PageTab.html中也有一个ui-view 这样就实现了嵌套路由. 最终效果: 当我们点击Page-1时出现的是Page1中的内容,同理点击Page-2. 下面是实际的代码: Main.html <!DOCTYPE html> <htm
AngularJS 使用 UI Router 实现表单向导

我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Router,它能内嵌状态,为每个状态显示不同的view,我们能让多步表单变得相当的容易. 为了快速的理解UI Router是怎样工作的,看我们的文章:AngularJS使用UI-Router路由让我们言归正传,开始创建我们的最棒的表单! 创建工程创建工程有个模板结构. 需要个布局文件 , 每个表单的视图文件, 格式文件, 以及JavaScri
AngularJS ui-router (嵌套路由)实例

我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的.比如这样:<div ng-view></div>.一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图.比如这样: var bookStoreApp = angular.module('bookStoreApp', [ 'ngRoute', 'ngAnimate', 'bookStoreCtrls', ]); bookStoreApp.conf
Angularjs中UI Router的使用方法

学习使用angular中,ui-route是其中的一个难点,简单使用没什么问题,但涉及到多级嵌套,就感觉有茫然,查了很多资料,踩过很多坑,到目前为止也不能说对ui-route有全面了解:这里只是把填补的几个坑记录一下备忘: 1.abstract的使用: $stateProvider .state('shop',{ resolve:{ "shoplist":function($http){ return $http({ url:"/bookApp/data/shoplist.p
AngularJS路由Ui-router模块用法示例

本文实例讲述了AngularJS路由Ui-router模块用法.分享给大家供大家参考,具体如下: 由于某些设计原因,AngularJS原生的路由模块有一些缺点,比如说不支持view的嵌套等,所以有许多社区开始自己设计路由模块,最有代表性的就是ui-route了. ui-route是一个功能强大的路由模块,它在原生的ng-route模块上加强了其他方面的功能. 现在就开始做几个DEMO接触一下ui-route.  <!doctype html> <meta
Angularjs中UI Router全攻略

首先给大家介绍angular-ui-router的基本用法. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofig); }) $stateProvider.state(stateName, stateConfig) stateName是string类型 stateCon
深究AngularJS之ui-router详解

1.配置使用ui-router 1.1导入js文件需要注意的是:必须导入angular.min.js这个文件,且angular.min.js必须导入在angular-ui-router.min.js前面. <script type="text/javascript" src="JS/angular.min.js"></script> <script type="text/javascript" src="

详解AngularJS1.6版本中ui-router路由中/#!/的解决方法

相关推荐

随机推荐