@@ -48,14 +48,24 @@ $ npm run help
48
48
49
49
Note:
50
50
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:
52
52
` ` ` shell
53
- $ npm install angular --save
54
53
$ npm install angular-patternfly --save
55
54
` ` `
56
55
2. Add the core Patternfly CSS and script includes to your HTML file(s):
57
56
58
57
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
+
59
69
60
70
3. Add the following CSS include to your HTML file(s):
61
71
@@ -67,21 +77,17 @@ Note:
67
77
68
78
` ` ` html
69
79
< ! -- 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>
71
81
72
82
< ! -- 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>
75
85
76
86
< ! -- 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>
78
88
79
89
< ! -- Angular-PatternFly -->
80
90
< 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>
85
91
` ` `
86
92
87
93
5. (optional) The ' patternfly.charts' module is not a dependency in the default angular ' patternfly' module.
@@ -96,6 +102,13 @@ Note:
96
102
]);
97
103
` ` `
98
104
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
+
99
112
6. (optional) The ' patternfly.table' module is not a dependency in the default angular ' patternfly' module.
100
113
In order to use pfTableView, you must add ' patternfly.table' as a dependency in your application:
101
114
@@ -108,18 +121,24 @@ Note:
108
121
]);
109
122
```
110
123
124
+ Add the npm dependency:
125
+ ` ` ` shell
126
+ $ npm install angularjs-datatables --save
127
+ ` ` `
128
+
111
129
Add the following CSS includes to your HTML file(s):
130
+
112
131
113
132
` ` ` html
114
133
< ! -- 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" />
116
135
` ` `
117
136
Add the following Javascript includes to your HTML file(s):
118
137
119
138
` ` ` 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>
123
142
< script src=" node_modules/angularjs-datatables/dist/angular-datatables.min.js" ></script>
124
143
< script src=" node_modules/angularjs-datatables/dist/plugins/select/angular-datatables.select.min.js" ></script>
125
144
` ` `
@@ -135,18 +154,25 @@ Note:
135
154
]);
136
155
` ` `
137
156
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
+
138
164
Add the following Javascript includes to your HTML file(s):
139
165
140
- ` ` ` html
166
+ ` ` ` html
141
167
< ! -- 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>
143
169
< 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 -->
148
172
< script src=" node_modules/angular-dragdrop/src/angular-dragdrop.js" ></script>
173
+ < script src=" node_modules/angular-svg-base-fix/src/svgBaseFix.js" ></script>
149
174
` ` `
175
+
150
176
Also, the canvas background grid image is located in ' node_modules/angular-patternfly/dist/imgs/canvas-dot-grid.png'
151
177
please copy this image to your application' s main images directory and reference it by overridding the ' .canvas' css
152
178
class:
@@ -164,7 +190,7 @@ Note:
164
190
165
191
In order to use Angular-Patternfly in a Webpack-bundled application there are some things you need to keep in mind:
166
192
167
- #### Create an alias for the jQuery module
193
+ #### Create an alias for the jQuery module (if using JQuery dependency)
168
194
169
195
In 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:
170
196
```
@@ -258,7 +284,7 @@ Applying a unit test, or an update to a unit test, is a contribution requirement
258
284
If you' re unfamiliar with Angular unit testing, or just need a refresher, here
259
285
are the overall [Angular 1x guidelines](https://docs.angularjs.org/guide/unit-testing).
260
286
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.
262
288
263
289
To get started, some basic guidelines:
264
290
* Provide a clear statement of what the component does. This encompasses what is expected, and what is produced.
0 commit comments