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