रेल के साथ कोणीय का उपयोग करना 5

आपने पहले कहानी सुनी है। आपके पास पहले से ही आपके विकेन्द्रीकृत और पूरी तरह से काम कर रहे बैक-एंड एपीआई और किसी भी सामान्य टूलसेट से बने फ्रंट-एंड पर चलने वाला एक एप्लिकेशन है।

अब, आप कोणीय पर आगे बढ़ना चाहते हैं। या, शायद आप अपनी रेल परियोजनाओं के साथ एंगुलर को एकीकृत करने का एक तरीका ढूंढ रहे हैं क्योंकि आप इस तरह से चीजों को पसंद करते हैं। हम आपको दोष नहीं देते।

इस तरह के दृष्टिकोण के साथ, आप दोनों दुनिया का लाभ उठा सकते हैं और यह तय कर सकते हैं कि आप सामग्री को प्रारूपित करने के लिए रेल या एंगुलर से सुविधाओं का उपयोग करना चाहते हैं, उदाहरण के लिए।

हम क्या बनाएंगे

चिंता करने की कोई जरूरत नहीं है। इस उद्देश्य के लिए यह ट्यूटोरियल लिखा गया था। हम उपयोगकर्ताओं के एक डोमेन पर पूरी तरह से काम कर रहे सीआरयूडी एप्लिकेशन के निर्माण में उतरेंगे।

लेख के अंत में, आपने एंगुलर के बारे में कुछ बुनियादी अवधारणाओं को सीखा होगा और एक रेल बैक-एंड प्रोजेक्ट कैसे सेट किया जाए जो सीधे फ्रंट-एंड के लिए एंगुलर के साथ एकीकृत हो, जैसा कि नीचे दिखाया गया है:

रेल और एंगुलर से बने उपयोगकर्ताओं का CRUD

एप्लिकेशन बाहरी नकली-परीक्षण वेब सेवा से पुनर्प्राप्त उपयोगकर्ताओं के डोमेन पर सभी चार सीआरयूडी संचालन को संभालेगा। ऐप एक एमवीसी आर्किटेक्चर के शीर्ष पर बनाया जाएगा, प्रत्येक कोणीय परत के साथ विस्तार से समझाया गया है ताकि आपको यह समझने में मदद मिल सके कि चीजें एक साथ कैसे जुड़ती हैं। शैली बूटस्ट्रैप तक है।

सेटअप

जैसा कि आपने अनुमान लगाया होगा, हमें निम्नलिखित सॉफ़्टवेयर की आवश्यकता होगी:

• रूबी (मैंने 2.7.0 पूर्वावलोकन1 संस्करण चुना है),
• रूबी और रेल (मैं इसके संस्करण 5.0.7.2 का उपयोग कर रहा हूं),
• Node.js (मैं v13.7.0 के साथ जा रहा हूं),
• यार्न (कम से कम इसका संस्करण 1.22.4)

सब कुछ ठीक से स्थापित करना सुनिश्चित करें। फिर, हम परियोजना पर आगे बढ़ सकते हैं। अपनी पसंद का फ़ोल्डर चुनें और निम्न कमांड चलाएँ:

rails new crud-rails-angular

सेटअप के पूरा होने तक प्रतीक्षा करें और प्रोजेक्ट को अपने पसंदीदा IDE में खोलें। हम इस लेख के लिए वीएस कोड के साथ काम करने जा रहे हैं क्योंकि यह सरल, शक्तिशाली और सुचारू रूप से रेल और कोणीय सिंटैक्स दोनों को गले लगाता है।

यदि आप कुछ समय से Rails 5 का उपयोग कर रहे हैं, तो आपने देखा होगा कि इसका new कमांड Gemfile . के भीतर एक बग उत्पन्न करता है SQLite कॉन्फ़िगरेशन के लिए। यह न्यूनतम संस्करण के बिना आता है, और यह इसे त्रुटियों के साथ चलाएगा। आइए इस समस्या को

gem 'sqlite3', '~> 1.3.10'

बिल्कुल सही!

वेबपैकर सेटअप

रेल में जावास्क्रिप्ट जैसे अनुप्रयोगों को प्रबंधित करने का सबसे अच्छा तरीका वेबपैकर है। यह सुविधाओं को प्रदान करने के लिए पर्दे के पीछे वेबपैक का उपयोग करता है, जैसे कि पूर्व-प्रसंस्करण और मौजूदा रेल एप्लिकेशन में एंगुलर जैसे जावास्क्रिप्ट ऐप्स को बंडल करना।

इसे स्थापित करने के लिए, बस अपने Gemfile . में एक नई लाइन जोड़ें :

gem 'webpacker', '~> 4.3.x'

