沃梦达 / 编程问答 / 前端问题 / 正文

如何加载嵌套 3 个状态的 UI-router ui-view 模板?

前端问题
2022-01-01

How do I load UI-router ui-view templates that are nested 3 states deep?(如何加载嵌套 3 个状态的 UI-router ui-view 模板?)

本文介绍了如何加载嵌套 3 个状态的 UI-router ui-view 模板?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在我的应用程序中设计多个级别的路由和嵌套视图，以便根据路由替换应用程序的某些部分.我能够加载登录页面，并且布局视图似乎也加载了，但是，我似乎无法让嵌套的 <ui-view/> 标记工作.有人可以告诉我我做错了什么，或者在 Angular 中是否有更惯用的方式来完成相同的功能.

app.js

(function() {'使用严格';有角度的.module('webApp', ['ui.router',]).config(配置).跑跑);config.$inject = ['$stateProvider', '$urlRouterProvider'];功能配置($stateProvider，$urlRouterProvider，ngClipProvider){$urlRouterProvider.otherwise('/');$stateProvider.state('app', {摘要:真实，网址:'/'，模板:'<ui-view/>'}).state('app.login', {templateUrl: 'views/login.html',控制器:'LoginCtrl 作为登录名',网址:''}).state('app.main', {网址:房间"，模板网址:'views/layout.html'}).state('app.main.foo', {网址:''，意见:{'header@app.main': {templateUrl: 'partials/header.html',控制器:'HeaderCtrl 作为标题'},'sidebar@app.main': {templateUrl: 'partials/sidebar.html',控制器:'SidebarCtrl 作为侧边栏'},'main@app.main':{templateUrl: 'partials/main.html',控制器:'MainCtrl 作为主'},'子标题':{templateUrl: '<div><div ui-view="bottomHeader"></div></div>',控制器:'SubHeaderCtrl'，控制器作为:'subHeader'},'副边栏':{templateUrl: '<div><div ui-view="bottomSidebar"></div></div>',控制器:'SubSidebarCtrl'，controllerAs: 'subSidebar'},'bottomHeader': {templateUrl: '<div>FOO</div>'},'bottomSidebar': {templateUrl: '<div>BAR</div>'}},解决: {isAuthenticated: ['Auth', function(Auth) {返回 Auth.isAuthenticated();}]}}).state('app.main.foo.bar', {网址:'/:id'，意见:{'主要的@': {模板网址:'partials/main.html'},'mainOne@': {templateUrl: 'partials/main-one.html',控制器:'MainOneCtrl 作为 mainOne'},'mainTwo@':{templateUrl: 'partials/main-two.html',控制器:'MainTwoCtrl 作为 mainTwo'},'mainThreee@': {templateUrl: 'partials/main-three.html',控制器:'MainThreeCtrl 作为 mainThree'}}});}run.$inject = ['Auth'];功能运行(认证){Auth.stateChangeError();Auth.loginSuccess();Auth.loginFailure();Auth.checkSession();}}());

index.html

<!DOCTYPE html><html lang="en" ng-app="webApp"><头><title>FooBar</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/main.css"/><script src="/js/all.js"></script></头><body ui-view></身体></html>

layout.html

<div ui-view="header"></div><div 类="应用"><div class="入门"></div><div ui-view="sidebar"></div><div ui-view="main"></div></div>

header.html

<header class="header"><div ui-view="subHeader"></div><div class="触发按钮"><按钮类="触发器"><i class="icon-account"></i></按钮></div></标题>

ma​​in.html

<div ui-view="mainOne"></div><div ui-view="mainTwo"></div><div ui-view="mainThree"></div></div>

sidebar.html

<div ui-view="subSidebar"></div></div>

解决方案

有 一个工作插件，显示你的场景

我对你的状态定义做了一些改动:

$stateProvider.state('app', {摘要:真实，网址:'/'，模板:'<ui-view/>'}).state('app.login', {templateUrl: 'views/login.html',控制器:'LoginCtrl'，控制器As:'登录'，网址:''})

我们正在使用 controller 和 controllerAs 语法

 .state('app.main', {网址:房间"，模板网址:'views/layout.html'})

没有绝对的命名，我们针对我们的父母，相对的就足够了，更具可读性

 .state('app.main.foo', {网址:''，意见:{标题":{templateUrl: 'partials/header.html',控制器:'HeaderCtrl'，控制器作为:'标题'，},侧边栏":{templateUrl: 'partials/sidebar.html',控制器:'SidebarCtrl'，controllerAs: '侧边栏',},'主要的': {templateUrl: 'partials/main.html',控制器:'MainCtrl'，控制器作为:'主要'，}},解决: {isAuthenticated: ['Auth', function(Auth) {返回 Auth.isAuthenticated();}]}})

main 状态在我们的父级，不要重新定义它

 .state('app.main.foo.bar', {网址:'/:id'，意见:{'mainOne':{templateUrl: 'partials/main-one.html',控制器:'MainOneCtrl'，控制器作为:'mainOne'，},'mainTwo':{templateUrl: 'partials/main-two.html',控制器:'MainTwoCtrl'，控制器作为:'mainTwo'，},'mainThree': {templateUrl: 'partials/main-three.html',控制器:'MainThreeCtrl'，控制器作为:'mainThree'，}}});

检查它这里

I am attempting to design the routing and nested views in my app several levels deep in order to replace parts of the app based on a route. I'm able to load the login page, and it seems the layout view loads as well, however, I can't seem to get the nested <ui-view /> tags to work. Can someone please tell me how I'm doing this wrong, or if there is a more idiomatic way in Angular to accomplish the same functionality.

app.js

(function() {
  'use strict';



 angular
    .module('webApp', [
      'ui.router',
    ])
    .config(config)
    .run(run);

  config.$inject = ['$stateProvider', '$urlRouterProvider'];

  function config($stateProvider, $urlRouterProvider, ngClipProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('app', {
        abstract: true,
        url: '/',
        template: '<ui-view/>'
      })
      .state('app.login', {
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl as login',
        url: ''
      })
      .state('app.main', {
        url: 'room',
        templateUrl: 'views/layout.html'
      })
      .state('app.main.foo', {
        url: '',
        views: {
          'header@app.main': {
            templateUrl: 'partials/header.html',
            controller: 'HeaderCtrl as header'
          },
          'sidebar@app.main': {
            templateUrl: 'partials/sidebar.html',
            controller: 'SidebarCtrl as sidebar'
          },
          'main@app.main': {
            templateUrl: 'partials/main.html',
            controller: 'MainCtrl as main'
          },
          'subHeader': {
            templateUrl: '<div><div ui-view="bottomHeader"></div></div>',
            controller: 'SubHeaderCtrl',
            controllerAs: 'subHeader'
          },
          'subSidebar': {
            templateUrl: '<div><div ui-view="bottomSidebar"></div></div>',
            controller: 'SubSidebarCtrl',
            controllerAs: 'subSidebar'
          },
          'bottomHeader': {templateUrl: '<div>FOO</div>'},
          'bottomSidebar': {templateUrl: '<div>BAR</div>'}
        },
        resolve: {
          isAuthenticated: ['Auth', function(Auth) {
            return Auth.isAuthenticated();
          }]
        }
      })
      .state('app.main.foo.bar', {
        url: '/:id',
        views: {
          'main@': {
            templateUrl: 'partials/main.html'
          },
          'mainOne@': {
            templateUrl: 'partials/main-one.html',
            controller: 'MainOneCtrl as mainOne'
          },
          'mainTwo@': {
            templateUrl: 'partials/main-two.html',
            controller: 'MainTwoCtrl as mainTwo'
          },
          'mainThreee@': {
            templateUrl: 'partials/main-three.html',
            controller: 'MainThreeCtrl as mainThree'
          }
        }
      });
  }

  run.$inject = ['Auth'];

  function run(Auth) {
    Auth.stateChangeError();
    Auth.loginSuccess();
    Auth.loginFailure();
    Auth.checkSession();
  }

}());

index.html

<!DOCTYPE html>

<html lang="en" ng-app="webApp">
  <head>
    <title>FooBar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/main.css" />
    <script src="/js/all.js"></script>
  </head>

  <body ui-view>
  </body>

</html>

layout.html

<div ui-view="header"></div>

<div class="app">
 <div class="getting-started">
 </div>

 <div ui-view="sidebar"></div>

 <div ui-view="main"></div>
</div>

header.html

<header class="header">
  <div ui-view="subHeader"></div>

  <div class="trigger-button">
    <button class="trigger">
      <i class="icon-account"></i>
    </button>
  </div>
</header>

main.html

<div>
  <div ui-view="mainOne"></div>
  <div ui-view="mainTwo"></div>
  <div ui-view="mainThree"></div>
</div>

sidebar.html

<div>
  <div ui-view="subSidebar"></div>
</div>

解决方案

There is a working plunker, showing your scenario

I've made few changes in your state definition:

$stateProvider
  .state('app', {
    abstract: true,
    url: '/',
    template: '<ui-view/>'
  })
  .state('app.login', {
    templateUrl: 'views/login.html',
    controller: 'LoginCtrl',
    controllerAs: 'login',
    url: ''
  })

We are using controller and controllerAs syntax

  .state('app.main', {
    url: 'room',
    templateUrl: 'views/layout.html'
  })

No absulte naming, we target our parent, relative is enough, more readable

  .state('app.main.foo', {
    url: '',
    views: {
      'header': {
        templateUrl: 'partials/header.html',
        controller: 'HeaderCtrl',
        controllerAs: 'header',
      },
      'sidebar': {
        templateUrl: 'partials/sidebar.html',
        controller: 'SidebarCtrl',
        controllerAs: 'sidebar',
      },
      'main': {
        templateUrl: 'partials/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main',
      }
    },
    resolve: {
      isAuthenticated: ['Auth', function(Auth) {
        return Auth.isAuthenticated();
      }]
    }
  })

main state is in our parent, do not redefine it

  .state('app.main.foo.bar', {
    url: '/:id',
    views: {
      'mainOne': {
        templateUrl: 'partials/main-one.html',
        controller: 'MainOneCtrl',
        controllerAs: 'mainOne',
      },
      'mainTwo': {
        templateUrl: 'partials/main-two.html',
        controller: 'MainTwoCtrl',
        controllerAs: 'mainTwo',
      },
      'mainThreee': {
        templateUrl: 'partials/main-three.html',
        controller: 'MainThreeCtrl',
        controllerAs: 'mainThree',
      }
    }
  });

Check it here

这篇关于如何加载嵌套 3 个状态的 UI-router ui-view 模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

本文标题为：如何加载嵌套 3 个状态的 UI-router ui-view 模板?

上一篇： AngularJS中具有嵌套状态的嵌套视图
下一篇： 在ui-router中的当前状态下如何绑定相关值?

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2