Angular Basics

Intro

•    package.json

•     (list of dependencies)

•    package-lock.json

•     (details list of that dependencies)

•    angular.json

•     (map everything here: assets, scripts etc)

•    tsconfig.json

•     (typescript configuration file)

•    polyfills.ts

•     (compatibility file)

 

Components

•    Modules must be declared in the imports

•    Components must be declared in the declarations

•    Standalone components are not dependent in any modules and it must be declared in imports

•    and Pipes are doing the transformation over text

Bindings - Two Way, Property, Event

Routing

•    Basic Routing

•      Routes – for mapping path & component

•      routerLink – navigate to different routes

•      router-outlet– for displaying matched route

•    Child routing

•     Activated Route (const routeId = route.snapshot.paramMap.get(‘id’);)

•    Module Routing

•     const routes : Routes

•    Lazy Loading

•     Load when required (loadChildren then import)

Directives

•    Add additional behavior to elements

•    Components works as a directive

•    Attribute Directive

ngClass (Binding Classes)

ngStyle (Binding Styles, Only accept objects s = {})

ngModel (Two Way Binding)

•    Structural Directive

*ngIf

*ngFor

*ngSwitch

Services

•    Defined with @Injectable

•    All are in observable format and without subscribe it won’t work (Rxjs feature)

FormType

•    TDF – handle in html file

•     ngForm

•    Reactive – handle in ts file

•     FormGroup

Guard

•    used to control access in particular route

•    canActivate

•    canActivateChild

•    canDeactivate

•    canLoad

Interceptor

•    Used for token login

•    Declares in app.module [Providers]

Rxjs

•    Observable and Operators

•    Promise (then, then, finally)    

Read More

Reactive Programming

🔎Definition---

JavaScript Promises are objects used to represent the eventual completion (or failure) of an asynchronous operation. They are widely used in modern JavaScript to handle asynchronous tasks in a more readable and manageable way, compared to traditional callback-based approaches. A Promise can be in one of three states:
Pending: Initial state, neither fulfilled nor rejected.
Fulfilled: The operation completed successfully.
Rejected: The operation failed.

On the other hand, RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables. An observable represents a stream of data that can be observed over time. It provides powerful tools for handling asynchronous and event-based programming.

🔩Conversion---

Converting a Promise to an Observable is a common operation in RxJS when integrating with libraries or APIs that return Promises. RxJS provides the from function to convert various data sources, including Promises, into Observables.

Converting an Observable to a Promise is useful when you need to work with Promise-based APIs or when you want to consume Observables in a Promise-based context. RxJS provides the toPromise() operator to convert an Observable into a Promise.

🔚Conclusion---

Promises are simpler and more straightforward for handling single asynchronous operations that produce a single value or error.

Observables are more powerful and suitable for handling multiple asynchronous values over time, supporting cancellation, and offering a wide range of operators for transforming and combining streams of data. When you promise you can't cancel and for cancelling you have to use another library. But you can Unsubscribe to cancel in observables. Also you have to unsubscribe every time that means writing same code couple of times when working on a  big project but in Promises it will go on rejected state.

Read More

Run React Globally

 If you have problems running create-react-app in text editors but the package is installed globally. So here is the SOLUTION-------------

1. Open PowerShell as an administrator. You can do this by right-clicking on the Windows Start button and selecting "Windows PowerShell (Admin)".

2. In the PowerShell window, run the following command to check the current execution policy:

   powershell
   Get-ExecutionPolicy
   

3. The output will be one of the following:

   • Restricted: This means that script execution is disabled. You need to change it to a more permissive policy.
   • AllSigned or RemoteSigned: These policies allow script execution but require digitally signed scripts. If you encounter this, you can skip changing the execution policy and try using the npx create-react-app command instead of create-react-app.

4. To change the execution policy to allow script execution, run the following command:

   powershell
   Set-ExecutionPolicy Unrestricted
   

5. You will be prompted to confirm the change. Type Y and press Enter.

6. After changing the execution policy, you should be able to use the create-react-app command without encountering the "running scripts is disabled" error.

7. Once you've finished using create-react-app, it's recommended to set the execution policy back to a more secure value. Run the following command:

   powershell
   Set-ExecutionPolicy Restricted
   

By following these steps, you should be able to resolve the script execution error and use create-react-app globally in any text editor.

Read More

Logical Shifting COA

 

SHR stands for "Shift Right" and it is used to shift the bits in a register or memory location to the right. When a number is shifted to the right using SHR, the least significant bit (LSB) is replaced by a zero, and the most significant bit (MSB) is shifted out and lost. The other bits are shifted to the right by the specified number of positions. For example, the instruction "SHR AL, 1" will shift the bits in the AL register to the right by 1 position. SAR stands for "Shift Arithmetic Right" and it is used to shift the bits in a register or memory location to the right while preserving the sign bit. When a number is shifted to the right using SAR, the least significant bit (LSB) is replaced by a zero, and the most significant bit (MSB) is shifted out and lost. However, unlike SHR, SAR preserves the sign bit by shifting it into the vacated MSB position. This ensures that the sign of the number is preserved after the shift. For example, the instruction "SAR BL, 1" will shift the bits in the BL register to the right by 1 position while preserving the sign bit.

SHL stands for "Shift Left" and it is used to shift the bits in a register or memory location to the left. When a number is shifted to the left using SHL, the most significant bit (MSB) is replaced by a zero, and the least significant bit (LSB) is shifted out and lost. The other bits are shifted to the left by the specified number of positions. For example, the instruction "SHL AX, 1" will shift the bits in the AX register to the left by 1 position. SAL stands for "Shift Arithmetic Left" and it is also used to shift the bits in a register or memory location to the left. The operation performed by SAL is identical to SHL, and both instructions can be used interchangeably. The only difference is that the Intel documentation recommends using SAL when performing arithmetic shifts, to emphasize that the sign bit is shifted along with the other bits. IN summary, the main difference between SHL and SAL is that SHL performs a logical shift, while SAL performs an arithmetic shift. However, in practice, the two instructions are identical and can be used interchangeably for left shifts.

ROL: The ROL instruction performs a left rotation of the bits in a register or memory location. Each bit is shifted one position to the left, with the carry flag being shifted into the least significant bit (LSB) and the most significant bit (MSB) being shifted into the carry flag. This effectively shifts all bits one position to the left, including the carry flag. For example, the instruction "ROL AL, 1" will rotate the bits in the AL register one position to the left.• ROR: The ROR instruction performs a right rotation of the bits in a register or memory location. Each bit is shifted one position to the right, with the carry flag being shifted into the most significant bit (MSB) and the least significant bit (LSB) being shifted into the carry flag. This effectively shifts all bits one position to the right, including the carry flag. For example, the instruction "ROR BH, 1" will rotate the bits in the BH register one position to the right. Both ROL and ROR are circular shifts, which means that the shifted bits are rotated around to the opposite end of the register or memory location. The carry flag plays a key role in this operation, as it is shifted into the least significant bit (LSB) during a left rotation and into the most significant bit (MSB) during a right rotation.

Read More