[WIP] setup modern angular training

[fabioemoutinho]

Goals

• Learn Angular with the least amount of concepts possible by leveraging the power of modern Angular features/APIs.
• Make Angular simpler by:
  • no mentions to older APIs (ie modules)
  • no unnecessary information like how things used to work on older versions, as we're interested in latest Angular only, or in other words, how would you write an application from scratch on latest Angular.
  • avoid RxJS as much as possible, because it is very complex and most devs struggle to learn proper RxJS. Signals solve most of UI complexity and can replace RxJS on almost all scenarios (for most applications).
• Freedom to/opportunity for Bitovi's Angular devs to explore newer APIs/features/concepts when maintaining this training.

This training is not a replacement for the current Angular training, because the current one can be considered a more advanced Angular training, as it contains legacy Angular and RxJS knowledge, which is important for more complex and enterprise applications.

Requirements for students

• TypeScript (assumed basic knowledge of TypeScript so we can talk only about Angular features/APIs)
• Familiarity with at least one frontend tool (react, vue, svelte, or angular if you just want need an update on angular)

to-do:

• should we add prettier setup in 01-building-first-app so formatting for control flow blocks works properly?
• update all test files (not touched yet, just copied from current angular training)
• add missing content (items >=4 below)

Some notes comparing to current training

1. why angular? (removed)
2. generate an app (updated)
3. creating components (updated)

• *ngIf becomes @if
• *ngFor becomes @for
• ng-container removed
• ng-class (soft deprecated, not recommended by angular for simple uses anymore - removed as it does not need to be a part of this training)

4. creating pipes
5. adding routing
6. creating navigation (merge with adding routing?)
7. fetching data with services

• http client
• *new! resource api

8. rendering data in components

• service injection (use new inject function instead?)
• subscribe to an observable (do not talk about rxjs subscription on this training, let rxResource take care of it)
• reactive forms data binding (make it nonnullable typed forms)
• listening to form changes (so much easier with signal effects)

9. multi-parameter services (not sure this should be a section in itself, could be an exercise in fetching data with services)
10. optional: declarative state (remove)
11. writing unit tests (remove, not necessary as it is available on current training?)
12. creating nested routes (could be an exercise in adding routing/creating navigation)
13. binding component data

• inputs and outputs
• control value accessor

14. creating directives (maybe it would make sense to talk about directives in more detail and explain directive composition API)
15. order service (do we really need this? we already talked about a service and fetching data)
16. order history component (do we really need this? we already talked about all the concepts before)
17. item total pipe can probably be removed (do we really need this? same as creating a pipe, no need to touch this subject again)
18. real time connections (can be removed)
19. deploy app (can be removed)