如何在angular js中实现多路由

Posted 2023-05-09

技术标签:

【中文标题】如何在angular js中实现多路由【英文标题】：How to achieve multiple routing in angular js 【发布时间】：2018-11-22 23:10:07 【问题描述】：

我在Angular JS 中练习routing。到目前为止，我已经研究了 2 页路由，但现在我想实现 3 页路由。

(function() 
  'use strict';
  angular
    .module('testTabs', ['ngMaterial', 'ui.router', 'ngAnimate'])

  .config(function($stateProvider, $urlRouterProvider) 
    $urlRouterProvider.otherwise('/one');
    $stateProvider
      .state('one', 
        url: '/one',
        templateUrl: 'views/one.html'
      )
      .state('two', 
        url: '/two',
        templateUrl: 'views/two.html'
      )
      .state('three', 
        url: '/three',
        templateUrl: 'views/three.html'
      );
  )

)();

#tab-container 
  position: relative;
  min-height: 500px;
  overflow: hidden;


#tab-content 
  background: #f6f6f6;
  border: 1px solid #e1e1e1;
  min-height: 200px;
  width: 100%;



/* basic animation applied upon partial change */

#tab-content.ng-enter,
#tab-content.ng-leave 
  position: absolute;
  transition: 0.8s all ease;
  -moz-transition: 0.8s all ease;
  -webkit-transition: 0.8s all ease;


#tab-content.ng-enter 
  -webkit-animation: slideRight 0.8s both ease;
  -moz-animation: slideRight 0.8s both ease;
  animation: slideRight 0.8s both ease;


#tab-content.ng-leave 
  -webkit-animation: slideLeft 0.8s both ease;
  -moz-animation: slideLeft 0.8s both ease;
  animation: slideLeft 0.8s both ease;



/*Animations */

@keyframes slideLeft 
  to 
    transform: translateX(-200%);
  


@-moz-keyframes slideLeft 
  to 
    -moz-transform: translateX(-200%);
  


@-webkit-keyframes slideLeft 
  to 
    -webkit-transform: translateX(-200%);
  


@keyframes slideRight 
  from 
    transform: translateX(200%);
  
  to 
    transform: translateX(0);
  


@-moz-keyframes slideRight 
  from 
    -moz-transform: translateX(200%);
  
  to 
    -moz-transform: translateX(0);
  


@-webkit-keyframes slideRight 
  from 
    -webkit-transform: translateX(200%);
  
  to 
    -webkit-transform: translateX(0);

<!DOCTYPE html>
<html>
<head>
	<title>PG Application</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
  <script src="app.js"></script>
</head>
<body>
	<div ng-cloak="" ng-app="testTabs">

  <script type="text/ng-template" id="views/one.html">
    <h1 class="md-display-1">Partial 1</h1>
 </script>
  <script type="text/ng-template" id="views/two.html">
    <h1 class="md-display-1">Partial 2</h1> </script>
  <script type="text/ng-template" id="views/three.html">
    <h1 class="md-display-1">Partial 3</h1 </script>
  
  <md-content id="tab-container" class="">
    <md-tabs md-dynamic- md-border-bottom="">
      <md-tab label="Tab 1" data-ui-sref="one" md-active="true">
      </md-tab>
      <md-tab label="Tab 2" data-ui-sref="two">
      </md-tab>
      <md-tab label="Tab 3" data-ui-sref="three">
      </md-tab>
    </md-tabs>
    <md-content id="tab-content" class="md-padding" data-ui-view flex> </md-content>
  </md-content>
 
</div>

</body>
</html>

以上代码运行良好。

问题：如果我们点击partial 1，那么它必须被重定向并显示表格数据。

但现在我想将下面的代码链接到Partial 1，这意味着如果点击它必须显示显示以下输出的表格数据

var app=angular.module('myApp',[]);
app.controller('basicsCtrl', ['$scope', function ($scope) 
    $scope.rowCollection = [
        firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), email: 'whatever@gmail.com',
        firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), email: 'oufblandou@gmail.com',
        firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), email: 'raymondef@gmail.com'
    ];
]);

<!DOCTYPE html>
<html>
<head>
	<title>Table</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
	<script src="tapp.js"></script>
</head>
<body ng-app="myApp" ng-controller="basicsCtrl">
<table class="table table-striped">
	<thead>
	<tr>
		<th>first name</th>
		<th>last name</th>
		<th>birth date</th>
		<th>balance</th>
		<th>email</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="row in rowCollection">
		<td>row.firstName</td>
		<td>row.lastName</td>
		<td>row.birthDate</td>
		<td>row.balance</td>
		<td>row.email</td>
	</tr>
	</tbody>
</table>
</body>
</html>

【问题讨论】：

【参考方案1】：

要在单击 Partial 1 时显示新模板，您需要一个嵌套视图，您可以使用 ui-view 和您选择的嵌套状态（我使用 Dot Notation 带有 inner 视图）

这是一个工作示例：

var app = angular
  .module('testTabs', ['ngMaterial', 'ui.router', 'ngAnimate'])

