AngularJS 单路由多视图(Multiple Named Views)

AngularJS $route的局限性：一个路由只能影响一个ng-view 
不是所有页面只有一栏，往往有两栏或两栏以上,例如:左边的功能导航和右边的正文区或三栏布局,下图是一个大概示例 

上面的图片来自:https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

对了，此文会介绍:ui-router,它弥补了AngularJS在路由和视图的单ng-view和嵌套路由的不足,这里只会介绍：单路由多视图，也会介绍不用ui-router该怎么办?

业务需求,网页中有些页面是存在左侧边栏的,有些页面没有左侧边栏，当有左侧边栏的路由执行完时，左侧边栏也要根据路由有所变化，例：新闻的左边栏和频道的左边栏内容不一样.

dom结构:

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--左侧边栏 --></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">aside</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">aside</span>></span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!-- 页面正文区--></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

如果不用ui-router,并且可以改变dom结构你可以这样:

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--左侧边栏         <aside></aside>        页面正文区        <div></div>        --></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-view</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

你可能会想到下面要作的事情，不错在templateUrl指向的页面中用ng-include分别引入左侧边栏模板和正文模板，例如:

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">        <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$routeProvider</span>.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">when</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/article'</span>,{            <span class="hljs-symbol" style="color: rgb(0, 102, 102); box-sizing: border-box;">templateUrl:</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'partials/article.html'</span>,            <span class="hljs-symbol" style="color: rgb(0, 102, 102); box-sizing: border-box;">controller:</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'DefaultCtrl'</span>,            <span class="hljs-symbol" style="color: rgb(0, 102, 102); box-sizing: border-box;">asideUrl:</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'partials/article-left-aside.html'</span>,            <span class="hljs-symbol" style="color: rgb(0, 102, 102); box-sizing: border-box;">bodyUrl:</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'partials/article-list.html'</span>        })</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

以下为partials/article.html的示例

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--左侧边栏 --></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">aside</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-include</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">'$route.current.asideUrl'</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">aside</span>></span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!-- 页面正文区 --></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-include</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">'$route.current.bodyUrl'</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

我只是在书中看到有此一解.哪来看一看用ui-router的示例吧

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--左侧边栏 --></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">aside</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"aside"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">aside</span>></span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!-- 页面正文区--></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"main"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

1.由ng-view 改为ui-view如果此处没改的话，可以看到模板已经加载但浏览器不会显示

2.多个ui-view中有一个可以不赋值,例如:

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--左侧边栏 --></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">aside</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"aside"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">aside</span>></span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!-- 页面正文区--></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

没有赋值的在下面使用时用: ’ ‘,只需把示例代码中的main替换成’ ‘即可

3.某些页面如果不需左侧边侧，可以正常使用，只要在写$stateProvider views中不写即可.

4.示例:app.js

<code class="hljs php has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">angular.module(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'spa'</span>, [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ui.router'</span>]).run([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$rootScope'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$state'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$stateParams'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$rootScope</span>,   <span class="hljs-variable" style="box-sizing: border-box;">$state</span>,   <span class="hljs-variable" style="box-sizing: border-box;">$stateParams</span>)</span> {</span>    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$rootScope</span>.<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$state</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$state</span>;    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$rootScope</span>.<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$stateParams</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$stateParams</span>;}]).config([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$stateProvider'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$urlRouterProvider'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$stateProvider</span>,   <span class="hljs-variable" style="box-sizing: border-box;">$urlRouterProvider</span>)</span> {</span>    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$urlRouterProvider</span>.when(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/home"</span>);      <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$stateProvider</span>.state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"home"</span>, {        url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/home'</span>,        views:{            <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'main'</span>:{                templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'page/article.html'</span>,                controller: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$scope</span>)</span>{</span>                    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$scope</span>.title=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'this is a demo'</span>;                }            },            <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'aside'</span>:{                templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'page/article-aside.html'</span>                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//只是一个静态html，可以不提供controller</span>            }        }    })    .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"channel"</span>,{        url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/channel'</span>,        views:{            <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'main'</span>:{                templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'page/channel.html'</span>,                controller: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$scope</span>)</span>{</span>                    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$scope</span>.title=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'this is a demo'</span>;                }            },            <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'aside'</span>:{                templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'page/channel-aside.html'</span>,                controller:<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$scope</span>)</span>{</span>                    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//可以从缓存或db中取</span>                    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$scope</span>.result=[{marker:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'it'</span>,name:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'科技'</span>},{marker:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'life'</span>,name:<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'生活'</span>}];                }            }        }    })    .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"user"</span>,{        url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/user'</span>,        views:{            <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'main'</span>:{                templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'page/user.html'</span>,                controller: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$scope</span>)</span>{</span>                    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$scope</span>.title=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'this is a demo'</span>;                }            }            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//这里不需要有左侧边栏</span>        }    });}]);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li></ul>

5.如果只需要一个route对应一个ng-view可以使用ui-router吗？当然可以,下面是一个基础架子

index.html

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--左侧边栏         <aside ui-view="aside"></aside>        页面正文区--></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

app.js

<code class="hljs php has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">angular.module(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'spa'</span>, [<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ui.router'</span>]).run([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$rootScope'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$state'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$stateParams'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$rootScope</span>,   <span class="hljs-variable" style="box-sizing: border-box;">$state</span>,   <span class="hljs-variable" style="box-sizing: border-box;">$stateParams</span>)</span> {</span>    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$rootScope</span>.<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$state</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$state</span>;    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$rootScope</span>.<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$stateParams</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$stateParams</span>;}]).config([<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$stateProvider'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$urlRouterProvider'</span>,<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$stateProvider</span>,   <span class="hljs-variable" style="box-sizing: border-box;">$urlRouterProvider</span>)</span> {</span>    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$urlRouterProvider</span>.when(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/home"</span>);     <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$stateProvider</span>.state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"home"</span>, {        url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/home'</span>,        templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'page/article.html'</span>,        controller: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$scope</span>)</span>{</span>            <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$scope</span>.title=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'this is home page'</span>;        }    })    .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"channel"</span>,{        url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/channel'</span>,        templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'page/channel.html'</span>,        controller: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$scope</span>)</span>{</span>           <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$scope</span>.title=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'this is channel'</span>;        }    })    .state(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"user"</span>,{        url: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'/user'</span>,        templateUrl: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'page/user.html'</span>,        controller: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$scope</span>)</span>{</span>            <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$scope</span>.title=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'this is a user'</span>;        }    });}]);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li></ul><div class="save_code tracking-ad" data-mod="popu_249" style="box-sizing: border-box; position: absolute; height: 60px; right: 30px; top: 5px; color: rgb(255, 255, 255); cursor: pointer; z-index: 2;"></div>

6.路由地址(stateName以user打头)不需要aside时,ng-hide aside

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--左侧边栏 --></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">aside</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"aside"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-hide</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"$state.current.name.indexOf('user')"</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">aside</span>></span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!-- 页面正文区--></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ui-view</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span></code>

源引：http://blog.csdn.net/xiaofanku/article/details/50932115