রেলের সাথে কৌণিক ব্যবহার 5

আপনি আগে গল্প শুনেছেন. আপনার কাছে ইতিমধ্যেই আপনার বিকেন্দ্রীকৃত এবং সম্পূর্ণভাবে কাজ করা ব্যাক-এন্ড API এবং যেকোনো সাধারণ টুলসেট দিয়ে তৈরি একটি ফ্রন্ট-এন্ডের উপর একটি অ্যাপ্লিকেশন চলছে৷

এখন, আপনি Angular এ যেতে চান। অথবা, সম্ভবত আপনি আপনার রেল প্রকল্পগুলির সাথে কৌণিক সংহত করার একটি উপায় খুঁজছেন কারণ আপনি এইভাবে জিনিসগুলি পছন্দ করেন। আমরা আপনাকে দোষ দিই না।

এই ধরনের পদ্ধতির মাধ্যমে, আপনি উভয় জগতের সুবিধা নিতে পারেন এবং সিদ্ধান্ত নিতে পারেন যে আপনি রেইল বা কৌণিক থেকে বৈশিষ্ট্যগুলি ফর্ম্যাট করার জন্য ব্যবহার করতে চান কিনা, উদাহরণস্বরূপ।

আমরা কী তৈরি করব

চিন্তা করার দরকার নেই। এই উদ্দেশ্যে এই টিউটোরিয়াল লেখা হয়েছে. আমরা ব্যবহারকারীদের একটি ডোমেনে একটি সম্পূর্ণ-কাজ করা CRUD অ্যাপ্লিকেশন তৈরিতে ডুব দেব৷

নিবন্ধের শেষে, আপনি কৌণিক সম্পর্কে কিছু মৌলিক ধারণা এবং কীভাবে একটি রেল ব্যাক-এন্ড প্রজেক্ট সেট আপ করতে হয় তা সম্মুখ-প্রান্তের জন্য সরাসরি কৌণিকের সাথে একীভূত হয়, নীচের হিসাবে শিখেছেন:

রেল এবং কৌণিক দিয়ে তৈরি ব্যবহারকারীদের CRUD

অ্যাপ্লিকেশনটি একটি বহিরাগত জাল-পরীক্ষামূলক ওয়েব পরিষেবা থেকে পুনরুদ্ধার করা ব্যবহারকারীদের ডোমেনে চারটি CRUD অপারেশন পরিচালনা করবে। অ্যাপটি একটি MVC আর্কিটেকচারের উপরে তৈরি করা হবে, প্রতিটি কৌণিক স্তর বিশদভাবে ব্যাখ্যা করা হয়েছে যাতে জিনিসগুলি কীভাবে একত্রিত হয় তা আরও ভালভাবে বুঝতে সাহায্য করে। স্টাইলটি বুটস্ট্র্যাপ পর্যন্ত।

সেটআপ

আপনি যেমন অনুমান করেছেন, আমাদের নিম্নলিখিত সফ্টওয়্যারটির প্রয়োজন হবে:

• রুবি (আমি সংস্করণ 2.7.0প্রিভিউ1 বেছে নিয়েছি),
• রুবি এবং রেল (আমি এর সংস্করণ 5.0.7.2 ব্যবহার করছি),
• Node.js (আমি v13.7.0 দিয়ে যাচ্ছি),
• সুতা (অন্তত তার সংস্করণ 1.22.4)

সবকিছু সঠিকভাবে ইনস্টল করা নিশ্চিত করুন। তারপরে, আমরা প্রকল্পে যেতে পারি। আপনার পছন্দের একটি ফোল্ডার নির্বাচন করুন এবং নিম্নলিখিত কমান্ডটি চালান:

rails new crud-rails-angular

সেটআপ সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন এবং আপনার প্রিয় IDE এর মধ্যে প্রকল্পটি খুলুন। আমরা এই নিবন্ধটির জন্য VS কোডের সাথে কাজ করতে যাচ্ছি কারণ এটি সহজ, শক্তিশালী এবং মসৃণভাবে রেল এবং কৌণিক বাক্য গঠন উভয়কেই আলিঙ্গন করে৷

