{"id":24902905,"url":"https://github.com/titonobre/storybook-addon-angularjs","last_synced_at":"2025-08-23T06:38:53.147Z","repository":{"id":38425490,"uuid":"140642210","full_name":"titonobre/storybook-addon-angularjs","owner":"titonobre","description":"A simple addon to create Storybook stories with AngularJS components.","archived":false,"fork":false,"pushed_at":"2023-03-06T20:55:29.000Z","size":2912,"stargazers_count":65,"open_issues_count":11,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T16:49:20.499Z","etag":null,"topics":["angularjs","javascript","storybook"],"latest_commit_sha":null,"homepage":"https://storybook-addon-angularjs.now.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/titonobre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-12T00:53:01.000Z","updated_at":"2024-10-14T20:24:09.000Z","dependencies_parsed_at":"2024-06-20T19:14:54.915Z","dependency_job_id":null,"html_url":"https://github.com/titonobre/storybook-addon-angularjs","commit_stats":{"total_commits":93,"total_committers":10,"mean_commits":9.3,"dds":0.6236559139784946,"last_synced_commit":"3cc263a3517ceee7a1cc36f8ed0a2ac7cf6b20e1"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/titonobre/storybook-addon-angularjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titonobre%2Fstorybook-addon-angularjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titonobre%2Fstorybook-addon-angularjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titonobre%2Fstorybook-addon-angularjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titonobre%2Fstorybook-addon-angularjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/titonobre","download_url":"https://codeload.github.com/titonobre/storybook-addon-angularjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titonobre%2Fstorybook-addon-angularjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271745679,"owners_count":24813521,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","javascript","storybook"],"created_at":"2025-02-01T22:17:45.082Z","updated_at":"2025-08-23T06:38:53.098Z","avatar_url":"https://github.com/titonobre.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook Addon for AngularJS (1.x)\n\n[![npm](https://img.shields.io/npm/v/storybook-addon-angularjs.svg)](https://www.npmjs.com/package/storybook-addon-angularjs)\n[![npm](https://img.shields.io/npm/dt/storybook-addon-angularjs.svg)](https://www.npmjs.com/package/storybook-addon-angularjs)\n[![GitHub issues](https://img.shields.io/github/issues/titonobre/storybook-addon-angularjs.svg)](https://github.com/titonobre/storybook-addon-angularjs/issues)\n[![GitHub](https://img.shields.io/github/license/titonobre/storybook-addon-angularjs.svg)](https://github.com/titonobre/storybook-addon-angularjs/blob/master/LICENSE)\n[![Storybook](https://img.shields.io/badge/storybook-4%2B-ff4785.svg)](https://storybook.js.org/)\n[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/titonobre/storybook-addon-angularjs)\n\n\u003e **Note**\n\u003e This addon is intended to be used with `@storybook/html`, available since Storybook 4.\n\n## Installation\n\nUse your favorite 📦 package manager to install the addon in your project's `devDependencies`:\n\n**npm:**\n\n```sh\nnpm install --save-dev storybook-addon-angularjs\n```\n\n**Yarn:**\n\n```sh\nyarn add --dev storybook-addon-angularjs\n```\n\n## Usage\n\nThis addon is flexible enough to let you choose how you want to write stories.\n\nYour stories can be as simple as this:\n\n```js\nexport default {\n  title: \"QuoteCard\",\n  decorators: [withAngularJs(\"myApp\")],\n};\n\nexport const simpleTemplate = () =\u003e `\n  \u003cquote-card author=\"'Me'\"\u003e\n    It works with a simple template!\n  \u003c/quote-card\u003e\n`;\n```\n\nBut you may choose something more advanced:\n\n```js\nimport { withKnobs, text } from \"@storybook/addon-knobs\";\nimport { action } from \"@storybook/addon-actions\";\n\nimport { html, withAngularJs } from \"storybook-addon-angularjs\";\n\nclass MockedAppService {\n  constructor() {\n    this.message = \"Mocked message\";\n  }\n}\n\nfunction mockLoggingService($log) {\n  return {\n    log: function(message) {\n      $log.log(message);\n    },\n  }\n}\n\nexport default {\n  title: \"QuoteCard\",\n  decorators: [withKnobs, withAngularJs /* OR */ withAngularJs(\"myApp\")],\n  parameters: {\n    ng: {\n      module: \"myApp\", // optional when provided in the decorator\n      rebuild: undefined, // optional, indicates when to rebuild the story. Can be \"always\", \"mount\" (when switching stories) or \"update\" (when updating knobs or controls)\n      hooks: {\n        beforeCompile() {\n          // called once before compiling the the component\n        },\n        beforeUpdate(SomeService) {\n          // called before updating the component with new props\n          SomeService.setValue(\"Hi!\");\n        },\n      },\n      mock: {\n        // When the app depends on modules which cannot be provided in the story you can mock them\n        modules: [\"some.external.module\"],\n        // You can mock / override constants here\n        constants: {\n          API_URL: \"https://example.com\",\n        },\n        // You can mock / override services here (dependency injection also works)\n        services: {\n          AppService: MockedAppService,\n        },\n        // You can mock / override factories here (dependency injection also works)\n        factories: {\n          LoggingService: mockLoggingService,\n        },\n      }\n    },\n  },\n};\n\nexport const fancyTemplate = () =\u003e {\n  const content = text(\"Content\", \"It works with a fancy tagged template string!\");\n  const author = text(\"Author\", \"Me\");\n  const onEvt = action(\"clicked\");\n\n  return html`\n    \u003cquote-card author=\"${author}\" on-click=\"${onEvt}(foo)\"\u003e\n      {{${content}}}\n    \u003c/quote-card\u003e\n  `;\n};\n```\n\nYou can even write stories with Markdown files, with the support for the [MDX Story Format](https://storybook.js.org/docs/formats/mdx-syntax/). This is awesome for writing documentation for your components.\n\n```md\nimport { Meta, Story, Preview } from \"@storybook/addon-docs/blocks\";\n\nimport { withAngularJs } from \"storybook-addon-angularjs\";\n\n\u003cMeta title=\"Demos|MDX Demos\" decorators={[withAngularJs(\"myApp\")]} /\u003e\n\n# Storybook Addon for AngularJS\n\nThis is a simple Quote Card:\n\n\u003cPreview\u003e\n  \u003cStory name=\"Simple Template\" height=\"120px\"\u003e\n    {`\n      \u003cquote-card author=\"'Me'\"\u003e\n        It works with a simple template!\n      \u003c/quote-card\u003e\n    `}\n  \u003c/Story\u003e\n\u003c/Preview\u003e\n```\n\nSee these and more examples in the [example subfolder](./example).\n\n## API\n\n### `withAngularJs(module?: string | string[])`\n\nStorybook decorator. Can optionally be used to initialize the module(s) used within the story.\n\n## Development\n\nPrepare your environment\n\n```sh\nnpx lerna bootstrap\n```\n\nBuild the Example Storybook\n\n```sh\nnpx lerna bootstrap\n```\n\n## License\n\nUse of this source code is governed by an MIT-style license that can be found in the [LICENSE](LICENSE) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftitonobre%2Fstorybook-addon-angularjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftitonobre%2Fstorybook-addon-angularjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftitonobre%2Fstorybook-addon-angularjs/lists"}