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 Apps with Nginx in Docker

#angular #docker #guide

โœ… Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ‘2โค1
๐Ÿ“ต DOM Events and Pub/Sub

#js #patterns

Pub/Sub, which means Publish-Subscribe, uses a more structured approach. Instead of depending on DOM components, it uses a central message bus, similar to an events message board. Here is the summary:

- Publishers: These are the event announcers who broadcast messages (events) via the messaging bus.
- Subscribers: These are the visitors who registered to receive specific announcements (events). When a relevant interaction comes, subscribers get notified and can take action.


โœ… Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ‘2
๐Ÿšณ Interview Questions: Promise object

#js #interview #promise

Problem: Implement a simple version of Promise:

The Promise object is an asynchronous programming solution for handling asynchronous events. Promise objects can represent the status of an asynchronous operation, including:

- pending
- fulfilled
- rejected

Analysis:

๐ŸŒถThe MyPromise class is a custom Promise class whose constructor accepts an executor function as a parameter.
๐ŸŒฝThe executor function in the constructor will be executed immediately and accepts two parameters, resolve and reject, which are used to modify the state of the Promise.
๐ŸžThe resolve method is used to modify the Promiseโ€™s status from โ€œpendingโ€ to โ€œfulfilledโ€ and pass the value to subsequent handlers.
๐ŸฅšThe reject method is used to modify the Promiseโ€™s status from โ€œpendingโ€ to โ€œrejectedโ€ and pass the reason to the subsequent handler.
๐ŸณThe then method is used to register a callback function to be executed when the Promise is completed or rejected. It accepts two parameters: onFulfilled and onRejected, which are called when the Promise is completed or rejected respectively.
๐ŸฅฉThe then method returns a new MyPromise instance to support chained calls. If onFulfilled or onRejected returns a value, it will be used as the resolved value for the next MyPromise instance.
๐Ÿ”The catch method is the shorthand form of then(null, onRejected).
๐Ÿ•The isFulfilled method is used to check whether the Promise is in the fulfilled state.
๐ŸŒฎThe isRejected method is used to check whether the Promise is in the rejected state.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ‘4
๐Ÿฉท Difference Between Compute and Effect in Angular Signals

#angular #signals #computed #effect

Computed Signals: Derived Signal

Function: Computed signals represent values derived from other signals. Think of them as formulas that take existing signals as inputs and produce a new output value.
Creation: You define them using the computed function, specifying a derivation function that outlines how the computed value is calculated.
Benefits:
Lazy Evaluation: Computed signals are calculated only when their value is needed. This avoids unnecessary computations.
Memoization: Subsequent reads of the computed signal with the same dependencies return the cached value, improving performance.
Dependency Tracking: Angular automatically tracks which signals a computed signal depends on. When any of those signals change, the computed signal is automatically recalculated.

Effects: Actions Triggered by Signal Changes

Function: Effects are functions that execute in response to changes in signals. They typically perform side effects like logging, interacting with external APIs, or updating local storage.
Creation: You create effects using the effect function. This function can optionally accept a onCleanup function for managing long-running operations.
Benefits:
Reactivity: Effects automatically run whenever their dependent signals change, ensuring your application stays up-to-date.
Asynchronous Execution: Effects run asynchronously during change detection, preventing them from blocking the main thread.


โœ… Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
โค1
๐Ÿ—ฃ All Ukrainians are grateful to the Malian rebels for the work they have done. Nothing can stop the idea whose time has come.

Glory to Heroes.
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ‘10๐Ÿ‘Ž1
This media is not supported in your browser
VIEW IN TELEGRAM
๐Ÿ’ข Interview Questions: Event loop mechanism

#js #interview #eventLoop

Question: Give an explanatory note on the event loop mechanism.

answer:

The event loop mechanism mainly has the following processes:

๐Ÿ‰Synchronous tasks are executed on the main thread, forming an execution context stack.

๐Ÿ“Once all synchronous tasks in the execution stack have been executed, the system will read the asynchronous tasks in the queue, such as Promise.then(), setTimeout, AJAX callbacks, etc.

๐Ÿ†The asynchronous task will be added to the task queue

๐Ÿฅ‘Once the execution stack is cleared, the system checks the task queue. If it is not empty, the first task is taken out and placed on the execution stack for execution.

๐ŸฅฆThe main thread repeats the process of alternating execution of the stack and queue, thereby realizing queued execution of threads.
The event loop allows synchronous tasks and asynchronous tasks to be executed alternately in the same thread, making full use of CPU resources. This is important for JavaScript that supports UI interaction and responsiveness.
Please open Telegram to view this post
VIEW IN TELEGRAM
โค1๐Ÿ‘1
๐Ÿ’ต FOR Ukraine:
๐Ÿ”— https://send.monobank.ua/jar/6DbLp37hre
๐Ÿ’ณ 5375 4112 1187 1350

๐ŸŒŽ FOR ALL DONATS:

๐Ÿ’ต PayPal: luckystudydanit@gmail.com
๐Ÿ’ต SWIFT code: UNJSUAUKXXX

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
โค3
๐Ÿšณ Interview Questions: Ajax implementation

#js #interview #ajax

Implement an ajax request function that supports Promise:

๐ŸฃSend a request using the XMLHttpRequest object

๐Ÿ›Initialize the open method, configure the request method and url

๐ŸทAdd onload and onerror callback functions

๐Ÿง‰onload determines whether the status code is within the range of 200โ€“300 resolve, otherwise reject

๐Ÿซ˜onerror directly reject

๐ŸฅงAfter the request is successful, resolve returns response, and after failure, reject reports an error.

๐ŸฅŸSupport options to configure request parameters and request body

๐ŸฑReturns a Promise object, which can be processed externally using then/catch

Analysis: Promise is used to encapsulate asynchronous ajax requests and achieve a synchronous programming style.
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿฉท How to avoid subjects and middle services between different components

#angular #signals #inject #guide

On the first screen, we have a ParentComponent that passes data to a ChildComponent, which in turn passes the data to an InnerChildComponent. This is a simple example.

On the second screen, the example will help you to remove prop drilling from your Angular applications and make your code more maintainable and easier to understand.


โœ… Article link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿšณ Interview Questions: JSONP cross-domain implementation

#js #interview #jsonp

Analysis: Create the script node script.src, set the callback function callbackName, parse the parameters and splice the URL, dynamically insert it into the body to implement JSONP cross-domain request, and return the Promise interface.
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ“ต Interview Questions: Implement deep cloning

#js #interview #deepClone

Analysis: Recursively implement deep cloning of objects and arrays, returning basic types directly, and reference types recursively call deep cloning hierarchically.
Please open Telegram to view this post
VIEW IN TELEGRAM
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/5TvPibajtR
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
๐Ÿšฑ Interview Questions: Function currying

#js #interview #deepClone #patterns

Analysis: Currying of the add function is achieved by recursively calling a function that continues to accept parameters.
Please open Telegram to view this post
VIEW IN TELEGRAM
โค๏ธ Setting Up Jest in Your Angular Project

#angular #tests #jest #guide

Testing lies at the heart of building robust and reliable Angular applications.


โœ… Article link
๐ŸŽ Code link
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ‘1