Angular πŸ‡ΊπŸ‡¦ - practical notes
1.63K subscribers
1.6K photos
1 file
532 links
Angular - practical notes

This group is for posting practical notes for Angular developers. Mostly all posts are for quick implementation https://t.me/angular_practical_notes (Commenting on posts only in ENG and UA langs here). Welcome!
Download Telegram
πŸ“„ Angular’s GoF patterns. Factory Method.

#angular #patterns

Advantages:

β€” Flexibility and expandability: Allows for easy introduction of new types of products without changing existing code.
β€” Reducing dependencies: The Factory Method reduces the direct dependency between classes that create and use objects, making code modification and testing simpler.
β€” Ease of maintenance and updates: Code using the pattern is easier to maintain and update, as adding a new type of product often doesn’t require changes to the existing code that uses the factory.


Disadvantages:

β€” Complex architecture: Using Factory Method can complicate application architecture, especially when used unnecessarily or in simple scenarios.
β€” Code bloat: Creating many factory methods and classes can overload the code, making it hard to understand, particularly for new developers.
β€” Performance issues: In some cases, particularly with incorrect implementation, Factory Method can affect application performance due to additional method calls and object creations.
β€” Debugging difficulty: Following this pattern can make debugging harder since the actual object creation is hidden within the factory method, complicating error tracking.
β€” Need for careful planning: Effective use of Factory Method requires detailed planning and understanding of when and what objects should be created. Planning errors can lead to incorrect or excessive implementation.
β€” Limited flexibility in some scenarios: While Factory Method provides flexibility in object creation, it can be limited in scenarios requiring very dynamic or conditional object creation.
β€” Not suitable for simple applications: For small or simple applications with a relatively static structure, using Factory Method might be unnecessary and complicate the project.


βœ… Article link
πŸ‘2
πŸ“„ Simple Unsaved Data Changes Guard in Angular 17+

#angular #guard #ui_element

...when a user wants to navigate to other routes having pending data changes in the current page...


βœ… Article link
πŸ‘5
Hello, friends!
As you can see, I'm a Ukrainian software engineer who tries to do volunteer fundraisers to support the Armed Forces of Ukraine. Sometimes it takes a lot of time and I am not able to maintain this channel for you. Please help me close these fundraisers because without the Ukrainian army there will be nothing Ukrainian. Thank you very much!

πŸ’΅ FOR Ukraine:
https://send.monobank.ua/jar/AgppwxhwLX
5375 4114 1222 8582

🌎 FOR ALL DONATS:

πŸ’΅ SWIFT code: UNJSUAUKXXX

πŸ’΅ PayPal: luckystudydanit@gmail.com

My profile with reports after closing fundraiser :
https://www.facebook.com/volunt2erua/

also all reports in our πŸš€ channel:
https://t.me/toxicc_squad
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘2
πŸ“„ Saga Pattern Guide in Microservices with Node.js

#nodejs #guide #pattern

The Saga pattern addresses this by breaking a transaction into smaller, local transactions handled by different services.


There are 2 approaches to implementing the Saga pattern: Choreography-Based Saga and Orchestration-Based Saga.

β€” Orchestration-Based Saga: A single orchestrator (arranger) manages all the transactions and directs services to execute local transactions.
β€” Choreography-Based Saga: All the services that are part of the distributed transaction publish a new event after completing their local transaction.


Choreography-Based Saga approach and a real-world hotel room reservation scenario with 3 microservices: Booking Service, Payment Service, and Notification Service.

β€” Booking Service: Starts the process by reserving a room. This is the first local transaction. Once successful, it sends a message to the Payment Service to process the payment.
β€” Payment Service: Receives the message and processes the payment. If the payment is successful, it commits its local transaction and informs the Booking Service and Notification Service.
β€” Notification Service: On receiving confirmation of successful payment, it sends a booking confirmation email to the user.
β€” Handling Failures: If the Payment Service encounters an issue (e.g., payment decline), it returns a failure message to the Booking Service. The Booking Service then executes a compensating transaction to cancel the room reservation, ensuring the system returns to its original consistent state.


Prerequisites

β€” Node.js project with necessary dependencies (express, amqplib, nodemailer, mongoose, dotenv) installed.
β€” RabbitMQ server running locally or remotely.
β€” Email server or service for the Notification Service (e.g., Nodemailer with SMTP or an email API service).


βœ… Article link
πŸ‘2
πŸ“„ @for vs *ngFor β€” Angular 17 : The newest version of Angular

#angular #for #ngFor

βœ… Article link
❀3
πŸ“„ Declarative way of working with signal effects

#angular #signals #effect

...This approach simplifies the reactive component state management in Angular applications, making the code more declarative and easier to maintain...


βœ… Article link
πŸ‘2
πŸ“„ Permission/Role-based Security

#angular #guard #guide

No matter what client application you are working with, the following are the five ingredients that are needed to implement permission-based security:

1 β€” Client-side API Resource
2 β€” Client Side Session Service
3 β€” Fall-back Route
4 β€” Navigation Guards
5 β€” Fragment Guards

βœ… Article link