写在前面：
ui-是的一个插件 ， 因为前面几个版本自带的原生ng-不能很好的满足开发需求 ， 所以在实现单页面嵌套的时候 ， 都是使用ui- 。本文是的内容关于 ui-实现过程 ， 内含demo以及代码地址 ， 需要的朋友可以过来参考下 ， 喜欢的可以点波赞 ， 或者关注一下本人 ， ui-的实现过程并不复杂 ， 希望通过本文大家能够学会ui-的使用方法 。
ui-与ng-：
UI-是原生ng-route进化版 ， 相较与ng-有如下两条优点：
视图不能嵌套,这意味着$scope会发生不必要的重新载入 。
同一URL下不支持多个视图 。这一需求也是常见的：我们希望导航栏用一个视图（和相应的控制器）、内容部分用另一个视图（和相应的控制器） 。
最终实现demo效果
单页面实现原理：
路由允许我们通过不同的 URL 访问不同的内容 ， 通常我们的URL形式为 ， 在单页Web应用中通过# + 标记实现 ， 例如：
http://runoob.com/#/firsthttp://runoob.com/#/secondhttp://runoob.com/#/third
当我们访问这上面任意一个链接的时候 ， 向服务端请求的都是同一个地址：#号之后的内容在向服务端请求时会被浏览器忽略掉
路由就通过# + 标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上 ， 如下图所示：
不同的视图页面对应不同的控制器demo地址ui-实现过程 1、创建页面：
要实现上文那个demo效果 ， 我们需要创建如下页面：
app.js
这是路由的配置页面index.html
通常叫做index.html是单页面的首页 ， 里面导入了各种css样式、库 ， 插件 ， 框架之类的 。.html
【angular ui-router：简单的单页面嵌套路由的实现过程】进入index.html首先展示的视图页面 ， 下面几个是下面的嵌套页面Page-1.-2.-3.html
代码上传到上面了 ， 需要的朋友可以自行查看：代码地址
注：用的是：1.4.6 ， ui-用的是1.0
ps：现在 ， 自带的原生ng-好像也已经支持了多层嵌套 。但是因为还没流传开 ， 市面上 ， 大多还是1.4 ， 所以还是需要用到ui- 。
2、在index.html里面导入js文件
"https://cdn.bootcss.com/angular.js/1.4.6/angular.js">"https://cdn.bootcss.com/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">"App.js">
1.文件 ， 2.ui-插件,3.路由js页面
注意：文件必须在ui-前面 ， 因为ui-是依赖的插件 。
这几个文件是最基本的页面 ， 如果是一个完整的单页面项目的话 ， index,html是这幅样子：
在单页面中 ， 不管你从哪个视图查看网页代码 ， 都是这样子 ， 第一次看的都醉了！
3.app.js
app.js声明了模块和路由配置 。当页面加载的时候我们会在index.html中显示.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"});});