यह आश्वस्त करेगा कि आप एक बहुत ही हालिया संस्करण स्थापित करेंगे। इसके बाद, निम्न कमांड चलाएँ:

bundle install
bundle exec rake webpacker:install
bundle exec rake webpacker:install:angular

पहला कमांड अतिरिक्त रेल निर्भरता को डाउनलोड और अपडेट करेगा।

दूसरा npm install . के बराबर है चूंकि यह नोड_मॉड्यूल . बनाता है फ़ोल्डर और आवश्यक कोणीय निर्भरताओं का एक समूह स्थापित करता है, जैसे कि बैबेल, सैस, ब्राउजरलिस्ट और वेबपैक। अब, हमारे पास एक ही प्रोजेक्ट में एक नोड और एक रेल ऐप दोनों हैं।

नवीनतम कमांड में, हमारे पास npm install angular . के बराबर है , जो सभी कोणीय-आवश्यक निर्भरताओं को डाउनलोड करेगा और इसे हमारे रेल प्रोजेक्ट के साथ काम करेगा।

इन आदेशों के अंत में, आप package.json . भी देख सकते हैं फ़ाइल बनाई गई। हमारी सभी आवश्यक निर्भरताएं वहां रखी गई हैं, और आप भविष्य में जो चाहें जोड़ सकते हैं।

साथ ही, /app . के अंतर्गत कुछ फ़ोल्डर और फ़ाइलें बनाई गईं फ़ोल्डर, जैसे कि नया /जावास्क्रिप्ट . इस फ़ोल्डर में, आपके पास पहले से एक /hello_angular है आपके विकास की शुरुआत का समर्थन करने के लिए बनाया गया फ़ोल्डर।

कुछ समय प्राप्त करने के लिए, मैं आपसे अपने फ़ोल्डर्स और फ़ाइलों की संरचना को निम्नलिखित के साथ मिरर करने के लिए कहूँगा:

कुछ कोणीय समायोजन

वेबपैकर आपके जेनरेट किए गए रेल प्रोजेक्ट के भीतर समायोजन की एक श्रृंखला की अनुशंसा करता है। तो चलिए कुछ समय घर को व्यवस्थित करने के लिए लेते हैं।

सबसे पहले, अपना application.js खोलें फ़ाइल /packs . के अंतर्गत रखी गई है फ़ोल्डर (ऊपर चित्र में दिखाया गया है) और निम्नलिखित कोड जोड़ें:

import "core-js/stable";
import "regenerator-runtime/runtime";

ये आयात रेल परियोजना के भीतर जावास्क्रिप्ट वातावरण को स्थिर करने के लिए सहायक बल के रूप में काम करते हैं।

अब, हमें रेल को यह सूचित करने की आवश्यकता है कि उसे अपने पृष्ठों पर आउटपुट कहां से चुनना है। एक बार जब वेबपैकर चीजों को पैक करना समाप्त कर लेता है, तो यह वितरण योग्य स्थिर फाइलों का एक समूह उत्पन्न करेगा, जिसके बारे में रेल को पता होना चाहिए।

application.html.erb . पर जाएं एप्लिकेशन/दृश्य/लेआउट . के अंतर्गत फ़ाइल फ़ोल्डर और उसका <head> बदलें निम्नलिखित को सामग्री टैग करें:

<head>
  <title>CrudRailsAngular</title>
  <base href="/" />
  <!-- 1 -->
  <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
  <!-- 2 -->
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application' %>
  <!-- 3 -->
</head>

आइए इसे थोड़ा सा तोड़ें:

1. यहां, हम base जोड़ रहे हैं टैग, जो रेल को बताता है कि एप्लिकेशन के शुरू होने पर कहां देखना है।
2. पृष्ठ की शैली का अनुमान लगाने के लिए हम बूटस्ट्रैप का उपयोग करेंगे, ताकि हम केवल कार्यान्वयन पर ध्यान केंद्रित कर सकें।
3. यहां वह जगह है जहां आपको वेबपैकर टैग रखना होगा जो कि /packs पर मैप करता है फ़ोल्डर सामग्री (वही जो प्रत्येक संकलन के बाद वेबपैकर द्वारा स्वतः उत्पन्न की जाएगी)।

मॉडल और डेटाबेस

डेटाबेस सेटअप पर आगे बढ़ें। चीजों को तेज करने के लिए, हम User . नामक एक नया मॉडल तैयार करेंगे . यह वह आदेश है जिसे प्राप्त करने के लिए आपको इसे चलाना होगा:

rails g scaffold User name:string age:integer address:text && rake db:migrate

