[angular]路由与include的选择

向右看齐 2022-06-04 01:48 111阅读 0赞

使用路由分发的结果，就是每次路由到指定url的时候，页面会整体刷新。之前无论打开过多少的页面，会被全部关闭。

var cspRouters = angular.module('cspRouters', ['ui.router']);
    
    cspRouters.config(function($stateProvider, $urlRouterProvider){
    
      $urlRouterProvider.otherwise('/home');
      $stateProvider
        .state('home',{
          url: '/home',
          views: {
            '': {
              templateUrl: 'tpls/home/index.html'
            }
          }
    
        })
     .state('comment',{
          url: '/comment',
          views: {
            '': {
              templateUrl: 'tpls/comment/index.html',
            }
          }
        })
    })

如上，当页面url由home到comment的时候，之前在home下的所有页面将被comment的内容取代。

而我们经常使用的系统，用户一定会更希望每次打开多个页面，在多个页面之间来回切换，就像是浏览器，打开的不同网站，但是打开其他的网页不会关闭之前打开的页面。

怎么解决这个问题呢？

<div class="item" ng-class="{'active':controller.active}" ng-repeat="controller in controllers"
        ng-click="setTabActive(controller)">
          {
       {controller.name}}
          <i class="close icon close_icon" ng-click="closeController(controller,$index)" ></i>
        </div>

这里每一个controller对应的是一个功能模块。点击导航栏中的功能，将对应的controller加入到controllers中。在右侧的展示区ng-repeat方式展示出来就可以。

发表评论取消回复

表情：

评论列表（有 0 条评论，111人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular7获取当前激活的路由与监听路由

取当前激活的路由名称，但是相对而言使用Router会比较好，因为Router能够实时的监听路由的变化，一旦路由发生了变化能马上监听到，在上面的代码中events事件订阅之...

逃离我推掉我的手/ 2024年04月17日 19:33/ 0 赞/ 75 阅读

相关 angular 路由

`index.html` 下添加`<base>` 元素，告诉路由器该如何合成导航用的URL <base href="/">复制代码新建angular项目时...

柔光的暖阳◎/ 2024年04月17日 13:49/ 0 赞/ 99 阅读

相关 Angular2 --- 路由

审查路由器配置你把大量的精力投入到在一系列路由模块文件里配置路由器上，并且小心的以合适的顺序列出它们。这些路由是否真的如同你预想的那样执行了？路

墨蓝/ 2024年02月19日 12:33/ 0 赞/ 86 阅读

相关 [angular]路由与include的选择

使用路由分发的结果，就是每次路由到指定url的时候，页面会整体刷新。之前无论打开过多少的页面，会被全部关闭。 var cspRouters = angular.mod

向右看齐/ 2022年06月04日 01:48/ 0 赞/ 112 阅读

相关 angular 嵌套路由

mylogin.component.ts import { Component, OnInit } from '@angular/core'; @C

桃扇骨/ 2022年06月01日 07:00/ 0 赞/ 303 阅读

相关 Angular 路由 ( 二 )

Angular 路由 ( 二 ) > 应用有一个`配置过的路由器`。外壳组件中有一个`RouterOutlet`，它能显示路由器所生成的视图。它还有一些 `Router

我不是女神ヾ/ 2022年05月24日 12:43/ 0 赞/ 335 阅读

相关 Angular 路由(一)

Angular 路由一描述路由 Angular 是一个单页面的应用所有的页面展示都在本页面内完成。我们实现页面局部刷新展示一个班级的学生信息时， 1.

电玩女神/ 2022年05月23日 05:25/ 0 赞/ 258 阅读

相关 Angular 路由⑦要素

[![返回主页][logo.gif]cnzt][logo.gif_cnzt] /images/20211229/cd5055aaddfb4a68afcd52b0e5e805f

╰半橙微兮°/ 2022年01月05日 09:11/ 0 赞/ 361 阅读

相关 Angular 学习（五）：Angular 路由（Route）

Angular 路由（Route）我们可以将路由器理解成控制整个应用状态的视图对象，每个应用都有一个路由器；路由器的另一个作用是为每个视图分配唯一的 url，可以

深藏阁楼爱情的钟/ 2021年09月29日 01:48/ 0 赞/ 504 阅读

相关 Angular--路由的基础知识

前言我们经常可以听到路由器，通过路由器我们可以连接wifi上网。今天我总结的这个路由跟路由器不是一个类型的，这个路由指的是路径，而非器材内容路由的内容大致有

àì夳堔傛蜴生んèń/ 2021年09月27日 07:48/ 0 赞/ 356 阅读