Tips on implementing multiple routing in AngularJS

I am currently honing my skills in Angular JS routing. After successfully implementing 2 pages routing, I now aim to achieve 3 pages routing.

(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>

The above code is functioning correctly.

Issue: When clicking on partial 1, it should redirect and display the table data.

Now, I would like to link the following code to Partial 1. So that when clicked, it will display the table data as shown below.

var app=angular.module('myApp',[]);
app.controller('basicsCtrl', ['$scope', function ($scope) {
    $scope.rowCollection = [
        {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7a0bfb6a3b2a1b2a597b0bab6bebbf9b4b8ba">[email protected]</a>'},
        {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91fee4f7f3fdf0fff5fee4d1f6fcf0f8fdbff2fefc">[email protected]</a>'},
        {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b190a120604050f0e0d2b0c060a020745080406">[email protected]</a>'}
    ];
}]);
<!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>

jqueryhtmlcssangularjsangular-ui-router

Answer №1

If you want to show a new template when you click on Partial 1, you'll need a nested view. This can be achieved using ui-view and the nested state of your choice (in this example, Dot Notation is used with an inner view).

Check out the code below for a working example:

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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05726d647160736077456268646c692b666a68">[email protected]</a>'
    },
    {
      firstName: 'Blandine',
      lastName: 'Faivre',
      birthDate: new Date('1987-04-25'),
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="543b21323638353a303b21143339353d387a373b39">[email protected]</a>'
    },
    {
      firstName: 'Francoise',
      lastName: 'Frere',
      birthDate: new Date('1955-08-27'),
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6311021a0e0c0d07060523040e020a0f4d000c0e">[email protected]</a>'
    }
  ];
}]);
#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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the proper way to incorporate html entities in my specific situation?

In my application, I am attempting to incorporate double macron characters. My current method involves using the &#862; entity, like this: t&#862;t, which results in t͞t. However, I have encountered issues with reliability, as sometimes the ...

htmlcss

CSS Boxes Misaligned - Need Correcting

Feeling a bit frustrated with CSS at the moment, always getting tripped up by the little things. So here's my issue: I'm working on a design that requires 2 columns - one sidebar of 300px on the right, and the other column should fill the remaini ...

csshtml

Instructions for sending an array of integers as an argument from JavaScript to Python

I have a JavaScript function that extracts the values of multiple checkboxes and stores them in an array: var selectedValues = $('.item:checked').map(function(){return parseInt($(this).attr('name'));}).get(); My goal is to pass this a ...

javascriptjquerypythonajax

Eliminate the approximately 20 pixel space on the right side of the HTML email when viewed on iOS

Recently, I've been focused on developing a contact form for my portfolio website. Successfully sending HTML emails from the server to my email address has been a highlight. Since I mainly access my emails on my iPod Touch, I tailored the mail templat ...

iphoneioscss

The absence of an 'Access-Control-Allow-Origin' header is causing an issue with the $.getJSON request

I am attempting to initiate a basic $.getJSON call to the specified URL: The requested resource does not have an 'Access-Control-Allow-Origin' header. Therefore, access is not allowed from the origin 'http://localhost:1337'. This i ...

jqueryajaxjsonhttp-headers

Using a local image as a background with the fill option: a simple guide

background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.6 ...

cssbootstrap-5

Tips for incorporating choices into a newly created dynamically generated div

In the process of creating a website builder, I encountered an issue. I need to allow users to add boxes dynamically to the main section and have related options appear when a box is clicked. The problem arises when multiple boxes are added: clicking on th ...

javascriptjqueryhtmlcssjquery-ui

Pause before submitting another request using JQuery

I'm currently working with the Spotify Web API and my goal is to update the HTML display with the name of the song once I click the next song button. However, the issue I'm facing is that when I click the button, it updates the song title to the ...

javascriptjqueryajaxspotify

Struggling with unchecking a checkbox in Ionic and AngularJS when using the ng-change event

