正文

如何在angular js中实现多路由

 2023-05-09  296

关键词：

【中文标题】如何在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，我在所有地方分别进行了更改和编码，但它不起作用

如何在gridview中实现多选

GridView实现跨页多选，参考如下：JS前台：//GridView中实现多选效果function CheckAllC(oCheckbox) var GridView1 = document.getElementById(\'gvDataList\'); for (i = 1; i < gvDataList.rows.length; i++) GridView1.rows[i].cells[0].getEleme... 查看详情

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

】如何在PostgreSQL中实现多对多关系？【英文标题】：Howtoimplementamany-to-manyrelationshipinPostgreSQL?【发布时间】：2012-04-0502:14:21【问题描述】：我相信标题是不言自明的。如何在PostgreSQL中创建表结构以建立多对多关系。我的例子：Pro... 查看详情

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

】如何在laravel护照中实现多身份验证【英文标题】：howtoimplementmultiauthinlaravelpassport【发布时间】：2018-09-0120:51:57【问题描述】：我有两个用户admin/user我想验证这两个用户的api，它适用于一个用户，但不适用于管理员看看我尝试... 查看详情

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

】如何在C中实现多分支树结构【英文标题】：HowtoimplementamultibranchtreestructureinC【发布时间】：2011-08-2713:14:14【问题描述】：我很久没有用C写代码了。我正在尝试做一棵多叶树。我正在尝试将C#trie实现转换为C，以便使用CUDA在GPU... 查看详情

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

】如何在Firebase身份验证中实现多用户帐户登录和切换？【英文标题】：HowdoIwantimplementmultipleuseraccountloginandswitchinginFirebaseAuthentication?【发布时间】：2018-05-0713:08:55【问题描述】：在GmailAndroid应用中，您可以在用户帐户视图上滑... 查看详情

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

】如何使用JavaSpring在MySql中实现多租户[关闭]【英文标题】：HowcanIachievemultitenancyinMySqlbyusingJavaSpring[closed]【发布时间】：2018-02-2605:13:48【问题描述】：如何使用MySqlJavaSpring最佳实践实现多租户，并建议使用任何其他数据库代替MyS... 查看详情

如何在 Sonata Media Bundle 中实现多对多关系

】如何在SonataMediaBundle中实现多对多关系【英文标题】：Howtoimplementmany-to-manyrelationshipsinSonataMediaBundle【发布时间】：2012-07-2117:08:54【问题描述】：我正在尝试将SonataMediaBundle与另一个实体相关联：Products与ManyToMany关系。架构和关... 查看详情

请问如何在delphi中实现多选打印功能！

参考技术A标签打印请问如安在delphi中实现多选打印功能！具体的情况是：DBgrid傍边有很多字段，有很多记录请求做到：第一步，记录的若干是动态的，但要能选择记录打印，数量不限。第二步，字段有很多，再上一步的基本上... 查看详情

如何使用 Visual Studio for Mac 在 Xamarin.Forms 中实现多目标？

】如何使用VisualStudioforMac在Xamarin.Forms中实现多目标？【英文标题】：HowtomultitargetinXamarin.FormswithVisualStudioforMac?【发布时间】：2019-07-2323:37:14【问题描述】：我开始创建一个.NETStandardLibrary并打算创建一个NuGet-但后来发现我还需要... 查看详情

在 iPad App 中实现多用户聊天

...登录该应用的用户发送文本或音频片段。我正在寻找有关如何实现这一点的指针。我阅读了许多文章。我已经缩小到1)XMPP(Jabber)和2)网络套接字基于解决方案查看详情

如何在solr中实现多core查询

参考技术A　　/****多核查询测试*@throwsException*/publicstaticvoidqueryMultiCore()throwsException//查询a和b下面的数据，HttpSolrClientsc=newHttpSolrClient("http://192.168.1.215:8983/solr/a");Stringshards="192.168.1.215:8983/solr/a,192.168.1.214:8983/solr/b";Mod... 查看详情

java示例代码_在Java中实现多线程池

java示例代码_在Java中实现多线程池查看详情

如何在 Angular.js 中延迟路由定义？

】如何在Angular.js中延迟路由定义？【英文标题】：HowtodeferroutesdefinitioninAngular.js?【发布时间】：2012-10-2015:02:05【问题描述】：我已经配置了一些基本路由，所有用户在登录前都可以使用：App.config(function($routeProvider)$routeProvider.whe... 查看详情

使用消息传递接口在 Python 中实现多处理 [关闭]

】使用消息传递接口在Python中实现多处理[关闭]【英文标题】：ImplementmultiprocessinginPythonwithamessagepassinginterface[closed]【发布时间】：2021-03-1204:49:55【问题描述】：我正在尝试将一些JavaScript代码转换为Python，但是JavaScript以异步方式... 查看详情

Angular 和 Express 路由如何在 mean.js 应用程序中协同工作？

】Angular和Express路由如何在mean.js应用程序中协同工作？【英文标题】：HowdoesAngularandExpressroutingworktogetherinamean.jsapp?【发布时间】：2015-12-0713:01:09【问题描述】：我正在为Angular和Express路由而苦苦挣扎（顺便说一下，我对Express有点... 查看详情

我可以使用优化实验在 Anylogic 中实现多目标优化问题吗？

】我可以使用优化实验在Anylogic中实现多目标优化问题吗？【英文标题】：CanIimplementamultiobjectiveoptimizationprobleminAnylogicusingoptimizationexperiment?【发布时间】：2021-02-1517:06:14【问题描述】：我正在尝试在Anylogic中使用基于Anylogic代理... 查看详情

在 MFC 中实现多线程以更新外部函数可访问的内部字典

】在MFC中实现多线程以更新外部函数可访问的内部字典【英文标题】：ImplementingMultithreadinginMFCtoupdateaninternaldictionaryaccessiblebyoutsidefunctions【发布时间】：2011-12-2017:54:15【问题描述】：我正在使用C++和MFC创建一个应用程序，该应用... 查看详情

使用主数据库在 Spring MVC 应用程序中实现多租户？

】使用主数据库在SpringMVC应用程序中实现多租户？【英文标题】：ImplementingmultitenancyinSpringMVCapplicationwithamasterdatabase?【发布时间】：2018-12-0305:39:41【问题描述】：我正在尝试使用基于此代码源demo的SpringMVC、Springsecurity、Hibernate和... 查看详情