আপনি যদি কিছুক্ষণ ধরে 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-এর অধীনে তৈরি করা হয়েছিল ফোল্ডার, যেমন নতুন /javascript . এই ফোল্ডারে, আপনার ইতিমধ্যেই একটি /hello_angular আছে৷ আপনার বিকাশের শুরুতে সমর্থন করার জন্য ফোল্ডার তৈরি করা হয়েছে।

কিছু সময় লাভের জন্য, আমি আপনাকে নিম্নলিখিত একটি দিয়ে আপনার ফোল্ডার এবং ফাইলের কাঠামো মিরর করতে বলব:

কিছু ​​কৌণিক সমন্বয়

ওয়েবপ্যাকার আপনার তৈরি করা রেল প্রকল্পের মধ্যে সামঞ্জস্যের একটি সিরিজ সুপারিশ করে। তাই, ঘর সাজাতে একটু সময় নেওয়া যাক।

প্রথমে, আপনার application.js খুলুন ফাইল /প্যাকস এর অধীনে রাখা হয়েছে ফোল্ডার (উপরের চিত্রে দেখানো হয়েছে) এবং নিম্নলিখিত কোড যোগ করুন:

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

এই আমদানিগুলি রেল প্রকল্পের মধ্যে জাভাস্ক্রিপ্ট পরিবেশকে স্থিতিশীল করার জন্য একটি সহায়ক শক্তি হিসাবে কাজ করে৷

এখন, আমাদের রেলকে জানাতে হবে যেখান থেকে এটি অবশ্যই তার পৃষ্ঠাগুলিতে আউটপুট বাছাই করবে। একবার ওয়েবপ্যাকার জিনিসগুলি প্যাক করা শেষ করলে, এটি বিতরণযোগ্য স্ট্যাটিক ফাইলগুলির একটি গুচ্ছ তৈরি করবে যা রেলগুলিকে অবশ্যই সচেতন হতে হবে৷

application.html.erb-এ যান app/views/layout এর অধীনে ফাইল ফোল্ডার এবং তার <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. এখানে আপনাকে অবশ্যই ওয়েবপ্যাকার ট্যাগ রাখতে হবে যা /প্যাকগুলি এর সাথে মানচিত্র করে ফোল্ডার বিষয়বস্তু (একই যা ওয়েবপ্যাকার দ্বারা প্রতিটি সংকলনের পরে স্বয়ংক্রিয়ভাবে তৈরি হবে)।

মডেল এবং ডেটাবেস

ডাটাবেস সেটআপে যান। জিনিসগুলিকে আরও দ্রুত করতে, আমরা 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;

এবং আপনি ফলাফল দেখতে পারেন।

ব্যবহারকারী উপাদান

আমাদের রেল পৃষ্ঠাগুলিতে এইচটিএমএল এবং সিএসএস রূপান্তর করতে সাহায্য করার জন্য আপনাকে আরও কয়েকটি নির্ভরতা ইনস্টল করতে হবে; কৌণিক রাউটার, ফর্ম লিবস এবং এনজিএক্স-বুটস্ট্র্যাপ যোগ করুন, যা আমরা বুটস্ট্র্যাপ উপাদান তৈরি এবং ম্যানিপুলেশন সহজতর করতে ব্যবহার করব। সুতরাং, নিম্নলিখিত কমান্ড জারি করুন:

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 কৌণিককে বলে যে প্রদত্ত মান হল CSS নির্বাচক যা এটি একটি টেমপ্লেটে বর্তমান নির্দেশ সনাক্ত করতে ব্যবহার করতে পারে; হ্যাঁ, এটি একই টেমপ্লেট যা পরবর্তী মেটাডেটা সম্পত্তিতে দেওয়া হয়েছে৷

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 এর মাধ্যমে আমাদের Rails API কল করে (তৈরি করা হবে)।

userForm আমাদের ব্যবহারকারীদের তৈরি এবং আপডেট করতে সাহায্য করার জন্য শুধুমাত্র একটি রেফারেন্স যেহেতু একই ফর্ম উভয় অপারেশনের জন্য ব্যবহার করা হবে। isNew এছাড়াও এটিতে সাহায্য করে, আমরা এই মুহূর্তে কোন প্রবাহে আছি তা শনাক্ত করতে।