यह हमारे मॉडल के सभी फोल्डर और फाइलें बनाएगा, जिनकी हमें रेल को डेटाबेस जानकारी (SQLite से) में हेरफेर करने और इसे हमारे CRUD संचालन में संग्रहीत करने की आवश्यकता होगी।

फिर, आप देखेंगे कि एक नई फ़ाइल XXX1_create_users.rb db/migrate/ . के तहत बनाया गया था फ़ोल्डर। इसे खोलें, और आप नव निर्मित CreateUsers . देखेंगे रिकॉर्ड।

ऐप्लिकेशन/मॉडल/ . के अंदर फ़ोल्डर, आप तत्कालीन बनाए गए User . देखेंगे user.rb . पर मॉडल फ़ाइल।

अब, db/seeds.rb खोलें फ़ाइल करें और निम्न कोड जोड़ें:

User.create(name: 'Luke Wan', age: 23, address: '123 Test St.')
User.create(name: 'Mary Poppins', age: 41, address: '123 ABC St.')
User.create(name: 'John Neilman', age: 76, address: '000 Test St.')

यह कोड हमारे Users . को इनिशियलाइज़ करेगा स्टार्टअप पर कुछ डेटा के साथ तालिका। इसे सेव करें, और कमांड चलाएँ:

rake db:seed

यह ऊपर सूचीबद्ध आदेशों के माध्यम से तालिका को सीड करेगा। इसके बाद, आप SQLite डेटाबेस में प्रवेश कर सकते हैं और जांच सकते हैं कि क्या यह कमांड जारी करके काम करता है:

sqlite3 db/development.sqlite3

फिर, तालिका डेटा चुनें:

select * from users;

और आप परिणाम देख सकते हैं।

उपयोगकर्ता घटक

HTML और CSS को हमारे रेल पृष्ठों में बदलने में मदद करने के लिए आपको कुछ और निर्भरताएँ स्थापित करनी होंगी; कोणीय राउटर जोड़ें, libs और ngx-बूटस्ट्रैप बनाएं, जिसका उपयोग हम बूटस्ट्रैप घटकों के निर्माण और हेरफेर को सुविधाजनक बनाने के लिए करेंगे। तो, निम्न आदेश जारी करें:

yarn add @angular/router @angular/forms html-loader css-loader ngx-bootstrap

हालांकि, इससे पहले कि हम घटक कोड में कूदें, कुछ महत्वपूर्ण अवधारणाएं हैं जिन्हें हमें इंगित करने की आवश्यकता है, जो एक कोणीय घटक की शारीरिक रचना से शुरू होती है।

एक घटक क्या है?

एंगुलर में, आपके विचारों को टाइपस्क्रिप्ट में बनाए गए एप्लिकेशन लॉजिक से जोड़ने के लिए एक घटक मौजूद है।

दूसरे शब्दों में, एक घटक सभी तर्कों के लिए एक कंटेनर की तरह होता है जिसे आपके विचारों को इसके कामकाज का समर्थन करने की आवश्यकता होती है। यह उन मानों को परिभाषित करता है जो दृश्य प्रस्तुत करेंगे और उनके प्रवाह को नियंत्रित करते हैं। यह समान ढांचे में एक 'नियंत्रक' के बराबर है।

एक घटक बनाने के लिए, आपको बस एक नया वर्ग परिभाषित करना है, OnInit . को लागू करना है इंटरफ़ेस, और कक्षा को @Component . के साथ एनोटेट करें डेकोरेटर:

export class UserIndexComponent implements OnInit {
    constructor() { ... }

    ngOnInit() { ... }
}

@Component और OnInit

@Component डेकोरेटर महत्वपूर्ण है क्योंकि यह इस वर्ग को एक पहचानने योग्य कोणीय घटक के रूप में चिह्नित करता है और मेटाडेटा कॉन्फ़िगरेशन प्रदान करता है जो एंगुलर को रनटाइम के दौरान प्रसंस्करण, तात्कालिकता और उपयोग के संबंध में उनके साथ सौदा करने में मदद करता है।

निम्नलिखित मेटाडेटा कॉन्फ़िगरेशन लें:

@Component({
    selector: "users",
    template: templateString,
})

यहां, selector एंगुलर को बताता है कि प्रदान किया गया मान सीएसएस चयनकर्ता है जिसका उपयोग वह वर्तमान निर्देश को एक टेम्पलेट में पहचानने के लिए कर सकता है; हाँ, यह वही टेम्पलेट है जो अगले मेटाडेटा गुण में प्रदान किया गया है।

OnInit इंटरफ़ेस, हालांकि, वैकल्पिक है, और घटक के जीवनचक्र को समाप्त करने से पहले सामग्री को प्रारंभ करने का यह एक अच्छा तरीका है। यह पोस्ट-कंस्ट्रक्शन विधि की तरह काम करता है।

