Angular Fundamentals Lecture

परिचय

• प्रस्तुतकर्ता: Angular में 10 साल का अनुभव
• उद्देश्य: 2 घंटे में Angular के मूलभूत सिद्धांत सीखें
• दृष्टिकोण: शुरुआती लोगों के लिए चरण-दर-चरण ट्यूटोरियल

शिक्षण योजना

• 10 भागों में विभाजित
  1. Angular की परिभाषा
  2. स्थापना
  3. TypeScript बेसिक्स
  4. Angular प्रोजेक्ट बनाना
  5. Angular फाइल संरचना
  6. Angular के मूलभूत सिद्धांत (डेकोरेटर, कंपोनेंट्स, मॉड्यूल्स, निर्देश)
  7. Angular फ्लो का परिचय
  8. बाइंडिंग, एक्सप्रेशंस, और इंटरपोलेशन
  9. एक सरल प्रोजेक्ट बनाना
  10. सारांश और अगले कदम

स्थापना चरण

1. Visual Studio Code स्थापित करें: आधिकारिक साइट से डाउनलोड करें, एडमिन के रूप में चलाएं।
2. Node.js स्थापित करें: nodejs.org से अनुशंसित संस्करण डाउनलोड करें।
3. स्थापनाओं की जाँच करें: टर्मिनल में node और npm वर्शन सत्यापित करें।
4. Angular CLI स्थापित करें: npm install -g @angular/cli
5. Angular प्रोजेक्ट बनाएं: ng new project-name
6. Angular प्रोजेक्ट चलाएं: प्रोजेक्ट फोल्डर में नेविगेट करें और ng serve का उपयोग करें

Angular के बेसिक्स

Angular क्या है?

• परिभाषा: स्केलेबल वेब ऐप्स बनाने के लिए एक डेवलपमेंट प्लेटफार्म, मुख्य रूप से UI पर केंद्रित।
• निर्माता: Google
• आधारित है: TypeScript पर
• मुख्य भाग:
  1. संरचित फ्रेमवर्क (कंपोनेंट-आधारित)
  2. पुस्तकालय (राउटिंग, फॉर्म्स, HTTP, आदि)
  3. डेवलपर टूल्स (बिल्ड, टेस्ट)
• फोकस: UI विकास

Angular फाइल संरचना

• कॉन्फ़िगरेशन फाइलें:
  • package.json: NPM डिपेंडेंसीज
  • tsconfig.json: TypeScript कॉन्फ़िगरेशन
  • angular.json: Angular संबंधित कॉन्फ़िगरेशन
• सोर्स कोड: src फोल्डर में स्थित, विशेष रूप से app फोल्डर

कंपोनेंट्स

• परिभाषा: पुन: प्रयोज्य UI लॉजिक जिसे HTML के अंदर लोड किया जा सकता है
• कंपोनेंट संरचना:
  • UI: HTML टेम्पलेट
  • लॉजिक: TypeScript क्लास
• उदाहरण:

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    // लॉजिक यहां
  }
  

• टेम्पलेट्स: Angular HTML के लिए शब्द
• निर्देश: Angular सिंटैक्स HTML में, HTML तत्वों के व्यवहार को बदलता है
• सिलेक्टर: HTML में कंपोनेंट लोड करने के लिए उपयोग किया जाता है (जैसे, <app-root></app-root>)

मॉड्यूल्स

• परिभाषा: लॉजिकली कंपोनेंट्स को समूहित करता है
• उदाहरण:

  @NgModule({
    declarations: [AppComponent],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  

बाइंडिंग और निर्देश

डेटा बाइंडिंग

• दो-तरफ़ा बाइंडिंग: इनपुट एलिमेंट को कंपोनेंट वेरिएबल से बाइंड करें
  • उदाहरण:

    <input [(ngModel)]="someValue">
    

महत्वपूर्ण निर्देश

1. ngModel: फॉर्म्स के लिए दो-तरफ़ा डेटा बाइंडिंग
2. ngFor: स्ट्रक्चरल निर्देश लूप्स बनाने के लिए
3. क्लिक: इवेंट बाइंडिंग

व्यावहारिक कदम

फ़ंक्शनल कंपोनेंट बनाना

1. एक सरल फॉर्म बनाएं

• इनपुट, बटन, डिस्प्ले टेबल

2. डेटा बाइंड और डिस्प्ले करने के लिए लॉजिक लिखें
3. उदाहरण:

<input [(ngModel)]="someValue">
<button (click)="addValue()">Add</button>
<table>
  <tr *ngFor="let val of values"><td>{{ val }}</td></tr>
</table>

export class AppComponent {
  someValue: string;
  values: string[] = [];
  addValue() {
    this.values.push(this.someValue);
    this.someValue = '';
  }
}

सारांश

• कवर किए गए Angular के मूलभूत सिद्धांत:
  1. स्थापना
  2. बेसिक कॉन्सेप्ट्स (कंपोनेंट्स, मॉड्यूल्स, निर्देश)
  3. डेटा बाइंडिंग और निर्देश
• अगले कदम: questpond.com पर उपलब्ध उन्नत विषय
• एंगेजमेंट: रेट, शेयर, और सोशल मीडिया पर इंटरैक्ट करें ताकि आपको Angular इंटरव्यू सवालों पर एक मुफ्त ईबुक मिले।

अतिरिक्त संसाधन

• Questpond: उन्नत ट्यूटोरियल और लाइव ट्रेनिंग
• YouTube सब्सक्रिप्शन: अधिक उन्नत पाठों के लिए सब्सक्रिप्शन
• ऑफिस ट्रेनिंग: मुंबई कार्यालय में पर्सनल सत्र के लिए उपलब्ध