{"id":19456963,"url":"https://github.com/tooltwist/pastac-example-component","last_synced_at":"2026-04-12T22:42:04.287Z","repository":{"id":58237221,"uuid":"90875885","full_name":"tooltwist/pastac-example-component","owner":"tooltwist","description":"An example angular component for use in a PastaC stack","archived":false,"fork":false,"pushed_at":"2017-07-27T18:16:07.000Z","size":343,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-25T14:04:55.001Z","etag":null,"topics":["angular","component","pastac","tooltwist"],"latest_commit_sha":null,"homepage":"https://tooltwist.github.io/pastac-example-component/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tooltwist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-10T14:49:34.000Z","updated_at":"2017-05-13T13:28:30.000Z","dependencies_parsed_at":"2022-08-30T22:31:04.015Z","dependency_job_id":null,"html_url":"https://github.com/tooltwist/pastac-example-component","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/tooltwist/pastac-example-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tooltwist%2Fpastac-example-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tooltwist%2Fpastac-example-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tooltwist%2Fpastac-example-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tooltwist%2Fpastac-example-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tooltwist","download_url":"https://codeload.github.com/tooltwist/pastac-example-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tooltwist%2Fpastac-example-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266717709,"owners_count":23973384,"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-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["angular","component","pastac","tooltwist"],"created_at":"2024-11-10T17:19:20.930Z","updated_at":"2026-04-12T22:41:59.246Z","avatar_url":"https://github.com/tooltwist.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Getting Started\nThis module is treated as a standard Angular 1 component. To use it on an Angular page:\n\n1. Download the component into your project\n\n    ```shell\n    $ bower install pastac-example-component --save  \n    ```\n\n1. Include the component in your page\n\n    ```pug\n    script(src=\"bower_components/jquery/dist/jquery.js\" type=\"text/javascript\")  \n    script(src=\"bower_components/angular/angular.min.js\")  \n    script(src=\"bower_components/bootstrap/dist/js/bootstrap.js\" type=\"text/javascript\")  \n    script(src=\"bower_components/pastac-example-component/dist/pastac-example-component.js\" type=\"text/javascript\")  \n    ```\n\n1. Use the component in your Pug files (formerly called Jade)  \n\n    ```pug\n    pastac-example-component(initial-name=\"Turtle\" on-done=\"sayHello(name)\")  \n    ```\n\n\n1. Invoke the module in your Angular initialization\n\n    ```javascript\n    var module = angular.module('myApp', [ 'pastac-example-component' ]);  \n    ...\n    ```\n\n\n## Cloning this component to create your own component\nPastaC components are intended to be easy to clone and modify, so developers can create new components,\nwhich will also be easy to clone and modify. With luck this will allow the community to evolve and\nmature the avilable components without each developer having to repeat the work of those before them.\n\nThe [pastac\\-example\\-component](https://github.com/tooltwist/pastac\\-example\\-component) is the great granddad\nof most PastaC components. If you wish to create a totally new component, but don't have a relevant\ncomponent to base it upon, then download this project from Github and clone it.\n\nCloning this component is as simple as running a script provided with this component, following these steps:\n\n1. Download the full component to source from Github, not the published version from bower.\n\n2. Run the provided cloning script:\n\n    ```shell\n    $ cd bower_components\n    $ pastac-existing-component/clone-this-component.js new-component-name\n    $ cd new-component-name\n    $ gulp serve\n    ```\n\nYou can then (a) check that the clone worked correctly, by interacting with the component on a test page,\nand (b) start development on modifying the component.\n\n## Why Clone?\n\nAngular components are not particularly hard to create, however there is a lot of supporting tools, code\nand scripts required to properly test, document and deploy the component. By cloning, you get all the\nfollowing immediately:\n\n- a working Angular component\n- that uses [Pug](https://pugjs.org) and [Sass](http://sass-lang.com/)\n- uses [Gulp](gulpjs.com) during development and to deploy\n- live browser reload during development, using [BrowserSync](https://browsersync.io/docs/gulp)\n- Uses [Bower](https://bower.io/) and [Npm](https://www.npmjs.com) to download dependencies\n- a test page for manual testing\n- [Karma](https://karma-runner.github.io) is used to drive unit tests run within an actual browser\n- generated documentation of SASS/CSS styles with [Sassdoc](sassdoc.com/)\n- Documenting the component using [Slate](https://github.com/lord/slate)\n\n\n## Contributing\nTo develop this component or create a derived component, clone the Github repository into the bower directory.\n\nThis project is built using Gulp.\n\n- To get started, run `bower install` and `gulp install` to prepare the component for development.\n\n- Clean up using `gulp clean`.\n- To test the component using test/index.html run `gulp serve`.\n- To run unit tests using Karma run `gulp test`.\n- The `gulp testloop` command waits for files to change and re-runs these tests automatically.\n\nSee CONTRIBUTING.md for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftooltwist%2Fpastac-example-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftooltwist%2Fpastac-example-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftooltwist%2Fpastac-example-component/lists"}