npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-steps

v1.1.0

Published

Split your UI into (wizard-like) steps in AngularJS.

Downloads

9

Readme

angular-steps

Wrap your Angular UI logic into a series of steps (pages/slides).

Build Status Test Coverage

Demo: http://codepen.io/omichelsen/pen/zkCun

Install

$ bower install angular-steps --save

Include the style sheet and library in your web page:

<link href="bower_components/angular-steps/dist/angular-steps.css" rel="stylesheet">
<script src="bower_components/angular-steps/dist/angular-steps.js"></script>

angular-steps has no other dependencies than Angular itself, and ngAnimate if you want animated transition effects.

Usage

Require angular-steps as a dependency for your app:

angular.module('MyApp', ['angular-steps']);

Start creating some steps around your UI:

<steps>
    <step>
        <h1>Step 1</h1>
        <button step-next>Next</button>
    </step>
    <step>
        <h1>Step 2</h1>
        <button step-previous>Previous</button>
    </step>
</steps>

The main <steps> directive has the following (optional) attributes:

  • name: Name of the group of steps. Use if you have multiple <steps> to reference them in the ServiceHandler.
  • template: Path to a custom template.
  • current-step: Variable containing the name of the currently selected step. Can also be used to change selected step.
  • on-finish: Scope function to be called when the user has been through all steps.

Buttons

You can step navigate back and forward between the steps using these built-in attributes:

  • step-next: Go to next step.
  • step-previous: Go to previous step.
  • step-cancel: Go to first step.
  • step-finish: Triggers the on-finish callback. Clicking step-next on the last step will have same effect.

All attributes can receive an optional function to be called before changing the step:

<button step-next="doStuff()">Next</button>

In this case, doStuff() will be called before going to the next step.

Accessing steps from the controller

If you want to access and manipulate the steps from the controller, you can inject the StepsHandler.

This example validates that the input name is "Marvin" and proceeds to the next step:

<steps>
    <step>
        <input type="text" ng-model="name">
        <button ng-click="validateAndSubmit">Save my name</button>
    </step>
</steps>
myapp.controller('MyCtrl', ['StepsService', function (stepsService) {
    $scope.validateAndSubmit = function () {
        if ($scope.name === 'Marvin') {
            stepsService.steps().next();
        }
    };
}]);

You can use the following functions on StepsService.steps():

  • next(): Go to next step.
  • previous(): Go to previous step.
  • cancel(): Go to first step.
  • finish(): Triggers the on-finish callback.
  • goTo( number | name ): Go to a specific step. Argument can be either a number (zero-based index) or the name of a step.
  • selectedIndex(): Get current step index.

You can get the number of steps from StepsService.steps().steps.length.

Multiple steps

If you have multiple <steps> in your page and wish to access them from the StepsService, be sure to specify a unique name on each like so:

<steps name="myLoginFlow"> ... </steps>
<steps name="mySecondFlow"> ... </steps>

Access them by name to avoid conflicts:

StepsService.steps('myLoginFlow').next();
StepsService.steps('mySecondFlow').next();

Styling

By default the steps are overlayed on top of each other using position: absolute and z-index.

If you want to style each step individually, you can apply a CSS class to it as you would any element:

<step class="step-yellow">
    ...
</step>
.step-yellow {
    background: yellow;
}

The default styles for angular-steps are supplied in both CSS, SCSS and LESS format, whichever your prefer.

Animations

You can animate the transition between the steps using ngAnimate. The following styles will add a fade in/out animation between the steps:

.angular-steps .step.ng-hide-add,
.angular-steps .step.ng-hide-remove {
    transition: all 0.6s ease-in-out;
    opacity: 1;
}
.angular-steps .step.ng-hide {
    opacity: 0;
}

Credits

This project was inspired by angular-wizard by @mgonto. angular-steps is intended to be simpler, with a subset of features, smaller footprint and fewer dependencies.