app.config(function($stateProvider, $urlRouterProvider) 
  $urlRouterProvider.otherwise('/one');
  $stateProvider
    .state('one', 
      url: '/one',
      templateUrl: 'views/one.html'
    )
    .state('one.inner', 
      url: '/inner',
      templateUrl: 'views/one-inner.html'
    )
    .state('two', 
      url: '/two',
      templateUrl: 'views/two.html'
    )
    .state('three', 
      url: '/three',
      templateUrl: 'views/three.html'
    );
)
app.controller('basicsCtrl', ['$scope', function($scope) 
  $scope.rowCollection = [
      firstName: 'Laurent',
      lastName: 'Renard',
      birthDate: new Date('1987-05-21'),
      email: 'whatever@gmail.com'
    ,
    
      firstName: 'Blandine',
      lastName: 'Faivre',
      birthDate: new Date('1987-04-25'),
      email: 'oufblandou@gmail.com'
    ,
    
      firstName: 'Francoise',
      lastName: 'Frere',
      birthDate: new Date('1955-08-27'),
      email: 'raymondef@gmail.com'
    
  ];
]);

#tab-container 
  position: relative;
  min-height: 500px;
  overflow: hidden;


#tab-content 
  background: #f6f6f6;
  border: 1px solid #e1e1e1;
  min-height: 200px;
  width: 100%;



/* basic animation applied upon partial change */

#tab-content.ng-enter,
#tab-content.ng-leave 
  position: absolute;
  transition: 0.8s all ease;
  -moz-transition: 0.8s all ease;
  -webkit-transition: 0.8s all ease;


#tab-content.ng-enter 
  -webkit-animation: slideRight 0.8s both ease;
  -moz-animation: slideRight 0.8s both ease;
  animation: slideRight 0.8s both ease;


#tab-content.ng-leave 
  -webkit-animation: slideLeft 0.8s both ease;
  -moz-animation: slideLeft 0.8s both ease;
  animation: slideLeft 0.8s both ease;



/*Animations */

@keyframes slideLeft 
  to 
    transform: translateX(-200%);
  


@-moz-keyframes slideLeft 
  to 
    -moz-transform: translateX(-200%);
  


@-webkit-keyframes slideLeft 
  to 
    -webkit-transform: translateX(-200%);
  


@keyframes slideRight 
  from 
    transform: translateX(200%);
  
  to 
    transform: translateX(0);
  


@-moz-keyframes slideRight 
  from 
    -moz-transform: translateX(200%);
  
  to 
    -moz-transform: translateX(0);
  


@-webkit-keyframes slideRight 
  from 
    -webkit-transform: translateX(200%);
  
  to 
    -webkit-transform: translateX(0);

<!DOCTYPE html>
<html>

<head>
  <title>PG Application</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-cloak="" ng-app="testTabs">

    <script type="text/ng-template" id="views/one.html">
      <h1 class="md-display-1"><a ui-sref="one.inner">Partial 1</a></h1>
      <div ui-view></div>
    </script>
    <script type="text/ng-template" id="views/one-inner.html">
      <div ng-controller="basicsCtrl">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>first name</th>
              <th>last name</th>
              <th>birth date</th>
              <th>balance</th>
              <th>email</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in rowCollection">
              <td>row.firstName</td>
              <td>row.lastName</td>
              <td>row.birthDate | date</td>
              <td>row.balance</td>
              <td>row.email</td>
            </tr>
          </tbody>
        </table>
      </div>
    </script>
    <script type="text/ng-template" id="views/two.html">
      <h1 class="md-display-1">Partial 2</h1>
    </script>
    <script type="text/ng-template" id="views/three.html">
      <h1 class="md-display-1">Partial 3</h1 </script>

      <md-content id="tab-container" class="">
        <md-tabs md-dynamic- md-border-bottom="">
          <md-tab label="Tab 1" data-ui-sref="one" md-active="true">
          </md-tab>
          <md-tab label="Tab 2" data-ui-sref="two">
          </md-tab>
          <md-tab label="Tab 3" data-ui-sref="three">
          </md-tab>
        </md-tabs>
        <md-content id="tab-content" class="md-padding" data-ui-view flex> </md-content>
      </md-content>

  </div>

</body>

</html>

【讨论】：

你已经完成了工作。我的问题是当我们点击部分1时我必须显示表格数据。这是我的问题如何实现？请帮助如何实现这一目标？ @RammohanBandaru 所以你想要一个嵌套视图？我已经编辑了答案我又添加了一个部分，即portion2，我在所有地方分别进行了更改和编码，但它不起作用

以上是关于如何在angular js中实现多路由的主要内容，如果未能解决你的问题，请参考以下文章

如何在GridView中实现多选

如何在 PostgreSQL 中实现多对多关系？

如何在 laravel 护照中实现多身份验证

如何在 C 中实现多分支树结构

如何使用 Java Spring 在 MySql 中实现多租户 [关闭]

如何在 Firebase 身份验证中实现多用户帐户登录和切换？