1) Explain Angular directives. Provide examples of built-in directives.
Angular Directives हे angular मधील एक महत्वाचे फिचर आहे ज्यामुळे आपण DOM (Document Object Module) हे manipulate करू शकतो. Angular Directives हे थोडक्यात DOM elements साठी instruction म्हणून काम करते. Directives चा वापर करून आपण Html template मध्ये element add किंवा remove करू शकतो, तसेच आपण element चे behavior change करू शकतो. Directives हे Angular ऍप्लिकेशनचा एक महत्वपूर्ण भाग आहे ज्याचा वापर करून आपण reusable component तयार करू शकतो आणि HTML template हे modify/update करू शकतो.
1. Component Directives: Component Directives हे एक कॉमन directive चा टाईप आहे, ज्याचा वापर करून आपण reusable component बनवू शकतो.
2. Structural Directives: आपल्याला DOM layout मध्ये ज्यावेळेस element add किंवा remove करायचा असतो त्यावेळेस आपण Structural Directives चा वापर करतो. आपण Structural Directives वापरून DOM चे structure update करू शकतो.
Example: ngIf, ngFor, and ngSwitch
<div *ngIf="isLoggedIn">
Welcome, {{ username }}!
</div>3. Attribute Directives: ज्यावेळेस आपल्याला DOM element ची property modify करायची असते त्यावेळेस आपण Attribute Directives चा वापर करतो. Attribute Directives चा वापर करून आपण element चा appearance किंवा behavior बदलू शकतो.
Example: ngStyle, ngClass, and ngModel.
<div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }">
Click me
</div>
2) What are structural directives in Angular? Give examples
Angular मध्ये structural directives प्रकारची directive वापरून आपण DOM element add, remove किंवा update हव्या असणाऱ्या condition नुसार करू शकतो. ह्या प्रकारच्या directive ला structural directive म्हणतात कारण ह्यामध्ये आपण DOM चे structure बदलु शकतो.
Example: ngIf, ngFor, and ngSwitch
<div *ngIf="isLoggedIn">
Welcome, {{ username }}!
</div>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
<div [ngSwitch]="color">
<p *ngSwitchCase="'red'">Red color is selected</p>
<p *ngSwitchCase="'blue'">Blue color is selected</p>
<p *ngSwitchDefault>Another color is selected</p>
</div>3) What are services in Angular? Why are they used?
Angular मधील सर्व्हिस म्हणजे reusable code block ज्यामुळे आपण common functionality provide करू शकतो. services मुळे code reusability, dependency injection आणि code management साठी best practice ह्या गोष्टी सहज शक्य होतात ज्यामुळे angular ऍप्लिकेशन अधिक maintainable होते.
4) How do you create and consume services in Angular?
आपण service कशी create करायची आणि ती अप्लिकेशनमध्ये वापरायची कशी हे बघूया:
Creating a Service:
1) Generate a Service: angular CLI चा वापर करून आपण service create करू शकतो. service create करण्यासाठी CLI मध्ये ” ng generate service service-name ” हि command run करा.
2) Injectable Decorator: service file मध्ये @Injectable() decorator असेल. हा decorator Angular ला सांगतो कि ह्या class ला own dependencies असू शकतात ज्या आपल्याला inject कराव्या लागू शकतात.
3)Implement Service Logic: service file मध्ये आता आपण class च्या आत आपले logic लिहू शकतो जसे कि तुम्हाला HTTP requests करायची असेल किंवा काही calculation करायची असतील तर त्या related कोड तुम्ही येथे लिहू शकता.
Consuming a Service:
1)Inject the Service: component मध्ये service वापरण्यासाठी तुम्हाला ती अगोदर component मध्ये Inject करावी लागेल. तुम्ही service ला constructor मध्ये parameter म्हणून add करून व ती service import करून component मध्ये वापरू शकता.
2) Access Service Methods or Properties: एकदा तुम्ही service हि component मध्ये inject केली की तुम्ही त्या service मधील method आणि properties तुम्ही त्या service चा instance वापरून component मध्ये वापरू शकता.
Example:
Service (data.service.ts):
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root' // Provided in root ensures that Angular creates a single, shared instance of the service
})
export class DataService {
constructor() { }
getData(): string {
return "Data from the service";
}
}Component (app.component.ts):
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private dataService: DataService) { }
dataFromService: string;
ngOnInit() {
this.dataFromService = this.dataService.getData();
}
}Component Template (app.component.html):
<p>Data from the service: {{ dataFromService }}</p>5) What is dependency injection (DI) in Angular? Why is it important?
Angular मध्ये Dependency Injection (DI) हा design pattern आहे ज्याला follow करून आपण component साठी हव्या असणाऱ्या dependecies ह्या create किंवा manage करू शकतो. अजून सोप्या भाषेत जर समजून घेतलं तर component मधील class ला हवे असणारे object किंवा service ह्या त्या class मध्ये create करण्यापेक्षा external source मार्फत pass करणे होय.
आता Dependency Injection (DI) हे angular मध्ये महत्वाचे का आहे बघूया:
1) Modularity and Reusability: DI हे आपल्याला मोठे ऍप्लिकेशन हे छोट्या आणि reusable component मध्ये break करण्यास मदत करते. ज्यावेळेस आपण ऍप्लिकेशन modules मध्ये ब्रेक करतो तेव्हा DI मुळे त्या modules च्या dependencies चे structure सहज समजते.
2) Decoupling: जेव्हा आपण प्रत्येक वेळेस dependency हि create करण्याऐवजी ती आपण एकदा create करून component मध्ये inject करतो त्यावेळेस आपण component मध्ये होणारी coupling हि कमी करतो. त्यामुळे आपला codebase हा maintain आणि refactor करण्यास सोपा होतो.
3) Scalability: आपले Angular ऍप्लिकेशन जसजसे grow करते त्यावेळेस ऍप्लिकेशनची complexity manage करायला व dependencies ला organize करायला DI ची मदत होते.
6) Explain Angular routing and its significance in single-page applications (SPAs) (routing in angular).
Angular मध्ये routing mechanism हे Angular framework ने single-page application (SPA) मधील navigation handle करण्यासाठी provide केले आहे. SPA मध्ये संपूर्ण ऍप्लिकेशन हे एका single HTML पेज मध्ये contained असते आणि वेगवेगळ्या views किंवा pages ला navigation हे TypeScript किंवा angular कोणतेही page reload न करता हॅन्डल करते. routing म्हणजे थोडक्यात navigation किंवा एका view वरून दुसऱ्या view ला जाणे.
let’s discuss the significance of Angular routing in SPAs:
1) Enhanced User Experience: routing मुळे SPA आपल्याला fast आणि responsive असा user experience देते. ऍप्लिकेशन user routing मुळे एका view वरून दुसऱ्या view ला page reload न करता जाऊ शकते.
2) State Preservation: Angular routing SPA ला वेगवेगळ्या pages ला application चे state preserve करायला परवानगी देते, म्हणजेच user चे input तसेच scrolling position आणि इतर गरजेचे state आपण user ऍप्लिकेशनमध्ये navigate करत असतानी maintain करू शकतो.
7) How do you configure routing in Angular? Provide an example.
Angular मध्ये routing आपल्याला वेगवेगळ्या component किंवा views ला navigate करण्यास परवानगी देते.
आपण routing angular ऍप्लिकेशन मध्ये कसे configure केले जाते ते बघूया,
1) सर्वप्रथम आपल्याला app-routing.module.ts ह्या file मध्ये routes set up करावे लागतात.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
// Add more routes here as needed
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
2) त्यानंतर आपण जे route create केले आहेत त्यांच्यासाठी component create करा.
for example: home.component.ts, about.component.ts, and contact.component.ts
3) route साठी बनवलेल्या component मध्ये तुमचे logic किंवा तुम्हाला हवा तो content add करा
4)तुमच्या app.module.ts फाइलमध्ये, AppRoutingModule इम्पोर्ट करा आणि ते ‘imports’ array मध्ये add करा.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
ContactComponent
],
imports: [
BrowserModule,
AppRoutingModule // Import the AppRoutingModule here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
वरील संपूर्ण setup झाला कि ऍप्लिकेशन run केल्यानंतर तुम्ही ज्यावेळेस ‘/ ‘ हा path browser मध्ये टाकाल त्यावेळेस navigation हे ‘HomeComponent‘ ला होईल आणि ज्यावेळेस path हा ‘/about’ असेल त्यावेळेस navigation हे ‘AboutComponent‘ ला होईल.
