@@ -48,14 +48,24 @@ $ npm run help
4848
4949Note:
5050
51- 1. Add Angular and Angular -PatternFly as dependencies for your project and you' ll receive all the libraries you' ll need:
51+ 1. Add Angular-PatternFly as dependencies for your project and you' ll receive all the libraries you' ll need:
5252 ` ` ` shell
53- $ npm install angular --save
5453 $ npm install angular-patternfly --save
5554 ` ` `
56552. Add the core Patternfly CSS and script includes to your HTML file(s):
5756
5857 Please see: https://github.com/patternfly/patternfly/blob/master/QUICKSTART.md
58+
59+ Alternatively, the minimum you will need:
60+
61+ < ! -- PatternFly Styles -->
62+ < ! -- Note: No other CSS files are needed regardless of what other JS packages located in patternfly/components that you decide to pull in -->
63+ < link rel=" stylesheet" href=" node_modules/angular-patternfly/node_modules/patternfly/dist/css/patternfly.min.css" >
64+ < link rel=" stylesheet" href=" node_modules/angular-patternfly/node_modules/patternfly/dist/css/patternfly-additions.min.css" >
65+
66+ < ! -- Patternfly required settings (no jquery or further JS dependencies required by this include) -->
67+ < script src=" node_modules/angular-patternfly/node_modules/patternfly/dist/js/patternfly_settings.min.js" ></script>
68+
5969
60703. Add the following CSS include to your HTML file(s):
6171
@@ -67,21 +77,17 @@ Note:
6777
6878 ` ` ` html
6979 < ! -- Angular -->
70- < script src=" node_modules/angular/angular.min.js" ></script>
80+ < script src=" node_modules/angular-patternfly/node_modules/angular /angular.min.js" ></script>
7181
7282 < ! -- Angular-Bootstrap -->
73- < script src=" node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js" ></script>
74- < script src=" node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js" ></script>
83+ < script src=" node_modules/angular-patternfly/node_modules/angular- ui-bootstrap/dist/ui-bootstrap.js" ></script>
84+ < script src=" node_modules/angular-patternfly/node_modules/angular- ui-bootstrap/dist/ui-bootstrap-tpls.js" ></script>
7585
7686 < ! -- Angular-Sanitize -->
77- < script src=" node_modules/angular-sanitize/angular-sanitize.min.js" ></script>
87+ < script src=" node_modules/angular-patternfly/node_modules/angular- sanitize/angular-sanitize.min.js" ></script>
7888
7989 < ! -- Angular-PatternFly -->
8090 < script src=" node_modules/angular-patternfly/dist/angular-patternfly.min.js" ></script>
81-
82- < ! -- C3, D3 - Charting Libraries. Only required if you are using the ' patternfly.charts' module-->
83- < script src=" node_modules/patternfly/node_modules/c3/c3.min.js" ></script>
84- < script src=" node_modules/patternfly/node_modules/d3/d3.min.js" ></script>
8591 ` ` `
8692
87935. (optional) The ' patternfly.charts' module is not a dependency in the default angular ' patternfly' module.
@@ -96,6 +102,13 @@ Note:
96102 ]);
97103 ` ` `
98104
105+ And script includes to your HTML file:
106+ ` ` ` html
107+ < ! -- C3, D3 - Charting Libraries. -->
108+ < script src=" node_modules/angular-patternfly/node_modules/patternfly/node_modules/c3/c3.min.js" ></script>
109+ < script src=" node_modules/angular-patternfly/node_modules/patternfly/node_modules/d3/d3.min.js" ></script>
110+ ` ` ` `
111+
991126. (optional) The ' patternfly.table' module is not a dependency in the default angular ' patternfly' module.
100113 In order to use pfTableView, you must add ' patternfly.table' as a dependency in your application:
101114
@@ -108,18 +121,24 @@ Note:
108121 ]);
109122 ```
110123
124+ Add the npm dependency:
125+ ` ` ` shell
126+ $ npm install angularjs-datatables --save
127+ ` ` `
128+
111129 Add the following CSS includes to your HTML file(s):
130+
112131
113132 ` ` ` html
114133 < ! -- Place before any patternfly css -->
115- < link rel=" stylesheet" href=" node_modules/datatables.net-dt/css/jquery.dataTables.css" />
134+ < link rel=" stylesheet" href=" node_modules/angular-patternfly/node_modules/ datatables.net-dt/css/jquery.dataTables.css" />
116135 ` ` `
117136 Add the following Javascript includes to your HTML file(s):
118137
119138 ` ` ` html
120- < script src=" node_modules/jquery/dist/jquery.js" ></script>
121- < script src=" node_modules/datatables.net/js/jquery.dataTables.js" ></script>
122- < script src=" node_modules/datatables.net-select/js/dataTables.select.js" ></script>
139+ < script src=" node_modules/angular-patternfly/node_modules/patternfly/node_modules/ jquery/dist/jquery.js" ></script>
140+ < script src=" node_modules/angular-patternfly/node_modules/patternfly/node_modules/ datatables.net/js/jquery.dataTables.js" ></script>
141+ < script src=" node_modules/angular-patternfly/node_modules/patternfly/node_modules/ datatables.net-select/js/dataTables.select.js" ></script>
123142 < script src=" node_modules/angularjs-datatables/dist/angular-datatables.min.js" ></script>
124143 < script src=" node_modules/angularjs-datatables/dist/plugins/select/angular-datatables.select.min.js" ></script>
125144 ` ` `
@@ -135,18 +154,25 @@ Note:
135154 ]);
136155 ` ` `
137156
157+ Add the npm dependencies:
158+ ` ` ` shell
159+ $ npm install components-jqueryui --save
160+ $ npm install angular-dragdrop --save
161+ $ npm install angular-svg-base-fix --save
162+ ` ` `
163+
138164 Add the following Javascript includes to your HTML file(s):
139165
140- ` ` ` html
166+ ` ` ` html
141167 < ! -- jquery before angular.js -->
142- < script src=" node_modules/jquery/dist/jquery.js" ></script>
168+ < script src=" node_modules/angular-patternfly/node_modules/patternfly/node_modules/ jquery/dist/jquery.js" ></script>
143169 < script src=" node_modules/components-jqueryui/jquery-ui.min.js" ></script>
144-
145- < script src=" node_modules/angular/angular.js" ></script>
146-
147- < ! -- angular-dragdrop after angular.js -->
170+
171+ < ! -- angular-dragdrop and angular-svg-base-fix after angular.js -->
148172 < script src=" node_modules/angular-dragdrop/src/angular-dragdrop.js" ></script>
173+ < script src=" node_modules/angular-svg-base-fix/src/svgBaseFix.js" ></script>
149174 ` ` `
175+
150176 Also, the canvas background grid image is located in ' node_modules/angular-patternfly/dist/imgs/canvas-dot-grid.png'
151177 please copy this image to your application' s main images directory and reference it by overridding the ' .canvas' css
152178 class:
@@ -164,7 +190,7 @@ Note:
164190
165191In order to use Angular-Patternfly in a Webpack-bundled application there are some things you need to keep in mind:
166192
167- #### Create an alias for the jQuery module
193+ #### Create an alias for the jQuery module (if using JQuery dependency)
168194
169195In 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:
170196```
@@ -258,7 +284,7 @@ Applying a unit test, or an update to a unit test, is a contribution requirement
258284If you' re unfamiliar with Angular unit testing, or just need a refresher, here
259285are the overall [Angular 1x guidelines](https://docs.angularjs.org/guide/unit-testing).
260286
261- You can access the Angular PatternFly unit test ```spec``` files uner the ```test``` directory.
287+ You can access the Angular PatternFly unit test ```spec``` files under the ```test``` directory.
262288
263289To get started, some basic guidelines:
264290* Provide a clear statement of what the component does. This encompasses what is expected, and what is produced.
0 commit comments