এখানে, প্রতিটি অপারেশনের জন্য আমাদের কাছে একটি CRUD-সমতুল্য পদ্ধতি রয়েছে। তাদের প্রত্যেকে নিজ নিজ UserService কে কল করে Rails API-তে প্রক্রিয়াটি কমিট করার পদ্ধতি।

আমাদের টেমপ্লেটগুলিকে HTML-এ রূপান্তর করতে আমাদের HTML মডিউল সেট আপ করতে হবে (আমরা শীঘ্রই মডিউলগুলিতে আরও দেখতে পাব)। সুতরাং, html.d.ts খুলুন একই ফোল্ডারের মধ্যে ফাইল এবং যোগ করুন:

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

কৌণিক পরিষেবা এবং মডেল

চলুন Angular এর UserService-এ যাওয়া যাক সৃষ্টি কৌণিক একটি কাঠামো, ঠিক রেলের মতো। সুতরাং, এর মানে হল যে তাদের নিয়ম মেনে চলা ঠিক আছে যদিও এর মানে হল নকল (বা খুব একই রকম) মডেল, উদাহরণস্বরূপ।

একটি মডেল কি?

কৌণিক মডেলগুলি হল সাধারণ বস্তু যা ডেটা বৈশিষ্ট্যগুলিকে ধারণ করে যা একত্রে বোঝা যায় (যেমন, তারা আপনার ডোমেনের একটি সংক্ষিপ্ত অংশকে উপস্থাপন করে)। বেশিরভাগ ভাষা এবং ফ্রেমওয়ার্কে এগুলি অন্যান্য মডেলের মতো৷

আমরা আমাদের ব্যবহারকারীর মডেলের মতো করে পুরো কোড জুড়ে নকল করার পরিবর্তে আপনার ডেটাকে এক জায়গায় কেন্দ্রীভূত করতে এটি অনেক সাহায্য করে:

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

মনে রাখবেন যে এটি TypeScript, তাই আপনার মডেলের গুণাবলীতে সর্বদা একটি প্রকার সংজ্ঞায়িত থাকতে হবে।

user.class.ts নামে একটি নতুন ফাইল তৈরি করুন৷ javascript/hello_angular/app/user/ এর অধীনে ফোল্ডার এবং এটিতে উপরের কোডটি রাখুন।

একটি পরিষেবা সম্পর্কে কি?

পরিষেবাগুলি একটি বিস্তৃত ধারণা, কিন্তু আমরা সেগুলিকে সু-সংজ্ঞায়িত এবং উদ্দেশ্যমূলক বস্তু হিসাবে বুঝতে পারি৷ তারা উপাদানগুলিকে আরও জটিল যুক্তি দিয়ে সাহায্য করে, সেগুলিকে প্রক্রিয়াকৃত এবং রূপান্তরিত ডেটা দিয়ে পরিবেশন করে, সাধারণত একটি বহিরাগত পরিষেবা বা ডেটাবেস থেকে আসে৷

একটি পরিষেবার জন্য কোনো নির্দিষ্ট টীকা বা ইন্টারফেসের প্রয়োজন হয় না; আপনি শুধু একটি ক্লাস তৈরি করুন এবং এটিকে ইনজেকশনযোগ্য করুন , যেমন আমরা আগে দেখেছি। তারপরে, আপনি এটি আপনার উপাদানগুলিতে ইনজেক্ট করতে পারেন৷

পর্যবেক্ষণযোগ্য পরিষেবাগুলি

Angular এর আরেকটি আকর্ষণীয় বৈশিষ্ট্য হল এটি আপনাকে আপনার ক্লাসের সাথে 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-এবং-জাভাস্ক্রিপ্ট মিশ্রণ যা কৌণিককে জানায় কিভাবে প্রতিটি উপাদানকে রেন্ডার করতে হয়।

যাইহোক, আমাদের দৃষ্টিভঙ্গি নির্মাণের সাথে আরও কিছু করার আগে, আসুন প্রথমে বুঝতে পারি কিভাবে কৌণিক তার টেমপ্লেট সিস্টেমকে বিভক্ত করে।

কৌণিক নির্দেশাবলী

কারণ কৌণিক টেমপ্লেটগুলি মূলত গতিশীল, কিছু নির্দেশ স্টাফ রেন্ডার করার জন্য সঠিক উপায়ে অ্যাঙ্গুলার চালানোর জন্য প্রয়োজন।

