angular-multi-step-form

WebJar for angular-multi-step-form

License	ISC
Categories	Angular User Interface Web Frameworks ORM Data
GroupId	org.webjars.bower
ArtifactId	angular-multi-step-form
Last Version	1.2.4
Release Date	Mar 25, 2016
Type	jar
Description	angular-multi-step-form WebJar for angular-multi-step-form
Project URL	http://webjars.org
Source Code Management	https://github.com/troch/angular-multi-step-form

Download angular-multi-step-form

Filename	Size
angular-multi-step-form-1.2.4.pom
angular-multi-step-form-1.2.4.jar	31 KB
angular-multi-step-form-1.2.4-sources.jar	22 bytes
angular-multi-step-form-1.2.4-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-multi-step-form/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-multi-step-form</artifactId>
    <version>1.2.4</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/angular-multi-step-form/
implementation 'org.webjars.bower:angular-multi-step-form:1.2.4'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/angular-multi-step-form/
implementation ("org.webjars.bower:angular-multi-step-form:1.2.4")

Apache Buildr

'org.webjars.bower:angular-multi-step-form:jar:1.2.4'

Apache Ivy

<dependency org="org.webjars.bower" name="angular-multi-step-form" rev="1.2.4">
  <artifact name="angular-multi-step-form" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='angular-multi-step-form', version='1.2.4')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "angular-multi-step-form" % "1.2.4"

Leiningen

[org.webjars.bower/angular-multi-step-form "1.2.4"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.bower : angular	jar	[1.3.0,)

Project Modules

There are no modules declared in this project.

Angular Multi step form

multiStepForm is an angular module to create multi step forms and wizards. Create your steps like your would create your views with ngRoute or ui-router!

It is lightweight (6kb minified) but extremely versatile and powerful.

Requirements

• Angular 1.3+

Features

• Steps are controlled views and are easily configured
• Directive controller
• Asynchronous loading of steps (templateUrl and resolve)
• Forward and backward animations
• Isolated or non isolated scopes for steps
• Track step validity if it contains a form
• onCancel, onFinish and onStepChange callbacks
• Browser navigation with search URL parameter
• You decide what level of control you expose to the user: next, previous, jump to state, finish, cancel, etc...
• Place summary, controls, etc... in header or footer
• Support for multiple components per view

Breaking changes with 1.1.x

See changelog and migration guide:

• Changelog
• Migration to 1.1.x

Examples

• Getting started
• Using forms
• Saving data
• CSS transitions
• Cancel and Finish
• Browser navigation
• Inside a modal

Docs

• Configuring your steps
• The multiStepContainer directive
• Steps and directive scopes
• Multi step form instance object
• Animations, navigation, callbacks
• Advanced guide

Getting started

Grab the sources with bower, npm or download from Github: https://github.com/troch/angular-multi-step-form/tree/master/dist:

$ npm install --save angular-multi-step-form;
$ bower install --save angular-multi-step-form

Include multiStepForm module in your app:

angular.module('yourApp', [
    'multiStepForm'
]);

Or (with npm):

import multiStepForm from 'angular-multi-step-form';

angular.module('yourApp', [
    multiStepForm.name
]);

You can then configure your steps

$scope.steps = [
    {
        template: 'Hello <button class="btn btn-default" ng-click="$nextStep()">Next</button>'
    },
    {
        template: 'World <button class="btn btn-default" ng-click="$previousStep()">Previous</button>'
    }
];

And start your multiple step form / wizard:

• Use the multiStepContainer directive
• You need to use the stepContainer inside multiStepContainer to tell it where to load steps.

<multi-step-container steps="yourSteps">
    <step-container></step-container>
</multi-step-container>

Versions

Version
1.2.4 Mar 25, 2016