en nl en en en en it en en ru en en en en en ceb en en es tr en es uk kn es en en en en en en en en en en en en en en en en en en en en en en en en en en ja en en en en en en en en en en en en en id en la es en en en la en en fr en en en en en en la en en en en en en en en ru en en en en tr en en la fr en en en es en en en en en en it en en en
Asp.Net - MVC - Helper: AngularJs - Multi step form wizard
To start with add the 'multiStepForm' module in your app.
function ($locationProvider, $routeProvider) {
Add the reference in your index/home page.
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   template.
Main.Html will be handling the steps by using the controller MainCtrl. Code snippet is given below.
.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).
Previous        Next             Add the html templates for each steps. for example html template for Step 1 is given below.
Step 1 content    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.     After adding all the templates run the application:
Step 3: Step 4 :
Download the multiStepForm module from https://github.com/troch/angular-multi-step-form/tree/master/dist
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'; } ]) ;
Posted by Nikhil EV at 11:16
Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest
ДиMиTъp KиpoB13 March 2016 at 10:45
Subscribe to: Post Comments (Atom)
There was an error in this gadget
Blog Archive December (1) August (1) July (1) June (1) May (3) April (1) December (3) November (9)
View my complete profile
Simple template. Powered by Blogger.