Angular PatternFly 4 Migration Guide
This wiki page will detail changes required to migrate your Angular-PatternFly applications from Angular-PatternFly 3 to Angular-PatternFly 4.
Upgrade your PatternFly dependency using the npm command:
npm install --save [email protected]
Upgrade your PatternFly dependency using the bower command:
bower install --save angular-patternfly#4.0.0
Angular-PatternFly v4.0.0 updates it's angular-ui-bootstrap dependency to v2.3.x. Post angular-ui-bootstrap v0.14.0 all angular-ui-bootstrap components are prefixed with 'uib-'. Angular-patternfly v4.0.0 has prefixed all of it's angular-ui-bootstrap components. You may have to prefix angular-ui-bootstrap components in your application. Please see Prefix Migration Guide for more information.
In Angular-PatternFly 4 the Angular 1.x directives were refactored to Angular 1.5+ components. The naming convention has remaing the same, but all attribute directives will need to be changed to component tags, as in:
<div pf-about-modal ...></div>
would become:
<pf-about-modal ...></pf-about-modal>
Exceptions (these are still attribute directives):
- pfRemainingCharsCount
- pfFocused
- pfValidation
- pfFixedAccordion
A list of all PatternFly 4 components and their attributes can be seen in the Angualr-PatternFly docs: http://www.patternfly.org/angular-patternfly/
In PatternFly 4, two directives have been removed:
- pfDatepicker - this can be replaced with Angular UI Bootstrap's uibDatepicker
- pfDateTimepicker - currently there is no non-jquery support for this component
In PatternFly 4, the following components have been added:
- pfTableView - basic table with checkbox selection of rows, select all, pagination, row actions, etc... Can be used with pfToolbar to also use filtering, batch actions, and view switching (between list, card, and table views).
- pfCanvasEditor - drag and drop items from a toolbox onto the canvas. Drag items to rearrange them on the canvas. Items can be connected to each other.
- pfDonutChart - Shows relationship of a set of values to a whole.
- pfEmptyState - Configurable empty state for List, Card, and Table views.
The angular patternfly code has been adjusted to use the non-JQuery patternfly settings. To keep this jQuery independence, include only patternfly-settings.js rather than patternfly.js.
- Updated lodash dependency to 4.x
- Using LESS css preprocessing
- Updated angular-bootstrap dependency to 2.3.x
- Dropped 1.3.x support for dependencies: angular, angular-animate, angular-sanitize, and angular-mocks
- Update layout for sort, filter, and toolbar to match patternfly markup
- pfInlineNotification - pfNotificationRemove function added which ties the click event of the close button to a user specified function. Previously, this used to be hardcoded to use the Notifications service, this is now optional.
- pfListView - If defined, actionButton class will replace 'btn-default'. Previously it was appended. (Issue #434)
- pfSelect - No longer accepts ngOptions as a parameter. Please see the pfSelect documentation for usage.
