angular-multi-step-form - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #typescript #android #machine-learning #deep-learning #docker #cli #awesome-list #vue #pytorch #mcp #openai #open-source

angular-multi-step-form

(★ 144)

An angular module for creating multi step forms / wizards

파일 탐색기

최종 버전 다운로드 (.zip)

- - angular-multi-step-form.js
  - angular-multi-step-form.min.js
- - index.js
- - angular-multi-step-form.js
  - angular-multi-step-form.min.js
- advanced-guide.md
- configuring-steps.md
- migrating-to-1.1.x.md
- multi-step-container.md
- multi-step-instance.md
- scopes.md
- steps-lifecycle.md
- - form-step-validity.js
  - multi-step-container.js
  - step-container.js
- - form-step-element-factory.js
  - form-step-object.js
  - multi-step-form-factory.js
- index.js
- form-step-element-factory.spec.js
- helpers.js
- multi-step-container.spec.js
- multi-step-form-factory.spec.js
.babelrc
.eslintrc
.gitignore
.npmignore
.travis.yml
bower.json
CHANGELOG.md
karma.config.js
LICENSE
package.json
README.md
rollup.config.js

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd angular-multi-step-form

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

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

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![npm version](https://badge.fury.io/js/angular-multi-step-form.svg)](https://badge.fury.io/js/angular-multi-step-form)
[![Build Status](https://travis-ci.org/troch/angular-multi-step-form.svg?branch=master)](https://travis-ci.org/troch/angular-multi-step-form)
[![Coverage Status](https://coveralls.io/repos/troch/angular-multi-step-form/badge.svg?branch=master)](https://coveralls.io/r/troch/angular-multi-step-form?branch=master)

# 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](./CHANGELOG.md)
- [Migration to 1.1.x](./docs/migrating-to-1.1.x.md)

## Examples

- [Getting started](http://blog.reactandbethankful.com/angular-multi-step-form/#/getting-started)
- [Using forms](http://blog.reactandbethankful.com/angular-multi-step-form/#/using-forms)
- [Saving data](http://blog.reactandbethankful.com/angular-multi-step-form/#/saving-data)
- [CSS transitions](http://blog.reactandbethankful.com/angular-multi-step-form/#/css-transitions)
- [Cancel and Finish](http://blog.reactandbethankful.com/angular-multi-step-form/#/cancel-finish)
- [Browser navigation](http://blog.reactandbethankful.com/angular-multi-step-form/#/browser-navigation)
- [Inside a modal](http://blog.reactandbethankful.com/angular-multi-step-form/#/inside-modal)

## Docs

- [Configuring your steps](./docs/configuring-steps.md)
- [The multiStepContainer directive](./docs/multi-step-container.md)
- [Steps and directive scopes](./docs/scopes.md)
- [Multi step form instance object](./docs/multi-step-instance.md)
- [Animations, navigation, callbacks](./docs/steps-lifecycle.md)
- [Advanced guide](./docs/advanced-guide.md)

## Getting started

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

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

Include `multiStepForm` module in your app:

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

Or (with npm):

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

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

You can then configure your steps

```javascript
$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.

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