Angular, React, JS

Tuesday, March 28, 2023 12:24 AM

1. Angular vs React
Angular:
○ A full-fledged framework for building web applications developed by Google.
○ Provides a comprehensive solution out-of-the-box, including tools for routing, state management, and form handling.
○ Best for large, complex apps with a need for built-in features and a structured framework.
React:
○ A library for building user interfaces developed by Facebook.
○ Focuses on building UI components and managing the view layer with a declarative approach.
○ Best for dynamic, interactive user interfaces with flexibility and a component-based architecture.

2. Node JS and Express JS

Node.js
- Purpose: A runtime environment for executing JavaScript on the server.
- Uses:
- Server-side scripting.
- Building server-side applications (web servers, APIs).
- Handling asynchronous operations efficiently.
- Managing packages with npm (Node Package Manager).

Express.js
- Purpose: A web application framework for Node.js.
- Uses:
- Simplifying routing for HTTP methods and URLs.
- Managing middleware for tasks like logging, authentication, and request parsing.
- Providing HTTP utility methods for responses and headers.
- Integrating with template engines for dynamic HTML generation.

How They Work Together

- Node.js: Provides the foundation for running JavaScript on the server.
- Express.js: Builds on Node.js to offer a structured framework, making it easier to develop web applications with features
like routing and middleware.

Summary
- Node.js: Executes JavaScript on the server, handling core functionalities.
- Express.js: Simplifies Node.js development by providing structure and tools for common web tasks.

3. JS synchronous or asynchronous?
JavaScript can be both synchronous and asynchronous, depending on how the code is written and executed. Here’s how to
explain this concept:

1. Synchronous:
- Definition: In synchronous JavaScript, code is executed line by line, one after another. Each operation must be
completed before the next one begins.
- Example: If you have multiple tasks, each task must wait for the previous one to finish.

```javascript
console.log('Task 1');
console.log('Task 2');
console.log('Task 3');
```
 In this example, "Task 1" will be logged first, then "Task 2", and finally "Task 3".

2. Asynchronous:
- Definition: In asynchronous JavaScript, some operations (like I/O tasks, timers, or fetching data) can be executed in the
background. This allows the main program to continue running without waiting for these operations to complete.
- Example: Asynchronous code is often managed using callbacks, promises, or async/await syntax.

```javascript
console.log('Task 1');

setTimeout(() => {
console.log('Task 2 (Async)');
}, 1000);

console.log('Task 3');
```
In this example, "Task 1" is logged first, then "Task 3". "Task 2 (Async)" is logged last, after a 1-second delay, even though
it appears in the code before "Task 3".

Key Points to Highlight

- Synchronous: Code runs sequentially; each line waits for the previous one to finish.
- Asynchronous: Some operations run in the background, allowing the main code to continue running without waiting.

Practical Use
- Synchronous: Suitable for simple scripts where operations don't depend on external resources or where order of
execution is crucial.
- Asynchronous: Essential for tasks like fetching data from a server, reading/writing files, or other operations that take
time to complete. This improves the efficiency and responsiveness of applications.

- JavaScript is single-threaded, meaning it runs one operation at a time in a single sequence. However, it uses an event
loop to handle asynchronous operations, allowing the code to continue executing while waiting for these operations to
complete.

This explanation helps to convey the basic concepts of synchronous and asynchronous JavaScript simply and clearly.

2. Single thread and Multi-thread

A single-threaded environment means that only one task can be executed at a time. JavaScript, by default, runs in a single-
threaded manner.
A multi-threaded environment means multiple tasks can be executed concurrently by utilizing multiple threads. Languages
like Java, C++, and Python can use multi-threading to perform concurrent operations.

3. Callback Function
Definition: A callback function is a 4. to another function and is executed after some operation has been completed.
Usage: Callbacks are commonly used for handling asynchronous operations, such as reading files, making HTTP requests,
or setting timers.

Example:
```javascript
function fetchData(callback) {
setTimeout(() => {
callback('Data received');
}, 1000);
}
 function handleData(data) {
console.log(data);
}

fetchData(handleData); // "Data received" will be logged after 1 second

```

4. Promise:
Definition: A Promise is an object representing the eventual completion (or failure) of an asynchronous operation and its
resulting value.

Usage: Promises provide a cleaner, more manageable way to handle asynchronous code compared to callbacks, especially
for chaining multiple asynchronous operations.

Example:
```javascript
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data received');
}, 1000);
});
}

fetchData()
.then(data => {
console.log(data); // "Data received" will be logged after 1 second
})
.catch(error => {
console.error(error);
});
```

5. Async/Await

Definition: `async` and `await` are syntactic sugar built on top of Promises, providing a more readable and straightforward
way to write asynchronous code.

Usage: `async` functions implicitly return a Promise, and `await` pauses the execution of the async function until the
Promise is resolved or rejected.

Example:
```javascript
async function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data received');
}, 1000);
});
}

async function handleData() {

const data = await fetchData();
console.log(data); // "Data received" will be logged after 1 second
 }

handleData();
```
5. Different Programming Paradigms:

a. Functional Programming

Definition: Functional programming is a programming paradigm where programs are constructed by applying and
composing functions. It emphasizes the use of pure functions, immutability, and avoiding side effects.

