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

╰半夏微凉° 2022-09-26 11:46 133阅读 0赞

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

上面的图片来自:[https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views][https_github.com_angular-ui_ui-router_wiki_Multiple-Named-Views]

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

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

dom结构:

如果不用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;"> <body>
 
 <div ng-view></div>
 </body></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;"> $routeProvider.when('/article',{
 templateUrl:'partials/article.html',
 controller:'DefaultCtrl',
 asideUrl: 'partials/article-left-aside.html',
 bodyUrl: 'partials/article-list.html'
 })</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的示例

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

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

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

没有赋值的在下面使用时用: ’ ‘,只需把示例代码中的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('spa', ['ui.router'])
 .run(['$rootScope', '$state', '$stateParams',function ($rootScope, $state, $stateParams) {
 $rootScope.$state = $state;
 $rootScope.$stateParams = $stateParams;
 }])
 .config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider) {
 $urlRouterProvider.when("","/home"); 
 $stateProvider.state("home", {
 url: '/home',
 views:{
 'main':{
 templateUrl: 'page/article.html',
 controller: function($scope){
 $scope.title='this is a demo';
 }
 },
 'aside':{
 templateUrl: 'page/article-aside.html'
 //只是一个静态html，可以不提供controller
 }
 }
 })
 .state("channel",{
 url: '/channel',
 views:{
 'main':{
 templateUrl: 'page/channel.html',
 controller: function($scope){
 $scope.title='this is a demo';
 }
 },
 'aside':{
 templateUrl: 'page/channel-aside.html',
 controller:function($scope){
 //可以从缓存或db中取
 $scope.result=[{marker:'it',name:'科技'},{marker:'life',name:'生活'}];
 }
 }
 }
 })
 .state("user",{
 url: '/user',
 views:{
 'main':{
 templateUrl: 'page/user.html',
 controller: function($scope){
 $scope.title='this is a demo';
 }
 }
 //这里不需要有左侧边栏
 }
 });
 }]);</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;"> <body>
 
 <div ui-view></div>
 </body></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

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

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

[20160319163057687]: /images/20220717/42b81a77027549388d4141842ec42f82.png
[https_github.com_angular-ui_ui-router_wiki_Multiple-Named-Views]: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
[ui-router]: https://github.com/angular-ui/ui-router/