简单来说一下ui-route
UI-Router被认为是AngularUI为开发者提供的最实用的一个模块，它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染，而不是仅仅只改变路由（传统AngularJS应用实用的方式）。该模块为开发者提供了很多最视图（view）额外的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭。
使用时需要用ui-view指令指定，如:
需要下载 ui-route文件
然后再页脚引入
接下来，将UI-Router作为web应用的依赖，注入到主程序：
var app = angular.module('app', ['ui.router']);
与集成的ngRoute服务不同的是，UI-Router可以将视图嵌套，因为它基于的是操作状态而仅非URL。与传统做法使用ng-view不同的是，在ngRoute里需要使用ui-view服务。当在ui-router中处理路由和状态时，开发者的重心是当前的状态是什么以及在哪一个页面里。
和ngRoute一样，为特定状态指定的模板将会放在元素中。在这些模板中也可以包含自己的ui-view,这就是在同一个路由下实现嵌套视图的方法。要定义一个路由，与传统的方法相同：使用.config方式，但使用的不是$routeProvider而是$stateProvider。
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('', 'PageTab');
$stateProvider.state('PageTab', {
url: '/PageTab',
templateUrl: 'PageTab.html'
}).state('PageTab.tab1', {
url: '/tab1',
templateUrl: 'tab1.html'
}).state('PageTab.tab2', {
url: '/tab2',
templateUrl: 'tab2.html'
}).state('PageTab.tab3', {
url: '/tab3',
templateUrl: 'tab3.html'
})
})
基本流程大概就是这样了
分享我自己写的一个小案例。
点击page1，下面内容就会有相应的page1.
点击page2，下面内容就会有相应的page2.
点击page3，下面内容就会有相应的page3.
html文件：
tab1.html
创建如下的html页面
page1
tab2.html
创建如下的html页面
page2
tab3.html
创建如下的html页面
page3
PageTab.html
创建如下的html页面
请注意：这儿的，要存放的是子页面的内容。它们就是路由配置中需要被展示的页面.
接下来创建main.html
maim.html里面要引入所需要的插件
还有如何实现他们之间的切换
上面PageTab.html中，我们写了ui-sref这个属性。说白了这个属性就是关联的意思。用了’.‘这个符号
转载于:https://www.cnblogs.com/weiyz/p/7136904.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！