ui-router是angular的一个插件，因为angular前面几个版本自带的原生ng-router不能很好的满足开发需求，所以在实现angular单页面嵌套的时候，都是使用ui-router。本文是的内容关于angular ui-router实现过程，内含demo以及代码地址，需要的朋友可以过来参考下，喜欢的可以点波赞，或者关注一下本人，ui-router的实现过程并不复杂，希望通过本文大家能够学会ui-router的使用方法。
1.angular文件，2.ui-router插件,3.路由js页面
注意：angular文件必须在ui-router前面，因为ui-router是依赖angular的插件。
这几个文件是最基本的页面，如果是一个完整的angular单页面项目的话，index,html是这幅样子：
在单页面中，不管你从哪个视图查看网页代码，都是这样子，第一次看的都醉了！
3.app.js
app.js声明了AngularJS模块和路由配置。当页面加载的时候我们会在index.html中显示PageTab.html的内容。具体代码如下，每一个关键的地方都有相应的注释注释注释：
var myApp = angular.module("myApp", ["ui.router"]);
//这里叫做App模块，这将告诉HTML页面这是一个AngularJS作用的页面，并把ui-router注入AngularJS主模块，它的内容由AngularJS引擎来解释。
myApp.config(function ($stateProvider, $urlRouterProvider) {
//这一行声明了把 $stateProvider 和 $urlRouteProvider 路由引擎作为函数参数传入，这样我们就可以为这个应用程序配置路由了.
$urlRouterProvider.when("", "/PageTab");
//如果没有路由引擎能匹配当前的导航状态，默认将路径路由至 PageTab.html, 那它就像switch case语句中的default选项.就是一个默认的视图选项
$stateProvider
//这一行定义了会在main.html页面第一个显示出来的状态（就是进入页面先加载的html），作为页面被加载好以后第一个被使用的路由.
.state("PageTab", {//导航用的名字
url: "/PageTab",//#+标识符，这里就是url地址栏上面的标识符，通过标识符，进入不同的html页面
templateUrl: "PageTab.html"//这里是html的路径，这是跟标识符相对应的html页面
})
.state("PageTab.Page1", {//引号里面代表Page1是PageTab的子页面，用.隔开
url:"/Page1",
templateUrl: "Page-1.html"
})
.state("PageTab.Page2", {//需要跳转页面的时候，就是用这双引号里面的地址
url:"/Page2",
templateUrl: "Page-2.html"
})
.state("PageTab.Page3", {
url:"/Page3",
templateUrl: "Page3.html"
});
});
现在已经成功把appjs实现出来，然后需要在html里面定义视图，以及视图跳转链接
4.html定义视图
现在要把我们写好的html视图页面在页面中展示出来，我们来看看index.html里面的代码：
在ui-view=""的双引号里面，ui-view展示的页面是根据app.js设置的url对应的html来展示的。
嵌套页面跳转：
导航里面的名字必须是“父页面的名字.子页面的名字”
比如：
.state("PageTab", {//这里是名字
url: "/PageTab",
templateUrl: "PageTab.html"
})
.state("PageTab.Page1", {//意思是PageTab视图下面的Page1视图
url:"/Page1",
templateUrl: "Page-1.html"
})
在html里面，用ui-sref进行跳转
demo代码栗子：
下面这几个按钮是在主页面下面再嵌套一层的页面
Page-1
Page-2
Page-3
作者：OBKoro1
链接：http://www.jianshu.com/p/cd5de7f478ac
來源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。