想要学好ui-router路由，不仅需要了解其基本概念，还需要掌握user路由器等相关知识。在本文中，我们将为您提供全面的ui-router路由学习指南，帮助您更好地掌握这个领域。

本文目录一览：

• 1、angularJs ui-router路由之多视图实现菜单缓存切换
• 2、ui-router怎么跳转路由
• 3、详解Angular路由 ng-route和ui-router的区别
• 4、angular路由 angular-ui-router 的api 求助

angularJs ui-router路由之多视图实现菜单缓存切换

**

**

一个模板中存在多个ui-view,每个ui-view都存在唯一的名称作为标识，通过v-show来判断当前的ui-view是否显示，实现如下图效果

以上可以实现基本的菜单切换，但是需要注意的是：

1.每个页面模块的controller的命名不能相同，否则会出现调用方法的混乱，可能会进入到另一个同名的controller中调用方法；

2.当使用此方法对页面进行缓存，如果打开多个模块用到websocket接受服务器消息时，不能使用WebSocket.onmessage监听和接受服务器消息，否则可能会调用其他controller中WebSocket.onmessage，当前的页面模块就会监听不到服务器消息，这时我们可以使用

socket.addEventListener('message', function (event) {

console.log('Message from server ', event.data);

});

进行服务器消息的监听，并在方法体内做判断，是否是当前页面需要的。

3.如果某个页面的弹出框用到了路由调用则弹框中的页面不会显示，所以建议不要在弹框中直接调用路由加载页面，或者可以在index.jsp中：

4.如果几个模块views里面的name一样，则会出现加载的页面重复的问题；

5.style样式：如果多个模块存在相同名称的选择器，则样式会冲突；

还有些问题会在后面慢慢补充。

6.页面打开太多会出现卡顿现象

7.一定要引入 script src="vendor/angular/angular-ui-router-ext/ct-ui-router-extras.min.js"/script ，否则会出现ui-view没有缓存的情况

ui-router怎么跳转路由

