Asp.Net - MVC - Helper: AngularJs - Multi step form wizard

In this blog I'm going to explain the usage of multi step form wizard using angularjs. This purticular wizard is created using the angular module 'multiStepForm' created by Thomas Roch (https://github.com/troch). This has the ability to use both html templates as well as the inline templates.

To start with add the 'multiStepForm' module in your app.

App.js

angular

.module('sampleApp', ['ngRoute', 'multiStepForm'])

.config([

'$locationProvider','$routeProvider',

function ($locationProvider, $routeProvider) {

$locationProvider.html5Mode(true);

$routeProvider

.when('/main', {

controller: 'MainCtrl',

templateUrl: '/app/Views/main.html',

})

.when('/start', {

templateUrl: '/app/Views/home.html',

})

.otherwise('/home');

}

]);

Add the reference in your index/home page.

<script src="../../Scripts/angular-multi-step-form.js"></script>

Home Page

<!DOCTYPE html>
<html data-ng-app="sampleApp">
<head>
<title></title>
<meta charset="utf-8" />
<script src="../../Scripts/jquery-1.10.2.js"></script>
<script src="../../Scripts/angular.js"></script>
<script src="../../Scripts/angular-route.js"></script>
<script src="../../Scripts/bootstrap.js"></script>
<script src="../../Scripts/angular-multi-step-form.js"></script>
<script src="../sampleApp.js"></script>
<base href="/">
<link href="../../Content/bootstrap.css" rel="stylesheet" />
<link href="../../Content/multiform.css" rel="stylesheet" />
</head>

<body>
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="/home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="/main">Step</a></li>
</ul>
</div>
</div>
</nav>
<br />
<div ng-view></div>
</div>
</div>
</body>

</html>

Next step is to add your controllers and templates for each step

In this example I have 3 steps using html templates and one using an inline <div> template.

Main.Html will be handling the steps by using the controller MainCtrl. Code snippet is given below.

MainCtrl

.controller('MainCtrl', [
    '$scope',
    function ($scope) {
        $scope.exampleId = 1;

        $scope.steps = [
            {
                templateUrl: '/app/Views/step1.html',
                title: 'Step 1',
                controller: 'step1Ctrl'
            },
            {
                templateUrl: '/app/Views/step2.html',
                title: 'Step 2',
                controller: 'step2Ctrl'
            },
            {
                templateUrl: '/app/Views/step3.html',
                title: 'Step 3',
                controller: 'step3Ctrl'
            },
            {
                template: '
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac auctor quam. Donec auctor arcu nulla, nec vulputate lacus auctor quis. Vivamus nisi orci, consectetur eu eleifend at, viverra in nunc. Quisque vitae odio et purus posuere aliquam. Aenean sit amet ante sit amet magna cursus imperdiet. Nam urna tellus, feugiat non laoreet at, tristique eu ex. In pharetra pharetra nibh, in facilisis arcu tempor nec. Maecenas quis leo convallis, posuere arcu sit amet, auctor mauris. Praesent arcu risus, blandit sit amet odio eget, luctus gravida mauris. Quisque nec fringilla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut congue metus, egestas ultricies dui. Pellentesque mattis libero ac risus sagittis egestas. Nulla facilisi.
',
                title: 'Inline template'
            }
        ];
    }
])

The steps are configured using $scope.steps. Each step has templateUrl, title and the controller which internally uses (to know more about properties please see the resource section at the bottom of the page).

Main.Html

<multi-step-container steps="steps" class="simple-prev-next">
    <header>
       <button ng-disabled="$isFirst()" class="btn btn-default" ng-click="$previousStep()">
            <span class="fa fa-chevron-left"></span>
            Previous
        </button>
        <strong ng-bind-template="{{$getActiveIndex()}}. {{$getActiveStep().title}}"></strong>

        <button ng-disabled="$isLast()" class="btn btn-default" ng-click="$nextStep()">
            Next
            <span class="fa fa-chevron-right"></span>
        </button>
    </header>

    <main step-container></main>
</multi-step-container>

Add the html templates for each steps. for example html template for Step 1 is given below.

<div><h5>Step 1 content</h5>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac auctor quam. Donec auctor arcu nulla, nec vulputate lacus auctor quis. Vivamus nisi orci, consectetur eu eleifend at, viverra in nunc. Quisque vitae odio et purus posuere aliquam. Aenean sit amet ante sit amet magna cursus imperdiet. Nam urna tellus, feugiat non laoreet at, tristique eu ex. In pharetra pharetra nibh, in facilisis arcu tempor nec. Maecenas quis leo convallis, posuere arcu sit amet, auctor mauris. Praesent arcu risus, blandit sit amet odio eget, luctus gravida mauris. Quisque nec fringilla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut congue metus, egestas ultricies dui. Pellentesque mattis libero ac risus sagittis egestas. Nulla facilisi.
</p>
</div>

After adding all the templates run the application:

Step 1:

Step 2:

Step 3: 




Step 4 :




Resources:

1. https://github.com/troch/angular-multi-step-form

2. http://blog.reactandbethankful.com/angular-multi-step-form/#/home

Download the multiStepForm module from https://github.com/troch/angular-multi-step-form/tree/master/dist

sampleApp.js

angular
  .module('sampleApp', ['ngRoute', 'multiStepForm'])

.config([
  '$locationProvider', '$routeProvider',
  function($locationProvider, $routeProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
      .when('/main', {
        controller: 'MainCtrl',
        templateUrl: '/app/Views/main.html',
      })
      .when('/start', {
        templateUrl: '/app/Views/home.html',
      })
      .otherwise('/home');
  }
])

.controller('MainCtrl', [
    '$scope',
    function($scope) {
      $scope.exampleId = 1;

      $scope.steps = [{
        templateUrl: '/app/Views/step1.html',
        title: 'Step 1',
        controller: 'step1Ctrl'
      }, {
        templateUrl: '/app/Views/step2.html',
        title: 'Step 2',
        controller: 'step2Ctrl'
      }, {
        templateUrl: '/app/Views/step3.html',
        title: 'Step 3',
        controller: 'step3Ctrl'
      }, {
        template: '
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac auctor quam. Donec auctor arcu nulla, nec vulputate lacus auctor quis. Vivamus nisi orci, consectetur eu eleifend at, viverra in nunc. Quisque vitae odio et purus posuere aliquam. Aenean sit amet ante sit amet magna cursus imperdiet. Nam urna tellus, feugiat non laoreet at, tristique eu ex. In pharetra pharetra nibh, in facilisis arcu tempor nec. Maecenas quis leo convallis, posuere arcu sit amet, auctor mauris. Praesent arcu risus, blandit sit amet odio eget, luctus gravida mauris. Quisque nec fringilla neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut congue metus, egestas ultricies dui. Pellentesque mattis libero ac risus sagittis egestas. Nulla facilisi.
',
        title: 'Inline template'
      }];
    }
  ])
  .controller('step1Ctrl', [
    '$scope',
    function($scope) {
      $scope.contentText = 'Displaying page 1';
    }
  ])

.controller('step2Ctrl', [
    '$scope',
    function($scope) {
      $scope.contentText = 'Displaying page 2';
    }
  ])
  .controller('step3Ctrl', [
    '$scope',
    function($scope) {
      $scope.contentText = 'Displaying page 3';
    }
  ])


;

Asp.Net - MVC - Helper

Tuesday, 29 December 2015

AngularJs - Multi step form wizard

App.js

Home Page

MainCtrl

Main.Html

Resources:

sampleApp.js

2 comments:

Views