Как добиться множественной маршрутизации в угловой JS - PullRequest
Новая
       8

Как добиться множественной маршрутизации в угловой JS

0 голосов
/ 13 июня 2018

Я практикую 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 голосов
/ 13 июня 2018

Чтобы отобразить новый шаблон при нажатии на Частичное 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...