निर्भरता इंजेक्शन

कोणीय एक DI है (निर्भरता इंजेक्शन ) ढांचा, एक विशेषता जो इसकी प्रतिरूपकता और उत्पादकता को बढ़ाती है।

कोणीय में निर्भरता आपकी सेवाओं और रिपॉजिटरी से किसी भी प्रकार की सामान्य वस्तु में भिन्न हो सकती है जो आपको लगता है कि कोड में कहीं और इंजेक्ट करने के लिए उपयुक्त है।

एक वर्ग "इंजेक्टेबल" को चालू करने के लिए, आपको केवल इसे @Injectable के साथ एनोटेट करना होगा डेकोरेटर:

@Injectable({
    providedIn: "root",
})
export class UserService {
    ...
}

providedIn इंगित करता है कि कौन सा इंजेक्टर आपके द्वारा बनाए जा रहे इंजेक्शन को प्रदान करेगा। root मान एंगुलर को बताता है कि इंजेक्टर एप्लिकेशन-लेवल वाला होना चाहिए। और भी बहुत कुछ है जिसे आप यहाँ देख सकते हैं।

वर्ग को एक घटक में इंजेक्ट करने के लिए, उदाहरण के लिए, आप एंगुलर को घटक के निर्माता में ऐसा करने के लिए कहते हैं:

constructor(
    private userService: UserService,
) {}

यह उतना ही आसान है!

समाप्त घटक

नीचे, आप हमारे उपयोगकर्ता घटक के लिए अंतिम कोड सूची पा सकते हैं। इसे index.component.ts . में रखें , javascript/hello_angular/app/ . के अंतर्गत फ़ोल्डर।

import { Component, OnInit, TemplateRef } from "@angular/core";
import { FormGroup, FormBuilder } from "@angular/forms";
import { BsModalRef, BsModalService } from "ngx-bootstrap/modal";

import templateString from "./index.component.html";
import { UserService } from "../user.service";
import { User } from "../user.class";

@Component({
  selector: "users",
  template: templateString,
})
export class UserIndexComponent implements OnInit {
  users: User[];
  modalRef: BsModalRef;
  userForm: FormGroup;
  isNew: Boolean;

  constructor(public fb: FormBuilder, private userService: UserService, private modalService: BsModalService) {}

  public newUser(template: TemplateRef<any>) {
    this.reset();
    this.modalRef = this.modalService.show(template);
  }

  public createUser() {
    this.userService.create(this.userForm.value).subscribe(() => {
      console.log("User created!");
      this.reset();

      this.modalRef.hide();
    });
  }

  public editUser(user, template: TemplateRef<any>) {
    this.isNew = false;
    this.userForm = this.fb.group({
      id: [user.id],
      name: [user.name],
      age: [user.age],
      address: [user.address],
    });

    this.modalRef = this.modalService.show(template);
  }

  public updateUser() {
    const { id } = this.userForm.value;
    this.userService.update(id, this.userForm.value).subscribe(() => {
      console.log("User updated!");
      this.reset();

      this.modalRef.hide();
    });
  }

  public deleteUser(id) {
    if (confirm("Are you sure?")) {
      this.userService.delete(id).subscribe(() => {
        console.log("User deleted!");
        this.reset();
      });
    }
  }

  ngOnInit() {
    this.reset();
  }

  public reset() {
    this.isNew = true;
    this.userService.getUsers().subscribe((users) => {
      this.users = users;
    });

    this.userForm = this.fb.group({
      id: [""],
      name: [""],
      age: [""],
      address: [""],
    });
  }
}

User सरणी स्क्रीन पर सूचीबद्ध वर्तमान तालिका डेटा को रखेगी और reset . से पुनर्प्राप्त की जाएगी विधि, जो बदले में, हमारे रेल एपीआई को UserService . के माध्यम से कॉल करती है (बनाया जाना है)।

userForm हमारे उपयोगकर्ताओं को बनाने और अपडेट करने में मदद करने के लिए सिर्फ एक संदर्भ है क्योंकि दोनों कार्यों के लिए एक ही फॉर्म का उपयोग किया जाएगा। isNew यह पहचानने में भी मदद करता है कि हम इस समय किस प्रवाह में हैं।

यहां, हमारे पास प्रत्येक ऑपरेशन के लिए एक सीआरयूडी-समतुल्य विधि है। उनमें से प्रत्येक संबंधित UserService . को कॉल करता है रेल एपीआई में प्रक्रिया करने की विधि।

