|
1 | 1 | [](https://travis-ci.org/w3tecch/aurelia-typescript-boilerplate) |
| 2 | +[](https://ci.appveyor.com/project/dweber019/aurelia-typescript-boilerplate/branch/master) |
2 | 3 | [](https://david-dm.org/w3tecch/aurelia-typescript-boilerplate) |
3 | 4 | [](https://david-dm.org/w3tecch/aurelia-typescript-boilerplate#info=devDependencies) |
4 | 5 |
|
@@ -211,3 +212,111 @@ If you like to update the source do this |
211 | 212 | ```shell |
212 | 213 | docker cp ./dist/. mycontainer:/usr/share/nginx/html |
213 | 214 | ``` |
| 215 | + |
| 216 | +## Additional features |
| 217 | +This repo houses some additional features which provd to be very useful in projects. |
| 218 | + |
| 219 | +## String polyfill |
| 220 | +The file `utils/polyfills.utils.ts` contains a string polyfills. |
| 221 | +With this polyfill you can do this: |
| 222 | +``` |
| 223 | +'Teststring'.isEmpty() => false |
| 224 | +''.isEmpty() => true |
| 225 | +undefined.isEmpty() => true |
| 226 | +``` |
| 227 | + |
| 228 | +## Validation |
| 229 | +The file `utils/validation.utils.ts` contains some validatoin helper functions and regex patterns. |
| 230 | + |
| 231 | +The function `validateFilledFieldsWithValidationRules` us really useful as you can check a object which is already prefiled if it's valid and if not show errors. |
| 232 | + |
| 233 | +The function `controllerValidByRules` will check if a validation controller is valid. |
| 234 | + |
| 235 | +This could be an example implementation |
| 236 | +``` |
| 237 | +class FormExample { |
| 238 | +
|
| 239 | + @bindable({ defaultBindingMode: bindingMode.twoWay }) public user: User; |
| 240 | +
|
| 241 | + private controller: ValidationController; |
| 242 | + private rules: Rule<CustomerContactRestModel, any>[][]; |
| 243 | +
|
| 244 | + public constructor( |
| 245 | + private validationControllerFactory: ValidationControllerFactory |
| 246 | + ) { |
| 247 | + this.controller = this.validationControllerFactory.createForCurrentScope(); |
| 248 | + this.controller.validateTrigger = validateTrigger.changeOrBlur; |
| 249 | + } |
| 250 | +
|
| 251 | + public bind(): void { |
| 252 | + this.setupValidationRules(); |
| 253 | + validateFilledFieldsWithValidationRules(this.rules, this.user, this.controller); |
| 254 | + } |
| 255 | +
|
| 256 | + @computedFrom('user') |
| 257 | + public get isValid(): boolean { |
| 258 | + return controllerValidByRules(this.rules, this.user, this.controller); |
| 259 | + } |
| 260 | +
|
| 261 | + private setupValidationRules(): void { |
| 262 | + this.rules = ValidationRules |
| 263 | + .ensure((user: User) => user.lastName) |
| 264 | + .displayName('USER.LAST_NAME') |
| 265 | + .required() |
| 266 | + .ensure((user: User) => user.email) |
| 267 | + .displayName('USER.EMAIL') |
| 268 | + .email() |
| 269 | + .on(this.customerContact).rules; |
| 270 | + } |
| 271 | +} |
| 272 | +``` |
| 273 | + |
| 274 | +### i18n integration |
| 275 | +You can pass a tranlation string into the `displayName('USER.LAST_NAME')` and it will be translated for you. |
| 276 | + |
| 277 | +Additionally you can translate methods like `.required()` in `src/local/*` as demostrated in the files. |
| 278 | + |
| 279 | +If you use the the method `withMessageKey('YOUR.TRANSLATION')` you can pass a translation string and it will be translated for you. |
| 280 | + |
| 281 | +## Route generator service |
| 282 | +If you have router tree like this |
| 283 | +``` |
| 284 | + root |
| 285 | + / \ |
| 286 | +left right |
| 287 | +``` |
| 288 | +You can't navigate from `left` to `right` with `this.router.navigateToRoute(...)` as `right` is in a branch which `left` is unaware of. This is due to the injection of the router service. |
| 289 | + |
| 290 | +One solution is to use `this.router.navigate(...)` but this is unsave as if the route configuration is changed the navigation is broken as it's hardcoded. |
| 291 | + |
| 292 | +The `route-generator.service.ts` will provide a type safe solution for save navigation. |
| 293 | + |
| 294 | +Check the following files to get an idea how to use it: |
| 295 | +- `route-generator.service.ts` |
| 296 | +- `app.vm.ts` and `app.routes.ts` |
| 297 | +- `child-router.vm.ts` and `child-router.routes.ts` |
| 298 | + |
| 299 | +As an example you could navigate like this from `left` to `right` |
| 300 | +``` |
| 301 | +this.routeGeneratorService.navigateByRouteNames( |
| 302 | + { routeName: 'root' }, |
| 303 | + { routeName: 'right' } |
| 304 | +); |
| 305 | +``` |
| 306 | + |
| 307 | +You can also pass route parameters like this but remember that query parameter have to attached to the last element |
| 308 | +``` |
| 309 | +this.routeGeneratorService.navigateByRouteNames( |
| 310 | + { routeName: 'root', params: { id: '1' }}, |
| 311 | + { routeName: 'right' } |
| 312 | +); |
| 313 | +``` |
| 314 | + |
| 315 | +## Class transfomer (model handling) |
| 316 | +We have included the [class transformer](https://github.com/typestack/class-transformer) which helps creating models (`src/app/models/*`). This transformation can be done |
| 317 | +in both direction (rest to model, model to rest). |
| 318 | + |
| 319 | +## Dialog service |
| 320 | +There is a custom dialog implementation for simpler useage of elements in dialogs. |
| 321 | + |
| 322 | +The Service is named `generic-dialog.service.ts` and an example can be found in `welcome.vm.ts`. |
0 commit comments