AngularJS - Creating a dynamic wizard experience using UI-Router

Question

AngularJS - Creating a dynamic wizard experience using UI-Router

I have set up my routes using ui-router in the following way:

$stateProvider
    .state('root', {
        url: "",
        templateUrl: 'path/login.html',
        controller: 'LoginController'
    })
    .state('basket', {
        url: "/basket",
        views: {
            '': {
                templateUrl: 'path/basket.html',
                controller: 'BasketController'
            },
            'address@basket': {
                templateUrl: 'path/address.html',
                controller: 'AddressController'
            },
            'confirmation@basket': {
                templateUrl: 'path/confirmation.html',
                controller: 'ConfirmationController'
            },
            'payment@basket': {
                templateUrl: 'path/payment.html',
                controller: 'PaymentController'
            }
        }
    });

In the basket.html file, I am using mgo-angular-wizard to create a "step bar".

<wizard on-finish="finishedWizard()">

<wz-step title="Address">
    <div ui-view="address"></div>
</wz-step>

<wz-step title="Confirmation">
    <div ui-view="confirmation"></div>
</wz-step>

<wz-step title="Payment">
    <div ui-view="payment"></div>
</wz-step>

Everything is working as expected so far. However, I now need to add buttons that will allow navigation between these pages. For instance, the Address page should have a button that navigates to the Confirmation page. I have seen examples online using

ui-sref="$state.go('basket.address')"

, but since I'm not using this structure with dots, I am unsure how to achieve this (using confirmation@basket is not working).

I am relatively new to Angular and learning as I go. Thank you in advance.

javascript angularjs

Answer 1

Answer №1

Personally, I believe that Ui.Router is all you need in Angular for seamless state navigation without losing any state (you can store data in services).

It's beneficial to implement nested states...

Here are the steps:

Start by creating the parent abstract state: Basket. This will allow child states to inherit views, resolves, and URL fragments.
Create child states: address; confirmation; payment

angular
  .module('checkout', ['ui.router'])
  .config(function($stateProvider) {
    
    var basket = {
      name: 'basket',
      url: '/basket/',
      abstract: true,
      views: {
        "main": {
          template: "<h1>Bye</h1>",
          controller: function() { alert('bye'); }
        },
        "sidebar": {
          template: "<ul><li>LINK</li></ul>",
          controller: function() { console.log('sidebar view'); }
        }
      }
    };
    
    var address = {
      name: 'basket.address',
      url: ''
    };
  
    var confirmation = {
      name: 'basket.confirmation',
      url: 'confirmation/',
      views: {
        "main@": {
          template: "<h1>ss</h1>",
          controller: function() { alert('ss'); }
        }
      }
    };
      
  
    var payment = {
      name: 'basket.payment',
      url: 'payment/',
      views: {
        "main@": {
          template: "<h1>zz</h1>",
          controller: function() { alert('zz'); }
        }
      }
    };    
  
    $stateProvider
      .state(basket)
      .state(address)
      .state(confirmation)
      .state(payment)
    ;
  })
;

<section ui-view="main"></section>
<aside ui-view="sidebar"></aside>

<ul>
  <li><a ui-sref="basket.address">Address</a></li>
  <li><a ui-sref="basket.confirmation">Confirmation</a></li>
  <li><a ui-sref="basket.payment">Payment</a></li>

</ul>

Utilize a service through angular.module('checkout').value to store all checkout progress.

If you want to consolidate views and states into one, consider using Ui.Router.extra known as STICKY STATES, the link provides various examples...

Trust this information proves helpful!

Answer 2

Personally, I believe that Ui.Router is all you need in Angular for seamless state navigation without losing any state (you can store data in services).

It's beneficial to implement nested states...

Here are the steps:

Start by creating the parent abstract state: Basket. This will allow child states to inherit views, resolves, and URL fragments.
Create child states: address; confirmation; payment

angular
  .module('checkout', ['ui.router'])
  .config(function($stateProvider) {
    
    var basket = {
      name: 'basket',
      url: '/basket/',
      abstract: true,
      views: {
        "main": {
          template: "<h1>Bye</h1>",
          controller: function() { alert('bye'); }
        },
        "sidebar": {
          template: "<ul><li>LINK</li></ul>",
          controller: function() { console.log('sidebar view'); }
        }
      }
    };
    
    var address = {
      name: 'basket.address',
      url: ''
    };
  
    var confirmation = {
      name: 'basket.confirmation',
      url: 'confirmation/',
      views: {
        "main@": {
          template: "<h1>ss</h1>",
          controller: function() { alert('ss'); }
        }
      }
    };
      
  
    var payment = {
      name: 'basket.payment',
      url: 'payment/',
      views: {
        "main@": {
          template: "<h1>zz</h1>",
          controller: function() { alert('zz'); }
        }
      }
    };    
  
    $stateProvider
      .state(basket)
      .state(address)
      .state(confirmation)
      .state(payment)
    ;
  })
;

<section ui-view="main"></section>
<aside ui-view="sidebar"></aside>

<ul>
  <li><a ui-sref="basket.address">Address</a></li>
  <li><a ui-sref="basket.confirmation">Confirmation</a></li>
  <li><a ui-sref="basket.payment">Payment</a></li>

</ul>

Utilize a service through angular.module('checkout').value to store all checkout progress.

If you want to consolidate views and states into one, consider using Ui.Router.extra known as STICKY STATES, the link provides various examples...

Trust this information proves helpful!

AngularJS - Creating a dynamic wizard experience using UI-Router

Answer №1

Similar questions

Having trouble with the ::after element in my React component for my latest React 3D portfolio project

How can I retrieve the parent scope in an Angular UI nested named view?

Pass Form ID To Function In A Dynamic Way

Javascript - Single line conditional statement

Selecting a dropdown value dynamically after a form submission in ColdFusion using jQuery

Setting limits to disable or remove specific times from the time picker input box in Angular

What is the best way to implement a seamless left-to-right sliding effect for my side navigation using CSS and Javascript?

React is failing to display identical values for each item being mapped in the same sequence

How can we effectively translate intricate nested SQL relationships into manageable services using front-end data modeling best practices?

Dynamically fetching data with Node.js using Ajax requests

How come the values keep appearing without any loops or subsequent calls being made to the PHP file?

Steps for inserting a menu item into a Material UI Card

The dropdown hack on ui.bootstrap.typeahead is compromised when multiple input fields are used in AngularJS

Retrieve the subdomain from within the passport FacebookTokenStrategy and GoogleStrategy

Comparison: NumberFormatter versus NumberFormat in PHP and JavaScript

The translation of popups using ngx-translate in Javascript is not functioning properly

Tips for eliminating the backslash introduced by JQuery

Using various designs on elements generated from ng-repeat

Using $location in an Angular directive causes a cascade effect of repainting all other directives

Opt for a line break over a semicolon when using jQuery