हमें अपने टेम्प्लेट को HTML में बदलने के लिए HTML मॉड्यूल भी सेट करना होगा (हम जल्द ही मॉड्यूल पर और अधिक देखेंगे)। तो, html.d.ts खोलें उसी फ़ोल्डर में फ़ाइल करें और जोड़ें:

declare module "*.html" {
  const content: string;
  export default content;
}

कोणीय सेवा और मॉडल

चलिए एंगुलर के UserService पर चलते हैं निर्माण। कोणीय एक ढांचा है, बिल्कुल रेल की तरह। तो, इसका मतलब है कि उनके नियमों का पालन करना ठीक है, भले ही इसका मतलब डुप्लिकेट (या बहुत समान) मॉडल हों, उदाहरण के लिए।

मॉडल क्या है?

कोणीय मॉडल सरल वस्तुएं होती हैं जो डेटा विशेषताओं को रखती हैं जो एक साथ समझ में आती हैं (यानी, वे आपके डोमेन के संक्षिप्त टुकड़े का प्रतिनिधित्व करती हैं)। वे अधिकांश भाषाओं और ढांचे में किसी भी अन्य मॉडल की तरह हैं।

यह आपके डेटा को पूरे कोड में डुप्लीकेट करने के बजाय एक ही स्थान पर केंद्रित करने में बहुत मदद करता है जैसे हम अपने उपयोगकर्ता के मॉडल के साथ करते हैं:

export class User {
  constructor(public id: number, public name: string, public age: number, public address: string) {}
}

याद रखें कि यह टाइपस्क्रिप्ट है, इसलिए आपके मॉडल की विशेषताओं में हमेशा एक प्रकार परिभाषित होना चाहिए।

user.class.ts . नामक एक नई फ़ाइल बनाएं javascript/hello_angular/app/user/ . के अंतर्गत फ़ोल्डर और ऊपर दिए गए कोड को उसमें डालें।

सेवा के बारे में क्या?

सेवाएं एक व्यापक अवधारणा है, लेकिन हम उन्हें अच्छी तरह से परिभाषित और उद्देश्यपूर्ण वस्तुओं के रूप में समझ सकते हैं। वे अधिक जटिल तर्क के साथ घटकों की मदद करते हैं, उन्हें संसाधित और रूपांतरित डेटा के साथ परोसते हैं, आमतौर पर बाहरी सेवा या डेटाबेस से आते हैं।

किसी सेवा को किसी विशिष्ट एनोटेशन या इंटरफ़ेस की आवश्यकता नहीं होती है; आप बस एक वर्ग बनाएं और इसे इंजेक्शन योग्य बनाएं , जैसा कि हमने पहले देखा है। फिर, आप इसे अपने घटकों में इंजेक्ट कर सकते हैं।

अवलोकन योग्य सेवाएं

एंगुलर की एक और दिलचस्प विशेषता यह है कि यह आपको अपनी कक्षाओं के साथ RxJS का उपयोग करने की अनुमति देता है।

उदाहरण के लिए, कोणीय का डिफ़ॉल्ट HTTP क्लाइंट, जिसे हम बाहरी सेवा से जानकारी प्राप्त करने के लिए उपयोग करेंगे, RxJS Observables लौटाता है . यही कारण है कि, जब आप हमारी किसी UserService . को कॉल करते हैं उपयोगकर्ता घटक के भीतर विधियों, आप subscribe . कर सकते हैं Observable . के लिए परिणाम:

this.userService.getUsers().subscribe((users) => {
  this.users = users;
});

ध्यान दें कि यदि आप RxJS से परिचित नहीं हैं, तो मैं दृढ़ता से इसके दस्तावेज़ीकरण पर एक संक्षिप्त पढ़ने की अनुशंसा करता हूं; इतना भी मुश्किल नहीं है!;)

फिर से, javascript/hello_angular/app/user/ . में फ़ोल्डर, user.service.ts . नामक एक अन्य फ़ाइल बनाएँ . यह इसकी सामग्री है:

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { map } from "rxjs/operators";
import { Observable } from "rxjs";

import { User } from "./user.class";

@Injectable({
  providedIn: "root",
})
export class UserService {
  constructor(private http: HttpClient) {}

  httpOptions = {
    headers: new HttpHeaders({
      "Content-Type": "application/json",
    }),
  };

  getUsers(): Observable<User[]> {
    return this.http.get("/users.json").pipe(
      map((users: User[]) =>
        users.map((user) => {
          return new User(user.id, user.name, user.age, user.address);
        })
      )
    );
  }

  create(user): Observable<User> {
    return this.http.post<User>("/users.json", JSON.stringify(user), this.httpOptions);
  }

  update(id, user): Observable<User> {
    return this.http.put<User>("/users/" + id + ".json", JSON.stringify(user), this.httpOptions);
  }

