最近研究了一下ui-view多层嵌套，整理了一下
1.最简单的ui-view用法
html部分：
路由配置：
var app = angular.module('myApp',["ui.router"]);app.config(["$stateProvider","$urlRouterProvider", function ($stateProvider,$urlRouterProvider) { $stateProvider .state("home", { url: '/home', templateUrl:'template/home.html', controller:'homeCtrl' }) .state("news", { url: '/news', templateUrl:'template/news.html', controller:'newsCtrl' }) .state("details",{ url:'/news/details', templateUrl:'template/newsDetails.html', controller:'detailsCtrl' }) .state("center", { url: '/center', templateUrl:'template/setCenter.html', controller:'centerCtrl' }); $urlRouterProvider.otherwise('/home');}]); 2.多视口
html部分：
路由配置：
var app = angular.module('myApp',["ui.router","ui.bootstrap"]);app.config(["$stateProvider","$urlRouterProvider", function ($stateProvider,$urlRouterProvider) { $stateProvider .state("home", { url: '/home', views:{ 'home':{template:" "}, 'left':{template:"left"}, 'right':{template:"right"}, 'body@home':{templateUrl:'template_views/home.html'}, 'footer@home':{template:"首页底部"} } }) .state('home.news',{ url:'/news', views:{ 'body@home':{templateUrl:'template_views/news.html'}, 'footer@home':{template:"新闻底部"} } }) .state('home.newsDetails',{ url:"/news/details/:id", views:{ 'body@home':{ template:"新闻详情", controller:function ($stateParams) { alert('id:'+ $stateParams.id); } }, 'footer@home':{template:"新闻详情底部"} } }) .state('home.center',{ url:'/center', views:{ 'body@home':{templateUrl:'template_views/setCenter.html'}, 'footer@home':{template:"个人中心底部"} } }); $urlRouterProvider.otherwise('/home');}]); 这里需要注意的是路由传参，这里把news.html内容贴出来
ui-sref="home.newsDetails({id:1})"这样跳转的时候就把id传给了新闻详情；在新闻详情的控制器里就可以通过$stateParams.id得到传过来的id 3.多层ui-view嵌套 写了一个小demo，首先看一下结构 
myExercise.html代码：
ui-view三层嵌套
ocLazyLoad.js是用来分步加载js,css等文件的，后面可以再路由配置里看到具体用法，有了这个对于项目初次加载的速度有很大提升，但是不需要的这里也可以不必引入； js文件夹结构
前两个控制器都是空的，没写什么逻辑就不展示了，先看一下myConfig.js，路由配置（多层嵌套精髓都在这里啦）：
var app = angular.module('myApp',["ui.router","oc.lazyLoad"]);app.config(function ($stateProvider,$locationProvider, $urlRouterProvider,$ocLazyLoadProvider) { $stateProvider .state('content',{ url: '/', views:{ "":{ template: ' ', controller:'contentCtrl' }, "header@content":{templateUrl: 'myTemplate/header.html'} } }) .state('content.home',{ url:'home', views:{ "body@content":{ templateUrl:'myTemplate/home.html', controller:'homeCtrl' } }, resolve:{ deps: ['$ocLazyLoad', function($ocLazyLoad) { // you can lazy load files for an existing module return $ocLazyLoad.load([ 'js/homeCtrl.js', 'css/home.css' ]); }] } }) .state('content.news',{ url:'news', views:{ "body@content":{template:' '} } }) .state('content.news.list',{ url:'/list', templateUrl:'myTemplate/news.html' }) .state('content.news.list.recommend',{ url:'/recommend', templateUrl:'myTemplate/news-list-recommend.html' }) .state('content.news.list.hot',{ url:'/hot', templateUrl:'myTemplate/news-list-hot.html' }) .state('content.news.list.sport',{ url:'/sport', templateUrl:'myTemplate/news-list-sport.html' }) .state('content.news.details',{ url:'/details/:type/:id', templateUrl:'myTemplate/news-details.html', controller:'newsDetailCtrl', resolve:{ deps: ['$ocLazyLoad', function($ocLazyLoad) { // you can lazy load files for an existing module return $ocLazyLoad.load([ 'js/newsDetailCtrl.js', 'css/newsDetail.css' ]); }] } }) .state('content.news.details.comment',{ url:'/details/comment', templateUrl:'myTemplate/news-detail-comment.html' }) .state('content.about',{ url:'about', views:{ "body@content":{templateUrl:'myTemplate/about.html'} } }); $urlRouterProvider.otherwise('home');}); 结合路由配置，看一下template模板代码：
首先是header.html
news.html
news-details.html
{ {type}}:新闻详情查看评论
推荐列表 点击查看新闻详情,通过相对路径跳转热门列表 点击查看新闻详情，通过绝对路径跳转体育列表 点击查看新闻详情
模板就展示这几个了，其它的都是随便写的text文字了，随便写点东西就行，到这里就差不多完成了.
接下来展示一下newsDeatilCtrl.js
angular.module('myApp').controller('newsDetailCtrl',['$scope','$stateParams',function ($scope,$stateParams) { $scope.type = $stateParams.type;}]); 这里通过$stateParams来接收路由跳转传过来的参数。
好啦，到这里就大功告成了。