Question

我的应用非常简单。我有一个包含标题和正文的主页。在正文部分我想显示登录页面，如果网址改为＆＃39;密码/忘记＆＃39;我显示密码重置表单。我的模板：

index.html ：

<header ui-view="header">
</header>
<div class="container-fluid">
    <div class="row">
        <div ui-view="main">
        </div>
    </div>
</div>

home.html的：

   <div ui-view>
    </div>

ui-router config就是这样：

 $locationProvider.html5Mode({enabled: true, requireBase: false});
 $stateProvider.state('home', {
     url: '/',
     views: {
       'header': {
         templateUrl: '/header.html'
       },
       'main': {
          templateUrl: '/home.html'
       }
 }
 }).state('home.forgetPassword', {
    url: '/password/forget',
    templateUrl: '/forgetPassword.html',
});

现在，当我去＆＃34; /密码/忘记＆＃34;发生任何事情并且 index.html 正在显示。我想在路线更改为＆＃34; / password / forget＆＃34;时显示 forgetPassword.html 。

Answer 1

在ui-router的文档中使用此代码：

myApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('state1', {
      url: "/state1",
      templateUrl: "partials/state1.html"
    })
    .state('state1.list', {
      url: "/list",
      templateUrl: "partials/state1.list.html",
      controller: function($scope) {
        $scope.items = ["A", "List", "Of", "Items"];
      }
    })
    .state('state2', {
      url: "/state2",
      templateUrl: "partials/state2.html"
    })
    .state('state2.list', {
      url: "/list",
      templateUrl: "partials/state2.list.html",
      controller: function($scope) {
        $scope.things = ["A", "Set", "Of", "Things"];
      }
    });
});

我建议首先创建＆＃39;密码＆＃39; 状态。

尝试以下解决方案：

$stateProvider.state('home', {
     url: '/',
     views: {
       'header': {
         templateUrl: '/header.html'
       },
       'main': {
          templateUrl: '/home.html'
       }
 }
 }).state('password', {
    url: '/password',
    templateUrl: '/password.html',
}).state('password.forgetPassword', {
    url: '/forget',
    templateUrl: '/forgetPassword.html',
});

立即创建文件＆＃39; password.html＆＃39; ，稍后可能对＆＃39; / password＆＃39; 视图有用

Answer 2

问题解决了。它是在父状态下的/并在子状态上重复它。

如何在angular ui路由器中的多个视图上创建嵌套视图？

2 个答案: