Angular in Marathi | Learn and prepare for Angular interviews in Marathi 2024 | Top and easy to understand interview questions for Angular (Part – 1)

In this blog Learn Angular in Marathi, You can prepare for Angular interviews in Marathi. better understand in Marathi then you can translate it in English.

1) What is Angular? How does it differ from AngularJS? (Learn Angular in Marathi)

Angular हे वेब ऍप्लिकेशन डेव्हलप करण्यासाठी TypeScript किंवा JavaScript वापरून तयार केलेले फ्रेमवर्क आहे. Angular फ्रेमवर्क हे गुगल मार्फत मेन्टेन केले जाते. Angular हे component ह्या कन्सेप्ट वर आधारीत आहे, इथे Component म्हणजे आपण डेव्हलप करत असलेल्या ऍप्लिकेशनचा एक मुलभुत पाया (Basic Building block of Application) आहे. Component चा आत आपल्याला HTML, CSS आणि ऍप्लिकेशनसाठी लागणारे logic लिहता येते.

Angular Framework मध्ये आपल्याला modules, Services, Directives वापरून आपण कोडची होणारी पुनरावृत्ती कमी करून आपले ऍप्लिकेशन lightweight आणि फास्ट तयार करू शकतो. Angular चा वापर करून आपण Single Page Application (SPA) बनवू शकतो म्हणजेच ज्यावेळेस तुम्ही वेब पेज वर एखादी ऍक्टिव्हिटी करता त्यावेळेस संपूर्ण पेज reload होत नाही, फक्त जो view तुम्हाला हवा आहे फक्त तेवढा view update होतो.

AngularJS हे Angular चे अगोदरचे version आहे. ते देखील गुगल मार्फत डेव्हलप करण्यात आले परंतु त्याचे architecture हे Angular पेक्षा वेगळे आहे. ज्यावेळेस एखादे मोठे ऍप्लिकेशन आपण डेव्हलप करतो त्यावेळेस AngularJS मधील काही कमींमुळे जसे कि AngularJS हे two-way data binding वर अवलंबून आहे त्यामुळे मोठ्या ऍप्लिकेशन मध्ये जशी Complexity वाढते त्यानंतर ऍप्लिकेशनचा परफॉर्मन्स इश्यु सुरु होत असे, त्यामुळे हळूहळू AngularJS चा वापर कमी होऊन Angular हे Framework तयार करण्यात आले.

Angular मध्ये Data flow हा unidirectional आहे , म्हणजेच डेटा फ्लो हा एकाच Direction ने असल्यामुळे तो समजण्यास आणि debug करण्यास सोपे आहे. Angular सोबत Dependency injection, routing इतर काही नवीन फिचर आलेत ज्यामुळे ऍप्लिकेशनचा performance आणि scalability वाढली आहे.

2) Explain Angular modules and their purpose.

Angular Framework मध्ये Modules म्हणजे जे ऍप्लिकेशन आपण डेव्हलप करत आहोत त्याचे एक प्रकारे
सहज समजण्यायोग्य structure बनवणे होय. ऍप्लिकेशनमध्ये module तयार करणे म्हणजे एक प्रकारे डेव्हलपमेंट साठी good practice मानली जाते, ज्यामुळे ऍप्लिकेशन हे develop, test आणि maintain करणे सोपे जाते. Module तयार करण्याचे काही महत्वपूर्ण उद्देश आपण बघूया,

a) Encapsulation: modules बनवून आपण ऍप्लिकेशनच्या functionality ला आपण छोट्या भागांमध्ये त्याची विभागणी करू शकतो, जेणेकरून जर functionality आणि त्याचे लॉजिक जर जास्त मोठे असेल तर आपण ते सहज Manage करू शकतो.

b) Reusability: Modules बनवून आपण काही ठराविक गोष्टींची होणारी पुनरावृत्ती आपण सहज टाळू शकतो जसे कि आपण Directives, pipes आणि services आपल्या module साठी बनवु शकतो आणि हे module आपल्याला गरजेनुसार ऍप्लिकेशनच्या इतर भागांमध्ये import करता येते.

c) Dependency Management: मॉड्युल्स चा वापर करून आपल्याला समजते कि कोणते components, directives, pipes, आणि services कोणत्या module साठी उपलब्ध आहे. ह्यामुळे components, directives, pipes, and services हे manage करायला सोपे जाते आणि त्यांच्या नावामुळे होणार गोंधळ कमी होतो.

d) Lazy Loading: Angular हे Lazy Loading ह्या फिचरला सपोर्ट करते, लेझी लोडींग म्हणजे module हे ज्यावेळेस गरज आहे त्या वेळेसच ते लोड केले जाते. ह्यामुळे सुरवातीला ऍप्लिकेशनचा लोडींग टाइम कमी होतो व ऍप्लिकेशनचा परफॉर्मन्स चांगला राहतो.

