CertiLibrary

This project is a work in progress to become the perfect library for the needs of Certinergie. This library can be found on npmjs.com.

Getting started

Prerequisites

NOTE: For a Windows environment, make sure to execute the Set-ExecutionPolicy ByPass in Powershell as administrator on your device.

Make sure that you have Node.JS installed.
For some packages it might be necessary to have Git installed.
Install the Angular CLI with the npm i -g @angular/cli.

In order to get started with this library, make sure that you already have an Angular project.

New Angular project

If you haven't created an Angular project just yet, then you can create one easily using this template and rename the project by renaming the project folder and every occurence of angular-project-template by your prefered name.

Nextly, you can execute the npm i certi-library command, which will install this library.

In an existing Angular project

You can execute the npm i certi-library command, which will install this library.

Built With

This project was generated with Angular CLI version 10.0.2.
Visual Studio Code - Used for Angular - Frontend

Build

Run ng build --prod to build this library. The build artifacts will be stored in the /dist/certiproject directory. Use the --prod flag for a production build.

Publish

To publish a new library version, simply execute the npm publish command after having built the new version. Make sure to increment the library version in the package.json file.

Documentation

Generating the documentation

Before executing any commands, make sure that you're located in the CertiLibrary folder of the project, which is a folder that can be found in the root of the project.

Nextly you can execute the compodoc -p certiproject\projects\certi-library\tsconfig.lib.json -s -n "CertiLibrary documentation" --output ./docs command. This will generate the documentation for the CertiLibrary that is linked to the tsconfig.lib.json file, the title of the documentation will be "CertiLibrary documentation" and the generated files will be put in the root subfolder docs. This docs folder is necessary for the GitHub pages.

Running tests

Unit tests

Run ng test to execute the unit tests via Karma.

End-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Dependencies that are in this library

@angular/flex-layout to easily work with flexbox in Angular.
@angular/material for easier UI creation

Other dependencies that might be useful to add for the library

@angular/localize to work with localization and translations.
@angular/google-maps, from Angular Components team, to easier work with the Google Maps API.
@angular/pwa to convert your web application to a PWA.
@angular/youtube-player, from Angular Components team, to easier work with the YouTube player API.
angular-epic-spinners to have animated loaders.
angular-calendar to work with calendars.
AngularFire to work with Firebase in Angular.
apollo-angular to easily work with GraphQL.
Cloudinary is a SaaS for managing media assets.
Dragula to easily implement drag and drops in your application.
@fortawesome/angular-fontawesome to add more icons from fontawesome.com to the standard Angular Material icons. By default all the free-to-use icons are added.
http-server to easily test your PWA.
ng2-file-upload to easier work with file uploading.
ng2-notifications to get easily started with push notificiations.
ng2-pdf-viewer to visualize PDFs easily and user friendly.
ng-bootstrap to work with bootstrap inside of Angular.
ng-lazyload-image to increase performance of images in your application.
ngx-auth to easily work with authentication.
ngx-charts to easily create charts.
ngx-meta to easier implement SEO support in your SPA.
ngx-cache to easier implement caching in a SPA.
ngx-moment to easier manipulate time using pipes.
ngx-pipes adds more pipes.
ngx-spinner to have spinner loading animations.
ngx-toastr to add toasts to your application.
ngx-translate to create a multilangual SPA.

Best practices to keep in mind whils programming in Angular

A very detailed, up-to-date guide on how to program in Angular can be found in the Angular offical coding style guide.

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." - Woods
Make use of the Angular CLI.
Avoid comments in code ﬁles.
Make correct use of the RxJS library.
Use path aliases for the imports.
Avoid the ’any’-datatype within TypeScript programming
Do follow a pattern that describes the symbol’s feature then its type. The recommended pattern is feature.type.ts.
Separate ﬁle names with dots and dashes
Use dashed-case or kebab-case for naming the element selectors of components.
Unit test ﬁles should contain the spec-sufﬁx in the test ﬁles.
End-to-end test ﬁles should use the e2e-sufﬁx instead.
Use consistent names for services.
Be consistent with the ﬁle structure conventions.
Apply the SRP (Single Responsibility Principle) throughout a project.
Deﬁne small functions (no more than 75 lines of code).
Directive (components and other directives) selectors should be lowercase and have a custom preﬁx that identiﬁes the feature area of the application.
Pipe names should use PascalCase.
Angular’s design is made for one asset per ﬁle.
Every ﬁle that is written by the team goes under the src-folder and every other script that comes from a third party should be stored in another folder.
Do extract templates and styles into a separate ﬁle, when more than 3 lines.
Make use of the @Output- and @Input-decorators for properties of a component.
Do not add the on preﬁx for output properties.
Place members in a consistent sequence.
Delegate complex component logic to services.
Respect the LIFT design principle .
- Locate code quickly.
- Identify the code.
- Keep the Flattest structure.
- Try to be DRY (Don't Repeat Yourself).

Useful extra's

Angular Cheat sheet
Angular resources overview to get a full overview of most, well-supported resources that can be used with Angular.
Augury to easily debug the Angular SPA.
botmap.surge.sh to crawl pages ofe the SPA (Single Page Application).
Flexbox Cheat sheet
Notepad++ is a useful notepad that adds more functions over the standard notepad on your Windows device.

Useful extensions for Visual Studio Code

Angular Snippets (Version 9) by John Papa - Allows you to use snippets so that you can program faster.
Prettier by Prettier - Useful to format documents whilst coding.
TODO Tree by Gruntfuggly - Useful to set TODOs all over the project and locate them easily.