如何在角度js中实现多路由

时间：2018-06-13 11:25:25

标签： jquery html css angularjs angular-ui-router

我在routing练习Angular JS。到目前为止，我已经在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-height="" 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 个答案:

答案 0 :(得分：-1)

要在点击 Partial 1 时显示新模板，您需要一个嵌套视图，您可以使用ui-view和您选择的嵌套状态实现（我使用点符号带有内部视图）

这是一个有效的例子：

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-height="" 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>

相关问题
最新问题