3) What are components in Angular? How are they structured?

Angular मध्ये Component ला कोणत्याही angular ऍप्लिकेशनचे “Basic building block” म्हणून ओळखले जाते. Component म्हणजे डेटा, लॉजिक आणि वेब पेज किंवा UI चा view ह्या सर्व गोष्टींचा समूह होय.
प्रत्येक Component मध्ये खालील ३ मुख्य पार्टस असतात:

a) Template: Template म्हणजे Html markup आहे ज्यामुळे component मधील UI डिझाईन करता येतो. ह्या मध्ये Data Binding आणि Directives चा वापर करून component सोबत interaction करून component चे behavior आणि data manipulate करता येतो.

b) Class: Component मध्ये Class म्हणजे TypeScript कोड असतो, ज्याद्वारे आपण component behavior हाताळण्यासाठी आपण कोड लिहू शकतो.

c) Metadata: component मधील मेटाडेटा म्हणजे कॉम्पोनन्ट बद्दल अतिरिक्त असलेली माहित असते. Metadata हे decorators वापरून define केले जाते for example: @Component. इथे @Component डेकोरेटरच्या आत selector, template URL or inline template, styles हे आपण define करू शकतो.

Here’s a basic example of how a component is structured in Angular:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  // Properties
  title: string = 'Hello, Spider Man!';

  // Methods
  greet() {
    alert('Hello Peter Parker!');
  }
}

4) What is data binding in Angular? Explain one-way and two-way data binding.

Angular मध्ये data binding हे एक खूप महत्वपूर्ण feature आहे ज्यामुळे आपण UI आणि ऍप्लिकेशनचे data model कनेक्ट करू शकतो. data binding चा वापर करून आपन TypeScript class ज्यामध्ये business logic आणि data हे HTML view सोबत कनेक्ट करता येतो.

१. One-way data binding: One-way data binding ह्या प्रकारातील डेटा बाइंडिंग मध्ये data त्या component चा जो class आहे तिथून ते त्या component च्या HTML view साठी flow करतो.

२)Two-way data binding: डेटा हा component मध्ये class ते HTML view तसेच HTML view ते class ह्या दोन्ही direction मध्ये flow करतो.

Example:

// Component class
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <h2>One-way Data Binding</h2>
    <p>{{ message }}</p>
    
    <h2>Two-way Data Binding</h2>
    <input type="text" [(ngModel)]="name">
    <p>Hello, {{ name }}</p>
  `
})
export class ExampleComponent {
  message = 'Welcome to www.lastminutelearnings.com';
  name = '';
}

5) How to improve angular applications performance

Angular ऍप्लिकेशनचा परफॉर्मन्स वाढवण्यासाठी खालील काही ठळक मुद्दे लक्षात घेतले पाहिजे:
1) Lazy Loading: आपण Lazy Loading हे फिचर वापरून ज्यावेळेस आपल्या ऍप्लिकेशनला module किंवा component ची गरज असेल तेव्हाच ते लोड करून ऍप्लिकेशनचा सुरवातीचा loading time कमी करू शकतो.

2) Minify and Bundle: आपला कोड Minify and Bundle हि technique वापरून आपण फाईल साईझ कमी करू शकतो ज्यामुळे loading time कमी होईल.

3) AOT Compilation: Ahead-of-Time (AOT) ह्या प्रकारचे Compilation जर आपण follow केले तर ऍप्लिकेशन मधील template हे build time compile होतात त्यामुळे browser मधील जो result (Output) आहे तो फास्ट render होतो.

4) Tree Shaking: ज्यावेळेस आपण आपले ऍप्लिकेशनची build process करतो त्यावेळेस unused code काढून टाकून आपण bundle size कमी करू शकतो.

5) Optimize Images: ऍप्लिकेशन मध्ये आपण ज्या इमेज वापरतो त्यांची size जर आपण Compress किंवा optimize
केली तर ऍप्लिकेशनच्या loading time मध्ये सुधारणा होते.

6) Change Detection Strategy: OnPush change detection ह्या पद्धतीचा वापर जर आपण change detection साठी केला तर आपण गरज नसलेल्या change detection activity कमी करू शकतो

7) Reduce HTTP Requests: आपण HTTP request combine करून http request कमी करू शकतो ज्यामुळे ऍप्लिकेशनचा स्पीड कमी होणार नाही

8) Lazy Load Images: ऍप्लिकेशनमध्ये इमेजेस आपण lazily load करून initial load time कमी करू शकतो