  delete(id) {
    return this.http.delete<User>("/users/" + id + ".json", this.httpOptions);
  }
}

क्या आप इस एक और हमारे द्वारा अभी बनाए गए घटक के बीच समानताएं देख सकते हैं? ऐसा इसलिए है क्योंकि हमें घटक में मौजूद लोगों का समर्थन करने के लिए संवाददाता संचालन की आवश्यकता है।

ध्यान दें कि HttpClient क्लास के कंस्ट्रक्टर के भीतर भी इंजेक्ट किया जाना चाहिए, इसलिए हम इसे क्लास के साथ-साथ इस्तेमाल कर सकते हैं।

प्रत्येक ऑपरेशन हमारे Rails API को एक HTTP कॉल करता है, जो स्वतः उत्पन्न होता है।

देखे जाने की संख्या

कोणीय अपने विचारों के लिए टेम्पलेट्स के साथ काम करता है। टेम्प्लेट एक प्रकार का पदानुक्रमित HTML-और-JavaScript मिश्रण है जो एंगुलर को बताता है कि प्रत्येक घटक को कैसे प्रस्तुत किया जाए।

हालांकि, हमारे विचार के निर्माण के साथ आगे बढ़ने से पहले, आइए पहले समझते हैं कि कोणीय अपने टेम्पलेट सिस्टम को कैसे विभाजित करता है।

कोणीय निर्देश

क्योंकि कोणीय टेम्पलेट अनिवार्य रूप से गतिशील होते हैं, कुछ निर्देश सामग्री को प्रस्तुत करने के लिए कोणीय को सही तरीके से चलाने के लिए आवश्यक हैं।

निर्देश केवल @Directive . के साथ वर्ग होते हैं डेकोरेटर, घटकों की तरह। हां, @Component @Directive . से इनहेरिट करता है , इसलिए यह आधिकारिक तौर पर एक निर्देश भी है।

हालांकि, दो अन्य प्रकार हैं:संरचनात्मक और विशेषता निर्देश।

संरचनात्मक निर्देश

ये निर्देश जावास्क्रिप्ट से कोणीय टेम्पलेट में अनुवादित सशर्त और लूप संरचनाओं का प्रतिनिधित्व करते हैं। वे टेम्प्लेट को यथासंभव गतिशील बनाने में मदद करते हैं, जैसे कि यदि आप अपने वैनिला जावास्क्रिप्ट कोड के भीतर प्रोग्रामिंग कर रहे थे। निम्नलिखित उदाहरण लें:

<tr *ngFor="let user of users">
  <td>{{ user.name }}</td>
</tr>

*ngFor निर्देश एंगुलर को Users . की सरणी पर पुनरावृति करने के लिए कहता है और प्रत्येक उपयोगकर्ता का नाम DOM पर प्रिंट करें।

विशेषता निर्देश

ये सीधे तत्वों की उपस्थिति या व्यवहार के साथ काम करते हैं। निम्नलिखित उदाहरण लें:

<form [formGroup]="userForm" (ngSubmit)="isNew ? createUser() : updateUser()" novalidate></form>

यहां, हम फ़ॉर्म के submit . को सशर्त रूप से सेट करके उसके व्यवहार को संशोधित कर रहे हैं एंगुलर के FormGroup . का उपयोग करना और कार्य करना प्रत्येक प्रपत्र इनपुट को डेटा-बाइंड करने के लिए।

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

वेब फ्रेमवर्क के साथ फॉर्म बनाना एक मुश्किल और त्रुटि-प्रवण कार्य हो सकता है यदि यह डेटा बाइंडिंग प्रदान नहीं करता है।

कोणीय दो-तरफ़ा डेटा बाइंडिंग का समर्थन करता है, जिसका अर्थ है कि आप अपने टेम्पलेट के टुकड़ों को सीधे घटक से जोड़ सकते हैं और इसके विपरीत।

ऊपर दिया गया फॉर्म FormGroup . का एक अच्छा उदाहरण है डेटा बाध्यकारी शक्ति। यह स्वचालित रूप से प्रत्येक प्रपत्र फ़ील्ड को userForm . से बांधता है हमारे घटक के भीतर बनाई गई वस्तु।

editUser . में विधि, उदाहरण के लिए, आप बाइंडिंग के विपरीत संस्करण को देख सकते हैं, जिसमें userForm के मान घटक के भीतर सेट किए गए हैं और दृश्य पर प्रपत्र को प्रतिबिंबित करेंगे।

इंडेक्स व्यू बनाना

आइए index.component.html . के लिए सामग्री का विश्लेषण करें दो भागों में। यह पहला है:

