TypeScript icon, indicating that this package has built-in type declarations

1.6.0 • Public • Published

Storybook Addon for AngularJS (1.x)

npm npm GitHub issues GitHub Storybook Open in Visual Studio Code

Note This addon is intended to be used with @storybook/html, available since Storybook 4.


Use your favorite 📦 package manager to install the addon in your project's devDependencies:


npm install --save-dev storybook-addon-angularjs


yarn add --dev storybook-addon-angularjs


This addon is flexible enough to let you choose how you want to write stories.

Your stories can be as simple as this:

export default {
  title: "QuoteCard",
  decorators: [withAngularJs("myApp")],

export const simpleTemplate = () => `
  <quote-card author="'Me'">
    It works with a simple template!

But you may choose something more advanced:

import { withKnobs, text } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";

import { html, withAngularJs } from "storybook-addon-angularjs";

class MockedAppService {
  constructor() {
    this.message = "Mocked message";

function mockLoggingService($log) {
  return {
    log: function(message) {

export default {
  title: "QuoteCard",
  decorators: [withKnobs, withAngularJs /* OR */ withAngularJs("myApp")],
  parameters: {
    ng: {
      module: "myApp", // optional when provided in the decorator
      rebuild: undefined, // optional, indicates when to rebuild the story. Can be "always", "mount" (when switching stories) or "update" (when updating knobs or controls)
      hooks: {
        beforeCompile() {
          // called once before compiling the the component
        beforeUpdate(SomeService) {
          // called before updating the component with new props
      mock: {
        // When the app depends on modules which cannot be provided in the story you can mock them
        modules: ["some.external.module"],
        // You can mock / override constants here
        constants: {
          API_URL: "",
        // You can mock / override services here (dependency injection also works)
        services: {
          AppService: MockedAppService,
        // You can mock / override factories here (dependency injection also works)
        factories: {
          LoggingService: mockLoggingService,

export const fancyTemplate = () => {
  const content = text("Content", "It works with a fancy tagged template string!");
  const author = text("Author", "Me");
  const onEvt = action("clicked");

  return html`
    <quote-card author="${author}" on-click="${onEvt}(foo)">

You can even write stories with Markdown files, with the support for the MDX Story Format. This is awesome for writing documentation for your components.

import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";

import { withAngularJs } from "storybook-addon-angularjs";

<Meta title="Demos|MDX Demos" decorators={[withAngularJs("myApp")]} />

# Storybook Addon for AngularJS

This is a simple Quote Card:

  <Story name="Simple Template" height="120px">
      <quote-card author="'Me'">
        It works with a simple template!

See these and more examples in the example subfolder.


withAngularJs(module?: string | string[])

Storybook decorator. Can optionally be used to initialize the module(s) used within the story.


Prepare your environment

npx lerna bootstrap

Build the Example Storybook

npx lerna bootstrap


Use of this source code is governed by an MIT-style license that can be found in the LICENSE file.

Package Sidebar


npm i storybook-addon-angularjs

Weekly Downloads






Unpacked Size

13.4 kB

Total Files


Last publish


  • titonobre