I have a dropdown menu and a checkbox. I need the checkbox value to reset to false every time the dropdown selection changes. I've already written code to reset the checkbox value, but it isn't working. Can someone please point out where I'm ...

angularjsionic-framework

Enhance the distinctiveness of each individual HTML element in Angular 2

I am facing an issue with Angular 2 where I am trying to create a list in HTML. Here is my desired format: <ul> <li> <li>.. </ul> However, I am struggling to add an iterate argument to the HTML object in NG2. This is what I ...

javascripthtmlangular

Ongoing Activity Triggered by jquery.blur() Function Currently Underway

I am experiencing a peculiar behavior with an input field: <input type="text" id="myId" ns-validate="" class="someClass" ng-model="Date" ng-focus="focus($event, 'Parameters')" ng-blur="blur($event)" tabindex="-1"> The focus event is linke ...

javascriptjqueryangularjseventsangularjs-directive

Is there a way to make a sass file universally accessible without having to import it into every file and causing an increase in bundle size?

Question How can I efficiently import variables.scss globally without the need to duplicate them in every file and reference them in my build instead of importing? Setup I am using Vue2 with laravel-mix, where I have imported index.scss in my main.js ...

cssvue.jswebpacksasslaravel-mix

Displaying the Selected Value from the DropDown in the Menu

I am working with Bootstrap5 and have the following dropdown menu in my code. Instead of displaying "Year," I would like to show which member was selected. How can I achieve this? <div class="dropdown"> <button class="btn btn- ...

javascripthtmlbootstrap-5

Challenges with handling Ajax responses in Ruby on Rails

I'm currently facing an issue with the Ajax response in my Rails application, and I'm unsure of how to troubleshoot it. Here is the code that is functioning correctly: View <div id="<%= dom_id(comment) %>_count"> <%= Like.wh ...

javascriptjqueryruby-on-railsajaxruby-on-rails-3

The spinal cord of design inquiry

I am currently working on a Backbone view called MainMenuView. Within this, the MainMenuModel consists of an array of sub-models known as ItemModel. The main menu is divided into two pages and includes next and previous buttons for navigation. The first pa ...

javascriptjquerydesign-patternsbackbone.js

Validation is underway, but despite error messages, the form continues to be submitted

I've been working on a web form that includes validation, but I'm encountering an issue where even if the form is submitted with empty fields, it shows an error message but still goes through. Can anyone help me spot my mistake? I've provide ...

javascriptjqueryformsvalidation

Guide on injecting a Controller into state object within Config using ui-router

Here I am attempting to include the PlatformCtrl into my $stateProvider object: app.js "use strict"; module.exports = angular.module('tickertags', [ 'templateCache', 'headers', // headers (platform, view, tim ...

angularjsangular-ui-routerstateangularjs-controller

Why isn't this working? I'm attempting to trigger a sound when I hover with my cursor, but it only plays when I click instead

When I click on it, it works fine. But I can't seem to get it to work on hover. Can someone help me out? This is the HTML code: <body> <audio autoplay id="HAT2" > <source src="OOOOO_1_HAT.mp3" > Your browser doesn't support t ...

javascriptjqueryhtmlhover

Unable to locate the sibling element using CSS Selector with Selenium

When using a CSS Selector to click on the next sibling element in Selenium WebDriver, an InvalidSelectorException is thrown. If we consider my DOM structure: <div class="checkbox-group"> <div> <span class="checkbox">::aft ...

cssseleniumselenium-webdrivercss-selectorsautomated-tests

MongoDB is experiencing an issue - it seems to be showing the error message: "ERROR: The designated dbpath (/data/db) cannot be

I'm encountering an issue when attempting to run "mongod" in the terminal. Despite trying various troubleshooting methods such as uninstalling, reinstalling, and rebooting the machine, I am still unable to resolve the error. If anyone has any suggesti ...

node.jsangularjsmongodbexpress