<div class="container pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
  <h1 class="display-4">User's Listing</h1>
  <p class="lead">A quick CRUD example of how to integrate Rails with Angular</p>

  <table class="table">
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
      <th>Actions</th>
    </tr>

    <tbody>
      <tr *ngFor="let user of users">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.address }}</td>
        <td colspan="2">
          <button class="btn btn-secondary" (click)="editUser(user, template)">Edit</button>
          |
          <button class="btn btn-danger" (click)="deleteUser(user.id)">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>

  <button class="btn btn-primary float-right mt-4" (click)="newUser(template)">Insert New</button>
</div>

इसका अधिकांश भाग सादे HTML से बना है। हम बूटस्ट्रैप कक्षाओं के बारे में विस्तार से नहीं जाएंगे।

यहाँ महत्वपूर्ण हिस्सा है ngFor तालिका की पंक्ति पर निर्देश। यह Users . पर पुनरावृति करने में सहायता करता है सरणी (इसे याद रखें?) {{ … }} के माध्यम से HTML आउटपुट में अपनी प्रत्येक विशेषता को प्रिंट करना ऑपरेटर।

जब भी आप कोई एक DOM ईवेंट जोड़ना चाहें, जैसे onClick , बस ईवेंट के नाम को कोष्ठक से लपेटें और उस घटक फ़ंक्शन को जोड़ें जिसे क्लिक करने पर वह कॉल करेगा।

मॉडल व्यू का निर्माण

दूसरा भाग मोडल सामग्री से संबंधित है, इसलिए इसे पिछले वाले के नीचे जोड़ें:

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">{{ isNew ? "New User" : "Update User" }}</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form [formGroup]="userForm" (ngSubmit)="isNew ? createUser() : updateUser()" novalidate>
      <input type="hidden" formControlName="id" class="form-control" />
      <div class="form-group">
        <label>Name</label>
        <input type="text" formControlName="name" class="form-control" />
      </div>
      <div class="form-group">
        <label>Age</label>
        <input type="text" formControlName="age" class="form-control" />
      </div>
      <div class="form-group">
        <label>Address</label>
        <textarea class="form-control" formControlName="address" rows="3"></textarea>
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</ng-template>

ध्यान दें कि हम <ng-template> . का उपयोग कर रहे हैं टैग, जो आपको HTML और कोणीय के बीच तत्वों को एंकर करने की अनुमति देता है। टेम्प्लेट आईडी # . के ठीक बाद आता है साइन करें।

फ़ॉर्म में, यह भी ध्यान दें कि हम isNew . का उपयोग कर रहे हैं घटक चर यह सत्यापित करने के लिए कि इस फ़ॉर्म का वर्तमान उपयोग उपयोगकर्ता के निर्माण या अद्यतन से संबंधित है या नहीं।

अंत में, हमें संपूर्ण hello_angular . को इंजेक्ट करने की आवश्यकता है रेल में आवेदन index.html.erb पृष्ठ। तो, इस फाइल को views/users/ . के तहत खोलें फ़ोल्डर और इसकी सामग्री को निम्नलिखित में बदलें:

<hello-angular>We're almost done...</hello-angular> <%= javascript_pack_tag 'hello_angular' %>

कोणीय मॉड्यूल

अब, हमें एंगुलर को यह बताने की जरूरत है कि सामान कहां खोजा जाए। यह इसके मॉड्यूल के कॉन्फ़िगरेशन में होता है।

आइए app-bootstrap.module.ts . में सामग्री जोड़कर शुरू करें :

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { ModalModule } from "ngx-bootstrap/modal";

@NgModule({
  imports: [CommonModule, ModalModule.forRoot()],
  exports: [ModalModule],
})
export class AppBootstrapModule {}

यह बूटस्ट्रैप घटकों तक ही सीमित है जिसे हम एनजीएक्स-बूटस्ट्रैप से विरासत में प्राप्त कर रहे हैं। अभी हम जिस एकमात्र घटक का उपयोग कर रहे हैं वह बूटस्ट्रैप मोडल है।

फिर, app-routing.module.ts खोलें फ़ाइल करें और इसकी सामग्री को निम्न में बदलें:

import { RouterModule, Routes } from "@angular/router";
import { NgModule } from "@angular/core";

import { UserIndexComponent } from "./user/index/index.component";

const appRoutes: Routes = [
  { path: "users", component: UserIndexComponent },
  { path: "", redirectTo: "/users", pathMatch: "full" },
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, { scrollPositionRestoration: "enabled" })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

यह सुनिश्चित करेगा कि कोणीय सही उपयोगकर्ता के घटक से मेल खाता है जब /उपयोगकर्ता पथ कहा जाता है।