在家里闲着无聊，正好在网上找到了一个关于angular的教程，学习了一下angular的ui-router和ng-grid这两个模块，顺便模仿着做了一个小小的东西。代码已经上传到github上，地址在这里哟。有兴趣的小伙伴可以看看。那么然后这里我们就先来了解一下这两个模块的用法。我们先来说说ui-router这个模块，这个模块主要是用来实现深层次的路由的。其实angular有个内置的指令ng-route，如果在项目中没有嵌套问题的话，那么用这个指令来实现页面之间的跳转也还是蛮方便的，但是他的短板就在于，他拿深层次的嵌套路由没有任何办法。那么首先，我们要使用这个模块我们就需要把他给下载下来。下载地址在这里/angular-ui-router/。下载下来之后，我们就可以把它导入进我们的项目中了，这里要注意下，因为这个模块式基于angular的，所以在这之前，我们还需要导入angular的js文件。这个可以在angular的官网去下载。那么在上面的准备工作都做完了之后，我们就可以来动手写我们的代码了。HTML部分div class="container" div ui-view /div /div 这里有一点要注意下，div里面添加的属性不再是ng-view了，而是ui-view。JS部分var app=angular.module('app',['ui.router','loginModel','listModel']); app.config(function ($stateProvider, $urlRouterProvider) { 　$urlRouterProvider.otherwise('/index'); $stateProvider .state('index',{ url: '/index', templateUrl: 'tpls/start.html' }) .state('register',{ url: '/register', templateUrl: 'tpls/register.html' }) .state('main',{ url: '/main{positionType:[0,9]{1,5}}', views: { '': { templateUrl: 'tpls/main.html' }, 'typeList@main': { templateUrl: 'tpls/typeList.html' }, 'tbHero@main': { templateUrl: 'tpls/tbHero.html' } } }) .state('addHero',{ url: '/addHero', templateUrl: 'tpls/addHero.html' }) .state('find',{ url: '/findPwd', templateUrl: 'tpls/findPwd.html' }) .state('detail',{ url: '/detail/:id', templateUrl: 'tpls/detail.html' }) }) 这里有三个地方需要注意：1、是在进行嵌套的时候，我这里最外层是main部分，然后里面嵌套了typeList和tbHero部分，我们需要注意下这里的写法。2、当我们需要根据选择不同打开不同的内容时，也就是需要向下一个页面传参数，我这里是detail部分，我们也需要多注意下这里的写法。3、在我们利用angular.module创建一个app应用的时候，我们需要在里面导入ui.router模块，另外我们自己创建的一些模块也需要在这里导入进去。4、我们这里使用$stateProvider来配置路由了，而不是$routeProvider了，还有就是这里使用的state而不是when。这里吧路由配置好了之后，剩下的就是写tpls中各个部分的代码了，这里就不做过多的介绍，这里最重要的就是路由的配置。好了下面我们再来看看ng-grid的用法，这里是下载地址/ng-grid/。HTML部分main部分div class="row" div class="col-sm-2" ui-view="typeList" /div div class="col-sm-10" ui-view="tbHero" /div /div typeList部分div class="row" div class="col-sm-12" div class="list-group" a href="javascript:void(0);" class="list-group-item active"英雄定位类型/a a ui-sref="main({positionType:0})" class="list-group-item"全部定位/a a ui-sref="main({positionType:1})" class="list-group-item"射手/a a ui-sref="main({positionType:2})" class="list-group-item"中单/a a ui-sref="main({positionType:3})" class="list-group-item"上单/a a ui-sref="main({positionType:4})" class="list-group-item"打野/a a ui-sref="main({positionType:5})" class="list-group-item"辅助/a /div /div /div tbHero部分div ng-controller="listCtrl" div class="row" div class="col-sm-3" button class="btn btn-success" ui-sref="addHero()"添加英雄/button button class="btn btn-warning" ui-sref="index()"退出/button /div div class="col-sm-9" form class="form-horizontal" input type="text" ng-model="filterOptions.filterText" placeholder="请输入查询关键字..." class="form-control searchText"/ /form /div /div div class="row" div class="col-sm-12" div class="gridStyle" ng-grid="gridOptions" /div /div /div /div JS部分var listModel = angular.module('listModel',['ngGrid']); listModel.controller('listCtrl',['$scope','$http','$state','$stateParams', function ($scope, $http, $state, $stateParams) { $scope.pagingOptions = { pageSizes: [5,15,20], pageSize: 5, currentPage: 1 }; $scope.filterOptions = { filterText: '', useExternalFilter: true }; $scope.totalServerItems = 0; $scope.getDates = function (pageSize,page,/*optional*/searchText) { setTimeout(function () { if(searchText){ searchText = searchText.toLowerCase(); $http.get('data/hero.php?param='+$stateParams.positionType).success(function (data) { var data = data.filter(function (item) { return JSON.stringify(item).indexOf(searchText) != -1; }) data.forEach(function (item,i) { item.index = i+1; }); $scope.totalServerItems = data.length; $scope.datas=data.slice((page-1)*pageSize,page*pageSize); }).error(function (data) { alert('请求错误...'); }) }else{ $http.get('data/hero.php?param='+$stateParams.positionType).success(function (data) { data.forEach(function (item,i) { item.index = i+1; }); $scope.totalServerItems = data.length; $scope.datas = data.slice((page-1)*pageSize,page*pageSize); }).error(function (data) { alert('请求错误...'); }) } },100); }; $scope.getDates($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage); $scope.$watch('pagingOptions', function () { $scope.getDates($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage); },true); $scope.$watch('filterOptions', function () { $scope.getDates($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage,$scope.filterOptions.filterText); },true); $scope.gridOptions = { data: 'datas', //表格中显示的数据来源 multiSelect: false, //是否能多选 enableRowSelection: false, //是否能选择行 enableCellSelection: true, //是否能选择单元格 enableCellEdit: false, //是否能修改内容 enablePinning: true, //是否被锁住了 columnDefs: [ { field: 'index', //这里是数据中的属性名 width: 80, display: '序号', //这里是表格的每一列的名称 pinnable: true, sortable: true //是否能排序 }, { field: 'name', displayName: '姓名', width: 120, sortable: true, pinnable: true }, { field:'alias', displayName:'别名', width: 60, sortable: true, pinnable: true }, { field:'position', displayName: '定位', width: 70, sortable: true, pinnable: true }, { field:'equip', displayName: '装备', width: 500, sortable: true, pinnable: true }, { field:'id', displayName: '详细攻略', sortable: false, pinnable: true, cellTemplate:'div class="cellDetail"a ui-sref="detail({id:row.getProperty(col.field)})" id="{{row.getProperty(col.field)}}"详情/a/div' } ], enablePaging: true, //是否能翻页 showFooter: true, //是否显示表尾 totalServerItems: 'totalServerItems', //数据的总条数 pagingOptions: $scope.pagingOptions, //分页部分 filterOptions: $scope.filterOptions //数据过滤部分 } }]) 这里最重要的就是$scope.gridOptions这一块了，同时我们需要多注意下最后一个详细攻略里面，传参数的写法。下面附上几张效果图：下面附上几张效果图：另外在这里面还用到的关于angular表单验证、service、向导、php等方面的内容这里就不做过多介绍了,如果有哪里写的不对的地方，万望留言告知，谢谢^_^。以上这篇浅析angularJS中的ui-router和ng-grid模块就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

详解Angular路由 ng-route和ui-router的区别

AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL。 通俗来讲，ng-route模块中的$routeService监测$location.url()的变化，并将它映射到预先定义的控制器。也就是在客户端进行URL的路由。 ionic.js对AngularJS进行了扩展

angular路由 angular-ui-router 的api 求助

我们看到这项技术已经应用在了许多的网页上。比如购物车，注册表单，入职流程以及许多多步表单，让用户更容易在线填写表单。下面我们将构建它：使用UI Router，它能内嵌状态，为每个状态显示不同的view,我们能让多步表单变得相当的容易。为了快速的理解UI Router是怎样工作的，看我们的文章：AngularJS使用UI-Router路由让我们言归正传，开始创建我们的最棒的表单！创建工程创建工程有个模板结构/bootswatch/3/ajax/libs/angularjs/1/ajax/libs/angular-ui-router/0/ajax/libs/angularjs/1.2.16/angular-animate.min.js"/script script src="app.js"/script /head !-- apply our angular app -- body ng-app="formApp" div class="container" !-- views will be injected here -- div ui-view/div /div /body /html 完成所有文件的引入后，让我们进入 app.js 开始创建Angular应用和最基本的路由配置。 注意我们是如何把Angular App (formApp) 应用到 body 上面的。创建我们的Angular App app.js现在我们来创建应用和路由。 在一个大型应用中， 你肯定希望把你的Angular应用、路由、控制器分布到它们各自的模块中，但是为了完成我们的简单用例，我们将把它们都放到app.js这个欢乐的大家庭中。现在我们拥有了一个已经注入了ngAnimate和ui.router的应用。 我们同样也建立了相应的路由。注意我们是如何为每一个视图区域定义 url，视图文件(templateUrl) 和 控制器的。form 将是我们的主视图区域。它同样有一个以 . 分割的子视图区域 form.profile。这种想法能实现在应用状态发生变化时（译者：可能是路由、queryString等），子视图将会在主视图区域中显示出来。（译者：而且可以作到仅更新子视图区域变化，记录子视图区域状态）。我们将在下一节中进行演示。 现在我们需要为form以及它的子视图区域创建视图。让我们从新建form.html开始。这个文件将会在我们剩下的表单视图文件中充当模板的作用，正如index.html被用作整个项目的总体模板一样。我们所要作的是在该文件中包含ui-view，这样可以使嵌套声明知道该在何处注入他们的视图。!-- form.html -- div class="row" div class="col-sm-8 col-sm-offset-2" div id="form-container" div class="page-header text-center" h2Let's Be Friends/h2 !-- the links to our nested states using relative paths -- !-- add the active class if the state matches our ui-sref -- div id="status-buttons" class="text-center" a ui-sref-active="active" ui-sref=".profile"span1/span Profile/a a ui-sref-active="active" ui-sref=".interests"span2/span Interests/a a ui-sref-active="active" ui-sref=".payment"span3/span Payment/a /div /div !-- use ng-submit to catch the form submission and use our Angular function -- form id="signup-form" ng-submit="processForm()" !-- our nested state views will be injected here -- div id="form-views" ui-view/div /form /div !-- show our formData as it is being typed -- pre {{ formData }} /pre /div /div 注意我们是如何第二次在项目中使用ui-view的。这就是UI Router伟大的地方：我们可以嵌套声明和视图。这能够在我们开发应用时提供给我们非常多的灵活性。关于UI Router视图的内容，请参见 官方文档。添加基于状态的激活类我们希望每一个状态按钮能够在他们被激活时展示。为了达到这个效果，我们将会使用UI Router提供的ui-sref-active。如果ui-sref和当前状态一致，则会添加我们指定的类。为了给自己的表单添加验证，请参见AngularJS表单验证。现在，你可能想知道我们的表单究竟看起来是什么样子。让我们打开浏览器看一眼。目前为止，我们并没有完全按照希望的那样得到所有的内容，但是这是一系列伟大事情的开端。让我们继续前进，添加一点样式，之后会添加一些嵌入视图和注释。基础Stylingstyle.css我们将设计我们的form-container和status-buttons来是我们的表单看起来更好。/* style.css */ /* BASIC STYLINGS ============================================================================= */ body { padding-top:20px; } /* form styling */ #form-container { background:#2f2f2f; margin-bottom:20px; border-radius:5px; } #form-container .page-header { background:#151515; margin:0; padding:30px; border-top-left-radius:5px; border-top-right-radius:5px; } /* numbered buttons */ #status-buttons { } #status-buttons a { color:#FFF; display:inline-block; font-size:12px; margin-right:10px; text-align:center; text-transform:uppercase; } #status-buttons a:hover { text-decoration:none; } /* we will style the span as the circled number */ #status-buttons span { background:#080808; display:block; height:30px; margin:0 auto 10px; padding-top:5px; width:30px; border-radius:50%; } /* active buttons turn light green-blue*/ #status-buttons a.active span { background:#00BC8C; } 现在我们的按钮更好看了并且更符合我们想要的了，接下来我们看下嵌套视图。嵌套视图form-profile.html, form-interests.html, form-payment.html这部分会比较简单。我们将定义不同的带有我们需要的输入框的视图。并且将他们绑定到formData对象以便我们能看到输入的数据。下面是我们用于嵌套视图的视图文件：表单概要视图!-- form-profile.html -- div class="form-group" label for="name"Name/label input type="text" class="form-control" name="name" ng-model="formData.name" /div div class="form-group" label for="email"Email/label input type="text" class="form-control" name="email" ng-model="formData.email" /div div class="form-group row" div class="col-xs-6 col-xs-offset-3" a ui-sref="form.interests" class="btn btn-block btn-info" Next Section span class="glyphicon glyphicon-circle-arrow-right"/span /a /div /div 表单兴趣视图!-- form-interests.html -- labelWhat's Your Console of Choice?/label div class="form-group" div class="radio" label input type="radio" ng-model="formData.type" value="xbox" checked I like XBOX /label /div div class="radio" label input type="radio" ng-model="formData.type" value="ps" I like PS4 /label /div /div div class="form-group row" div class="col-xs-6 col-xs-offset-3" a ui-sref="form.payment" class="btn btn-block btn-info" Next Section span class="glyphicon glyphicon-circle-arrow-right"/span /a /div /div 表单支付视图!-- form-payment.html -- div class="text-center" span class="glyphicon glyphicon-heart"/span h3Thanks For Your Money!/h3 button type="submit" class="btn btn-danger"Submit/button /div 既然我们已经定义了这些视图，那么当我们浏览表单时，他们就会显示出来。同样我们用下一个按钮和ui-sref来连接每一个新视图.当使用ui-sref时，你要连接到你路由中定义的state而不是URL。然后Angular会使用这个来为你构建href。下面是我们表单目前的每一个页面。为了让我们的页面不同寻常，让我们加上动画效果。让我们的表单产生动画效果因为在项目开始的时候，我们已经加载了ngAnimate，它已经添加到需要动画的的类上了。当视图进入或退出的时候，它将自动添加类ng-enter和ng-leave。现在我们所有做的就是通过样式形成我们最终的表单。为了理解Angular动画，这篇文章是一个很好的起点。让我们进去css文件，将动画，并应用到我们的表单上/* style.css */ /* ANIMATION STYLINGS ============================================================================= */ #signup-form { position:relative; min-height:300px; overflow:hidden; padding:30px; } #form-views { width:auto; } /* basic styling for entering and leaving */ /* left and right added to ensure full width */ #form-views.ng-enter, #form-views.ng-leave { position:absolute; left:30px; right:30px; transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; } /* enter animation */ #form-views.ng-enter { -webkit-animation:slideInRight 0.5s both ease; -moz-animation:slideInRight 0.5s both ease; animation:slideInRight 0.5s both ease; } /* leave animation */ #form-views.ng-leave { -webkit-animation:slideOutLeft 0.5s both ease; -moz-animation:slideOutLeft 0.5s both ease; animation:slideOutLeft 0.5s both ease; } /* ANIMATIONS ============================================================================= */ /* slide out to the left */ @keyframes slideOutLeft { to { transform: translateX(-200%); } } @-moz-keyframes slideOutLeft { to { -moz-transform: translateX(-200%); } } @-webkit-keyframes slideOutLeft { to { -webkit-transform: translateX(-200%); } } /* slide in from the right */ @keyframes slideInRight { from { transform:translateX(200%); } to { transform: translateX(0); } } @-moz-keyframes slideInRight { from { -moz-transform:translateX(200%); } to { -moz-transform: translateX(0); } } @-webkit-keyframes slideInRight { from { -webkit-transform:translateX(200%); } to { -webkit-transform: translateX(0); } } 首先，确定视图离开或进去时，表单的样式，他们是绝对定位的。需要确认当视图进入的时候一个视图不会放到另一个视图的下面。其次，应用我们的动画到.ng-enter和.ng-leave类第三，用@keyframes定义动画。所有这些部分组合到一起，我们的表单就有了Angular动画，基于状态的UI Router和Angular数据绑定。以上所述是小编给大家分享的AngularJS 使用 UI Router 实现表单向导的相关知识，希望对大家有所帮助。

通过应用这些技巧，您将可以更好地优化您的路由器设置，使其更好地适应您的需求。