Key Concepts:
- Pure Functions: Functions that always produce the same output for the same input and have no side effects.
- Immutability: Data is not changed; instead, new data structures are created.
- First-Class Functions: Functions are treated as first-class citizens, meaning they can be passed as arguments, returned
from other functions, and assigned to variables.
- Higher-Order Functions: Functions that take other functions as arguments or return them as results.

Example:
```javascript
// Pure function
const add = (a, b) => a + b;

// Higher-order function
const map = (array, func) => array.map(func);

const numbers = [1, 2, 3];

const doubled = map(numbers, num => num * 2);

console.log(doubled); // [2, 4, 6]
```

1. Common interview questions for angular

Basic Question

1. What is Angular
- Angular is a platform and framework for building client-side applications using HTML, CSS, and JavaScript/TypeScript.
It’s developed by Google and follows a component-based architecture.

2. What are the key features of Angular?

- Component-based architecture
- Two-way data binding
- Dependency injection
- Directives
- Services
- RxJS for reactive programming
- Angular CLI for scaffolding and building

3. What is a component in Angular?

- A component is a fundamental building block of an Angular application. It consists of a TypeScript class, an HTML
template, and optional CSS styles. Components control a portion of the UI and define the view and data logic.

4. What is the Angular CLI?

- The Angular CLI is a command-line interface tool that helps in creating, managing, and building Angular applications. It
provides commands for generating components, services, modules, and more.

5. What is a directive in Angular?

- A directive is a class that extends the functionality of elements in your Angular applications.
There are three types of directives:
1. Component Directives: Create components with their own templates.
2. Structural Directives: Alter the DOM structure (e.g., *ngIf, *ngFor).
3. Attribute Directives: Change the appearance or behavior of DOM elements (e.g., ngClass, ngStyle, ngModel).

DOM: Document Object Model

Intermediate Questions

6. What is two-way data binding in Angular?

- Two-way data binding is a mechanism that allows automatic synchronization of data between the model (component)
and the view (template). In Angular, this is typically achieved using the `[(ngModel)]` directive.

7. What is dependency injection in Angular?

- Dependency injection (DI) is a design pattern used to implement IoC (Inversion of Control). It allows a class to receive
dependencies from external sources rather than creating them itself. Angular uses DI to provide services and other
dependencies to components and other classes.

8. What is RxJS and how is it used in Angular?

- RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables. In Angular, RxJS is used
to handle asynchronous operations, such as HTTP requests, event handling, and more.

9. What is the purpose of Angular modules (NgModules)?

- Angular modules (NgModules) are containers for a cohesive block of code dedicated to an application domain,
workflow, or common set of capabilities. Modules help in organizing an application into cohesive blocks of functionality.

10. What is the difference between a service and a component in Angular?

- A component is responsible for controlling a portion of the UI and handling user interactions. A service, on the other
hand, is used to encapsulate and share data or logic across multiple components.

Advanced Questions

11. What is the Angular change detection mechanism?

- Angular's change detection mechanism is responsible for updating the view whenever the application state changes. It
checks for changes in the data and updates the DOM accordingly. Angular uses the zone.js library to detect changes and
trigger the change detection process.

12. How do you handle routing in Angular?

- Angular uses the Angular Router to manage navigation between views or different parts of the application. The
RouterModule is used to configure routes and provide navigation functionality.

13. What is lazy loading in Angular?

- Lazy loading is a technique in Angular that delays the loading of a module until it is needed. This helps in improving the
application's initial load time and overall performance. Lazy loading is typically implemented using the `loadChildren`
property in the route configuration.

14. What are Angular lifecycle hooks?

- Angular lifecycle hooks are methods that provide visibility into key events during a component's lifecycle, such as
initialization, changes, and destruction. Common lifecycle hooks include `ngOnInit`, `ngOnChanges`, `ngOnDestroy`, and
more.
15. What is AOT (Ahead-of-Time) compilation in Angular?
- AOT compilation is a process in Angular that compiles the application and templates during the build time, rather than
at runtime. This leads to faster rendering, smaller bundle sizes, and early detection of template errors.

Practical Questions

16. How do you create a new Angular project using Angular CLI?
- You can create a new Angular project by running `ng new project-name` in the command line.

17. How do you make HTTP requests in Angular?

- HTTP requests in Angular are made using the `HttpClient` service, which is part of the `@angular/common/http`
module. You need to import `HttpClientModule` in your app module and inject `HttpClient` into your services or
components.

18. How do you handle forms in Angular?

- Angular provides two approaches for handling forms: Template-driven forms and Reactive forms. Template-driven
forms use directives and bindings in the template, while Reactive forms use an explicit and immutable approach to
managing form state in the component class.

19. What are Angular pipes and how are they used?
- Pipes are a way to transform data in Angular templates. They are used to format data such as dates, numbers, and
strings. Custom pipes can also be created to handle specific transformation logic.

20. How do you implement authentication and authorization in Angular?

- Authentication can be implemented using services to manage login, logout, and user sessions, often involving JWT
(JSON Web Tokens). Authorization is handled by protecting routes using Angular guards (`CanActivate`, `CanActivateChild`,
`CanLoad`, etc.) to restrict access based on user roles or permissions.

These questions cover a range of topics from basic to advanced, providing a comprehensive overview of the key concepts
and practical skills related to Angular.