নির্দেশাবলী হল একটি @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 সেট করে এর আচরণ পরিবর্তন করছি Angular এর 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 এবং Angular এর মধ্যে উপাদানগুলিকে নোঙ্গর করতে দেয়। টেমপ্লেট আইডিটি # এর ঠিক পরে আসে চিহ্ন।

ফর্মের মধ্যে, এটাও মনে রাখবেন যে আমরা isNew ব্যবহার করছি এই ফর্মটির বর্তমান ব্যবহার ব্যবহারকারীর সৃষ্টি বা আপডেটের সাথে সম্পর্কিত কিনা তা যাচাই করার জন্য উপাদান পরিবর্তনশীল।

অবশেষে, আমাদের পুরো hello_angularটি ইনজেকশন করতে হবে রেলে আবেদন index.html.erb পৃষ্ঠা সুতরাং, দর্শন/ব্যবহারকারী/ এর অধীনে এই ফাইলটি খুলুন৷ ফোল্ডার এবং এর বিষয়বস্তুকে নিম্নলিখিতগুলিতে পরিবর্তন করুন:

<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 {}

এটি বুটস্ট্র্যাপ উপাদানগুলির মধ্যে সীমাবদ্ধ যা আমরা ngx-bootstrap থেকে উত্তরাধিকারসূত্রে পেয়েছি। আমরা আপাতত যে উপাদানটি ব্যবহার করছি তা হল বুটস্ট্র্যাপ মডেল৷

তারপর, 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!";
}

মূল অ্যাপ কম্পোনেন্টকে জানতে হবে কিভাবে পথগুলিকে রুট করতে হয়, তাই রাউটারআউটলেট কাজটি করবে৷

তারপরে, আমাদের নিশ্চিত করতে হবে যে ওয়েবপ্যাকার এইচটিএমএল এক্সটেনশনটি বুঝতে পারে যা আমরা এখন পর্যন্ত কাজ করছি। এর জন্য, webpacker.yml খুলুন ফাইল এবং, /config-এর অধীনে ফোল্ডার, এক্সটেনশন অনুসন্ধান করুন বিভাগ এবং নিম্নলিখিত আইটেম যোগ করুন:

- .html

ওয়েবপ্যাকার শুধুমাত্র অন্তর্নির্মিত টাইপস্ক্রিপ্ট লোডারকে চিনতে পারে যা ডিফল্টরূপে কৌণিকভাবে আসে। আমাদের এইচটিএমএল প্রক্রিয়া করতে হবে, এই কারণেই আমরা আগে html-লোডার ইনস্টল করেছি নির্ভরতা এটি সেট আপ করতে, environment.js খুলুন ফাইল, config/webpack এর অধীনে ফোল্ডার, এবং নিম্নলিখিত লোডার কনফিগারেশন যোগ করুন:

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 ঠিকানাটি টাইপ করুন। এগিয়ে যান এবং CRUD ওয়েব অ্যাপ্লিকেশনের সাথে খেলা করুন৷

উপসংহার

এই CRUD চালু করার জন্য এটি একটি দীর্ঘ পথ হয়েছে। প্রথম ট্রায়ালের পরে, আপনি দেখতে পাবেন যে আপনার ভবিষ্যত প্রকল্পগুলির জন্য জিনিসগুলি সহজ হয়ে যায়। আমি আশা করি এই প্রকল্পটি আপনাদের মধ্যে যারা উভয় প্রযুক্তিতে যোগদান করে দ্রুত একটি প্রকল্প শুরু করতে চান তাদের জন্য একটি সূচনা পয়েন্ট সেট আপ করতে সাহায্য করবে৷

যদিও এটিতে সাহায্য করার জন্য আমাদের কাছে একটি ওপেন-সোর্স স্ক্যাফোল্ডিং প্রজেক্ট নেই, আমরা একে অপরের প্রচেষ্টার উপর নির্ভর করি এর মতো উপকরণ পাওয়ার জন্য। এবার তোমার পালা; প্রজেক্টকে ফোর্ক করুন (বা স্ক্র্যাচ থেকে তৈরি করুন) এবং আপনার কাস্টমাইজেশন করা শুরু করুন।

এই উদাহরণের জন্য GitHub সংগ্রহস্থল এখানে পাওয়া যাবে। মজা করুন!