AngularJS (1.x) 的 Storybook 插件

注意 此插件旨在与 @storybook/html 一起使用，该插件自 Storybook 4 起可用。

安装

使用您最喜欢的 📦 包管理器将插件安装到项目中的 devDependencies 中

npm

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

Yarn

yarn add --dev storybook-addon-angularjs

用法

此插件足够灵活，让您可以选择如何编写故事。

您的故事可以像这样简单

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

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

但您也可以选择更高级的功能

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) {
      $log.log(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
          SomeService.setValue("Hi!");
        },
      },
      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: "https://example.com",
        },
        // 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)">
      {{${content}}}
    </quote-card>
  `;
};

您甚至可以使用 Markdown 文件编写故事，并支持 MDX 故事格式。这对于编写组件的文档非常棒。

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:

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

在 示例子文件夹 中查看这些示例以及更多示例。

API

withAngularJs(module?: string | string[])

Storybook 装饰器。可以选择用于初始化故事中使用的模块。

开发

准备您的环境

npx lerna bootstrap

构建示例 Storybook

npx lerna bootstrap

许可证

此源代码的使用受 MIT 风格许可证的约束，可以在 LICENSE 文件中找到。