PVStream

This project was generated with Angular CLI version 8.3.23.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code rules

This is the rules, that should be followed as you write the code in this project. They're not particularly strict, but it would be very nice to follow them as much as you could.

TODOs

TODOs should be written in this pattern: todo:%firstName%.%lastName%:%date% - %todoContent%

E.g.: todo:igor.vinogradov:25.02.2020 - this is an example todo

This ensures that developers who will be going through your code, will know when, by who and why this TODO was left and if it's still valid.

Variable and method naming

Underscores (_) for private methods

Since TypeScript doesn't allow accessing private methods outside of the class, underscoring them is not necessary. Please don't do it.

Prefixing with "b" or "is"

For easier code readability every variable, that contains boolean value should be prefixed with "b" (e.g.: bLoading or bAccessAllowed).

Every method that returns a boolean value should be prefixed with "is" (e.g.: isLoggedIn, isAdmin).

Postfixing with "$"

Every variable that contains something related to RxJS or NgRX should be postfixed with "$". That also includes all the selectors for store.

E.g.: bLoading$ - selector for Store, private store$: Store<any> - injecting Store in a component, private onDestroy$: Subject<void> - creating Subject for onDestroy event.

Code scaffolding

Angular-schematics

Creating structure for new page

• Go to src/app/modules folder
• Run ng g m %pageName% --routing=true where %pageName% is the name of the new page (e.g. Login) - new folder %pageName% should be created, containing module declaration file and routing module declaration file
• Run ng g c %pageName%. %pageName% should be the same as created module name. This will create main component for created page module in the root folder of the module.
• Specify this component as main loading component in routes module (path: '')
• Add new object in the routes const in src/app-routing.module.ts file

As you need to create new components or file types (services, enums, etc), you need to create new folders named accordingly (components, enums, services, etc).

Other types

• Go to src/app/modules/%module%/%fileType%
  • %module% - the module where you want to put your file or component
  • %fileType% - type of the file you want to create (e.g. components if you want to create component, enums if you want to create enum, etc). If no folder is created for desired file type - create one
• Run ng g %schematic% [--options].
  • List of available angular-default schematics can be found here
  • List of available options for specified schematic can be found using --help option (ng g component --help)

NgRX schematics

Initializing Store state for a module

Before creating features or actions you need to initialize Store state for a module.

• Go to module folder where you want initialize Store state.
• Create folder store. If this folder is already created - state has been already initialized and no need to do it again - this section.
• Go to newly created folder
• Run ng g store %moduleName% --module %pathToModule%
  • %moduleName% - name of the module for which you want to initialize state.
  • %pathToModule% - relative path to the module declaration file (e.g.: ..\home.module.ts).

Creating new feature

Feature contains reducers, actions, etc for a new piece of Store state.

NOTE: If you're not planning on creating new Store state part and want just to create actions or effects for manipulating already existing state refer to sections of creating Actions or Effects separately.

• Go to module where you want to create a new feature.
• Go to store folder. If none exists - refer to Initializing Store state for a module section.
• Run ng g feature %featureName% --module %pathToModule% --reducers %pathToReducers%
  • %featureName% - the name of new feature.
  • %pathToModule% - relative path to module where are you creating new feature (e.g.: ..\home.module.ts).
  • %pathToReducers% - relative path to index.ts file located in reducers folder
  • Note: If CLI prompts you with question about success and failure actions - answer No (n)
• Open module declaration file of the module, where you're creating a feature.
• Remove StoreModule.forFeature line created by the generator. It should contain something like for%featureName%.
• Remove import that contains something like for%featureName%
• Go through Preparing generated actions file to use
  • Note: "generated actions file" means the actions file that was generated by executing command from previous step. It should be located in store/actions directory.
  • WARNING: Be aware, that after preparing actions file to use, generated reducers and effects files contains invalid import for actions which will need to be corrected before writing any reducers or effects.

Creating new Actions file

• Go to module where you want to create actions file.
• Go to store/actions folder. If actions folder is not present - create one.
• Run ng g action %actionName%.
  • %actionName% - name of the action you want to create.
• Go through Preparing generated actions file to use

Preparing generated actions file to use

The structure of action file is a bit different from what NgRX devs propose, since I (Igor Vinogradov) think that my approach is much more structurized and clean, steps below are necessary before using actions file.

• Open the generated actions file.
• Delete all contents (Ctrl+A then Delete or Backspace).
• Do not close this file. Open src/app/modules/shared/store/actions/example.actions.ts file
• Copy all the contents from example.actions.ts file to the file you are preparing to use.
  • example.actions.ts file contains rough structure of actions file that should be used in the project.
• Delete all the comments.
• Rename ExampleActions. (e.g. UserActions)

Actions file is ready to use.

Creating new Effects file

TODO

Build

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

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

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

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.