{"id":13489952,"url":"https://github.com/patternfly/angular-patternfly","last_synced_at":"2025-05-16T12:03:36.958Z","repository":{"id":14947785,"uuid":"17672427","full_name":"patternfly/angular-patternfly","owner":"patternfly","description":"This repo contains instructions and the code for a set of Angular 1 components for the PatternFly project. ","archived":false,"fork":false,"pushed_at":"2022-12-10T16:07:12.000Z","size":25465,"stargazers_count":121,"open_issues_count":68,"forks_count":90,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-04-02T05:25:04.764Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.patternfly.org/angular-patternfly/","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/patternfly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-12T15:43:51.000Z","updated_at":"2025-03-21T21:21:53.000Z","dependencies_parsed_at":"2022-08-27T03:15:57.605Z","dependency_job_id":null,"html_url":"https://github.com/patternfly/angular-patternfly","commit_stats":null,"previous_names":[],"tags_count":146,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Fangular-patternfly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Fangular-patternfly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Fangular-patternfly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Fangular-patternfly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patternfly","download_url":"https://codeload.github.com/patternfly/angular-patternfly/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994120,"owners_count":21030050,"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","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":[],"created_at":"2024-07-31T19:00:38.409Z","updated_at":"2025-04-09T07:03:50.538Z","avatar_url":"https://github.com/patternfly.png","language":"JavaScript","readme":"[![Build Status](https://travis-ci.org/patternfly/angular-patternfly.svg?branch=master)](https://travis-ci.org/patternfly/angular-patternfly)\n[![Dependency Status](https://gemnasium.com/badges/github.com/patternfly/angular-patternfly.svg)](https://gemnasium.com/github.com/patternfly/angular-patternfly)\n[![Code Climate](https://codeclimate.com/github/patternfly/angular-patternfly/badges/gpa.svg)](https://codeclimate.com/github/patternfly/angular-patternfly)\n[![NSP Status](https://nodesecurity.io/orgs/angular-patternfly/projects/690b94c3-4f36-4208-887d-fdb5f22f65fc/badge)](https://nodesecurity.io/orgs/angular-patternfly/projects/690b94c3-4f36-4208-887d-fdb5f22f65fc)\n[![Join the chat at https://gitter.im/patternfly/angular-patternfly](https://badges.gitter.im/patternfly/angular-patternfly.svg)](https://gitter.im/patternfly/angular-patternfly?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![Coverage Status](https://coveralls.io/repos/github/patternfly/angular-patternfly/badge.svg)](https://coveralls.io/github/patternfly/angular-patternfly)\n\n# AngularJS components for [PatternFly](https://www.patternfly.org)\n\nThis project will provide a set of common AngularJS components for use with the PatternFly reference implementation.\n\n* Web site: https://www.patternfly.org\n* API Docs: http://www.patternfly.org/angular-patternfly/#/api\n* Build Status: https://travis-ci.org/patternfly/angular-patternfly.svg?branch=master\n\n## Getting started\n\nYou have to install required software before you're able to use grunt:\n\n* Install Node.js - Find more information on [Node.js](http://nodejs.org/)\n\n  Angular Patternfly stays up to date with the Node LTS [Release Schedule](https://github.com/nodejs/LTS#lts_schedule). If you're using Angular Patternfly downstream, we suggest the use of an actively supported version of Node/NPM, although prior versions of Node may work.\n\n* Install npm - If npm is not already installed with Node.js, you have to install it manually. Find more information on [NPM](https://www.npmjs.org/)\n\n* Install Grunt globally - Find more information on [Grunt](http://gruntjs.com/)\n    ```shell\n    $ npm install -g grunt-cli\n    ```\n\n* Install npm dependencies with:\n    ```shell\n    $ npm install\n    ```\n\nYou should have your environment ready now.\n\nAngular-PatternFly can now be built with:\n```shell\n$ npm run build\n```\n\nTo see all the grunt tasks that are available:\n```shell\n$ npm run help\n```\n\n### Using Angular-PatternFly In Your Application\n\nNote:\n\n1. Add Angular-PatternFly as dependencies for your project and you'll receive all the libraries you'll need:\n    ```shell\n    $ npm install angular-patternfly --save\n    ```\n2. Add the core Patternfly CSS and script includes to your HTML file(s):\n\n    Please see:  https://github.com/patternfly/patternfly/blob/master/QUICKSTART.md\n\n    Alternatively, the minimum you will need:\n\n       \u003c!-- PatternFly Styles --\u003e\n       \u003c!-- Note: No other CSS files are needed regardless of what other JS packages located in patternfly/components that you decide to pull in --\u003e\n       \u003clink rel=\"stylesheet\" href=\"node_modules/angular-patternfly/node_modules/patternfly/dist/css/patternfly.min.css\"\u003e\n       \u003clink rel=\"stylesheet\" href=\"node_modules/angular-patternfly/node_modules/patternfly/dist/css/patternfly-additions.min.css\"\u003e\n\n       \u003c!-- Patternfly required settings (no jquery or further JS dependencies required by this include) --\u003e\n       \u003cscript src=\"node_modules/angular-patternfly/node_modules/patternfly/dist/js/patternfly_settings.min.js\"\u003e\u003c/script\u003e\n\n\n3. Add the following CSS include to your HTML file(s):\n\n    ```html\n    \u003c!-- Angular-PatternFly Styles --\u003e\n    \u003clink rel=\"stylesheet\" href=\"node_modules/angular-patternfly/dist/styles/angular-patternfly.min.css\" /\u003e\n    ```\n4. Add the following script includes to your HTML file(s), adjusting where necessary to pull in only what you need:\n\n    ```html\n    \u003c!-- Angular --\u003e\n    \u003cscript src=\"node_modules/angular-patternfly/node_modules/angular/angular.min.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- Bootstrap-Select (Optional): The following lines are only required if you use the pfBootstrapSelect directive --\u003e\n    \u003cscript src=\"node_modules/bootstrap/dist/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"node_modules/bootstrap-select/js/bootstrap-select.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- Angular-Bootstrap --\u003e\n    \u003cscript src=\"node_modules/angular-patternfly/node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"node_modules/angular-patternfly/node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- Angular-Sanitize --\u003e\n    \u003cscript src=\"node_modules/angular-patternfly/node_modules/angular-sanitize/angular-sanitize.min.js\"\u003e\u003c/script\u003e\n    \n    \u003c!-- Angular-Animate --\u003e\n    \u003cscript src=\"node_modules/angular-patternfly/node_modules/angular-animate/angular-animate.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- Angular-PatternFly  --\u003e\n    \u003cscript src=\"node_modules/angular-patternfly/dist/angular-patternfly.min.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- Lodash --\u003e\n    \u003cscript src=\"node_modules/angular-patternfly/node_modules/lodash/lodash.min.js\"\u003e\u003c/script\u003e\n    ```\n\n5. (optional) The 'patternfly.charts' module is not a dependency in the default angular 'patternfly' module.\n   In order to use patternfly charts you must add it as a dependency in your application:\n\n    ```javascript\n    my-app.module.js:\n\n    angular.module('myApp', [\n     'patternfly',\n     'patternfly.charts'\n    ]);\n    ```\n\n    And script includes to your HTML file:\n    ```html\n    \u003c!-- C3, D3 - Charting Libraries. --\u003e\n    \u003cscript src=\"node_modules/angular-patternfly/node_modules/patternfly/node_modules/c3/c3.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"node_modules/angular-patternfly/node_modules/patternfly/node_modules/d3/d3.min.js\"\u003e\u003c/script\u003e\n    ````\n\n6. (optional) The 'patternfly.table' module is not a dependency in the default angular 'patternfly' module.\n   In order to use pfTableView, you must add 'patternfly.table' as a dependency in your application:\n\n    ```javascript\n    my-app.module.js:\n\n    angular.module('myApp', [\n     'patternfly',\n     'patternfly.table'\n    ]);\n    ```\n\n   Add the npm dependency:\n    ```shell\n    $ npm install angularjs-datatables --save\n    ```\n\n   Add the following CSS includes to your HTML file(s):\n\n\n    ```html\n    \u003c!-- Place before any patternfly css --\u003e\n    \u003clink rel=\"stylesheet\" href=\"node_modules/angular-patternfly/node_modules/datatables.net-dt/css/jquery.dataTables.css\" /\u003e\n    ```\n   Add the following Javascript includes to your HTML file(s):\n\n   ```html\n   \u003cscript src=\"node_modules/angular-patternfly/node_modules/patternfly/node_modules/jquery/dist/jquery.js\"\u003e\u003c/script\u003e\n   \u003cscript src=\"node_modules/angular-patternfly/node_modules/patternfly/node_modules/datatables.net/js/jquery.dataTables.js\"\u003e\u003c/script\u003e\n   \u003cscript src=\"node_modules/angular-patternfly/node_modules/patternfly/node_modules/datatables.net-select/js/dataTables.select.js\"\u003e\u003c/script\u003e\n   \u003cscript src=\"node_modules/angularjs-datatables/dist/angular-datatables.min.js\"\u003e\u003c/script\u003e\n   \u003cscript src=\"node_modules/angularjs-datatables/dist/plugins/select/angular-datatables.select.min.js\"\u003e\u003c/script\u003e\n   ```\n7. (optional) The 'patternfly.canvas' module is not a dependency in the default angular 'patternfly' module.\n   In order to use pfCanvasEditor or pfCanvas, you must add 'patternfly.canvas' as a dependency in your application:\n\n    ```javascript\n    my-app.module.js:\n\n    angular.module('myApp', [\n     'patternfly',\n     'patternfly.canvas'\n    ]);\n    ```\n\n   Add the npm dependencies:\n   ```shell\n   $ npm install jquery-ui-dist --save\n   $ npm install angular-dragdrop --save\n   $ npm install angular-svg-base-fix --save\n   ```\n\n   Add the following Javascript includes to your HTML file(s):\n\n   ```html\n    \u003c!-- jquery before angular.js --\u003e\n    \u003cscript src=\"node_modules/angular-patternfly/node_modules/patternfly/node_modules/jquery/dist/jquery.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"node_modules/jquery-ui-dist/jquery-ui.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- angular-dragdrop and angular-svg-base-fix after angular.js --\u003e\n    \u003cscript src=\"node_modules/angular-dragdrop/src/angular-dragdrop.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"node_modules/angular-svg-base-fix/src/svgBaseFix.js\"\u003e\u003c/script\u003e\n    ```\n\n   Also, the canvas background grid image is located in 'node_modules/angular-patternfly/dist/imgs/canvas-dot-grid.png'\n   please copy this image to your application's main images directory and reference it by overridding the '.canvas' css\n   class:\n\n    ```html\n    \u003cstyle\u003e\n     .canvas {\n       background-image: url('/myapp/imgs/canvas-dot-grid.png');\n       background-repeat: repeat;\n     }\n    \u003c/style\u003e\n    ```\n\n#### Less to Sass Conversion\n\nDuring the build process Less files are converted to Sass files in `/dist/sass`.  Then the Sass files are compiled into `/dist/sass/angular-patternfly.css`. If you would like to copy the Sass generated css into the main `/dist/styles` directory, execute:\n\n```\ngrunt build --sass\n```\n\nThis task will copy `/dist/sass/angular-patternfly.css` to `/dist/styles/angular-patternfly.css`.  Then the build process will minimize the css in `/dist/styles`.\n\nThe Less to Sass Conversion step will be accomplished and managed as a part of any Pull Request which includes Less file changes. Although contributors may want to build and test their style changes with Sass before submitting a Pull Request, this step should always be tested and validated by reviewers before a style change is merged and released. If a contributor is having issues with Sass conversion that they cannot resolve, Pull Request reviewers will need to ensure that the Sass conversion step is successfully accomplished, tested, and included in the Pull Request before it is approved and merged.\n\nFor more detailed information, please read [PatternFly Less to Sass Conversion](https://github.com/patternfly/patternfly#less-to-sass-conversion)\n\n*Note:* When a Less file is added/deleted/renamed it needs to be updated in the main Less import file `/styles/angular-patternfly.less` and the main Sass import file `styles/_angular-patternfly.scss`.\n\n### Using with Webpack\n\nIn order to use Angular-Patternfly in a Webpack-bundled application there are some things you need to keep in mind:\n\n#### Create an alias for the jQuery module (if using JQuery dependency)\n\nIn order to let Webpack find the correct jQuery module when assembling all the dependencies you need to create an alias for it in the webpack.conf.js file:\n```\n...\nresolve: {\n  alias: {\n    \"jquery\": \"patternfly/node_modules/jquery\"\n  }\n}\n...\n```\n\nAdditionally, you have to use the `webpack.ProvidePlugin` so the $ and the jQuery variables are added to the `window` object, making them available to the other modules (Patternfly included):\n```\n...\nplugins: [\n  new webpack.ProvidePlugin({\n    $: \"jquery\",\n    jQuery: \"jquery\",\n    \"window.jQuery\": \"jquery\",\n    \"window.jquery\": \"jquery\"\n  })\n]\n...\n```\n\n## API documentation\n\nThe API documentation can be built with:\n```shell\n$ npm run uidocs\n```\n\nIf you're interested in reading the docs right away, you can use special target, which will start a web server:\n```shell\n$ npm run uidocs:view\n```\n\nAfter executing this tasks you'll be able to access the documentation at [http://localhost:8000/](http://localhost:8000/). If a different port is desired, it may be specified on as an option:\n```shell\n$ npm run uidocs:view -- --port=8002\n```\n\n## Git Commit Guidelines\n\nPatternFly uses a semantic release process to automate npm and bower package publishing, based on the following commit message format.\n\nEach commit message consists of a **header**, a **body** and a **footer**.  The header has a special\nformat that includes a **type**, a **scope** and a **subject** ([full explanation](https://github.com/stevemao/conventional-changelog-angular/blob/master/convention.md)):\n\n```\n\u003ctype\u003e(\u003cscope\u003e): \u003csubject\u003e\n\u003cBLANK LINE\u003e\n\u003cbody\u003e\n\u003cBLANK LINE\u003e\n\u003cfooter\u003e\n```\n\n##### Patch Release\n\n```\nfix(pencil): stop graphite breaking when too much pressure applied\n// Specific example using the component name as the scope\nfix(pfEmptyState): add missing closing \u003cspan\u003e tag\n```\n\n##### Feature Release\n\n```\nfeat(pencil): add 'graphiteWidth' option\n// Specific example using the component name as the scope\nfeat(pfNotificationDrawer): add empty state message to group without notifications\n```\n\n##### Breaking Release\n\n```\nperf(pencil): remove graphiteWidth option\n// Specific example using the component name as the scope\nperf(pfFakeComponent): remove pfFakeComponent\n```\n\n##### Non-Release\n\nchore(pencil): rename internal graphiteDensity variable\nchore(pfNotificationDrawer):  rename internal drawer expanded variable\n\n## Contributing\n\nWe're always interested in contributions from the community.\n\nPlease ensure that your PR provides the following:\n\n* Detailed description of the proposed changes\n* Follows the style rules for [javascript](eslint.yaml) and [html](.htmlhintrc).\n* Rebased onto the latest master commit\n* If you would like to become a maintainer, please see our [Contributing Guide](contributing.md)\n\n### Unit Testing Required\n\nApplying a unit test, or an update to a unit test, is a contribution requirement.\n\nIf you're unfamiliar with Angular unit testing, or just need a refresher, here\nare the overall [Angular 1x guidelines](https://docs.angularjs.org/guide/unit-testing).\n\nYou can access the Angular PatternFly unit test ```spec``` files under the ```test``` directory.\n\nTo get started, some basic guidelines:\n* Provide a clear statement of what the component does. This encompasses what is expected, and what is produced.\n* The component has features, be clear and concise on what is expected, and what is produced from each.\n\n### Browser Support\n\nSince PatternFly is based on Bootstrap, [PatternFly generally supports the same browsers](http://www.patternfly.org/get-started/frequently-asked-questions/), see also\n[Bootstrap browser support](http://getbootstrap.com/getting-started/#support).\n","funding_links":[],"categories":["Official Resources","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly%2Fangular-patternfly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatternfly%2Fangular-patternfly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly%2Fangular-patternfly/lists"}