और, अंत में, उन सभी को मुख्य AppModule . में पंजीकृत करें कक्षा। app.module.ts खोलें फ़ाइल और सुनिश्चित करें कि यह इस तरह दिखता है:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";
import { AppBootstrapModule } from "./app-boostrap.module";
import { UserIndexComponent } from "./user/index/index.component";

@NgModule({
  declarations: [AppComponent, UserIndexComponent],
  imports: [HttpClientModule, AppRoutingModule, BrowserModule, FormsModule, ReactiveFormsModule, AppBootstrapModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

यहां, सब कुछ मैप किया गया है। हमारे फॉर्म से, HTTP क्लाइंट और यूजर कंपोनेंट से लेकर बूटस्ट्रैप मॉड्यूल कॉन्फिगर और रूटिंग।

कॉन्फ़िगरेशन खत्म करना

इससे पहले कि हम परीक्षण शुरू करें, हमें app.component.ts से शुरू करते हुए कुछ चीजों को पूरा करना होगा। फ़ाइल:

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

@Component({
  selector: "hello-angular",
  template: "<router-outlet></router-outlet>",
})
export class AppComponent {
  name = "Angular!";
}

मुख्य ऐप घटक को यह जानने की जरूरत है कि पथों को कैसे रूट किया जाए, इसलिए राउटरऑउटलेट काम करेगा।

फिर, हमें यह सुनिश्चित करने की आवश्यकता है कि वेबपैकर उस HTML एक्सटेंशन को समझता है जिसके साथ हम अब तक काम कर रहे हैं। इसके लिए webpacker.yml खोलें फ़ाइल और, /config . के अंतर्गत फ़ोल्डर, एक्सटेंशन . के लिए खोजें अनुभाग और निम्नलिखित आइटम जोड़ें:

- .html

वेबपैकर केवल अंतर्निहित टाइपस्क्रिप्ट लोडर को पहचानता है जो डिफ़ॉल्ट रूप से एंगुलर के साथ आता है। हमें HTML को संसाधित करने की आवश्यकता है, यही वजह है कि हमने पहले html-loader . स्थापित किया था निर्भरता। इसे सेट करने के लिए, environment.js खोलें फ़ाइल, कॉन्फ़िगर/वेबपैक . के अंतर्गत फ़ोल्डर, और निम्न लोडर कॉन्फ़िगरेशन जोड़ें:

environment.loaders.append("html", {
  test: /\.html$/,
  use: [
    {
      loader: "html-loader",
      options: {
        minimize: true,
      },
    },
  ],
});

अंत में, हमारी कोणीय सेवा को उनके HTTP कॉल पर त्रुटियों को प्राप्त करने से रोकने के लिए, हमें रेल द्वारा किए गए CSRF टोकन चेक को अक्षम करने की आवश्यकता है। इसके लिए application_controller.rb खोलें फ़ाइल, ऐप/नियंत्रक . के अंतर्गत फ़ोल्डर, और इसकी सामग्री को निम्नलिखित में बदलें:

class ApplicationController < ActionController::Base
  protect_from_forgery with: :null_session
end

परीक्षण

इतना ही! यह थोड़ा मुश्किल लगता है क्योंकि सेटअप के लिए बहुत सारे अनुकूलन की आवश्यकता होती है, लेकिन परिणाम इसके लायक है।

परीक्षण करने के लिए, सब कुछ सहेजें, और rails s . जारी करके सर्वर प्रारंभ करें आदेश।

फिर, अपने वेब ब्राउजर पर जाएं और पता टाइप करें https://localhost:3000/users। आगे बढ़ें और सीआरयूडी वेब एप्लिकेशन के साथ खेलें।

निष्कर्ष

इस सीआरयूडी को चालू करने और चलाने के लिए यह एक लंबी सड़क रही है। पहले परीक्षण के बाद, आप देखेंगे कि आपकी भविष्य की परियोजनाओं के लिए चीजें आसान हो जाती हैं। मुझे आशा है कि यह परियोजना आप में से उन लोगों के लिए एक प्रारंभिक बिंदु स्थापित करने में मदद करेगी जो दोनों तकनीकों में शामिल होकर जल्दी से एक परियोजना शुरू करना चाहते हैं।

जबकि हमारे पास इसकी मदद के लिए एक ओपन-सोर्स मचान प्रोजेक्ट नहीं है, हम इस तरह की सामग्री के लिए एक-दूसरे के प्रयासों पर भरोसा करते हैं। अब आपकी बारी है; प्रोजेक्ट को फोर्क करें (या इसे स्क्रैच से बनाएं) और अपने कस्टमाइज़ेशन बनाना शुरू करें।

इस उदाहरण के लिए गिटहब भंडार यहां पाया जा सकता है। मज़े करो!