مكونات الويب الزاوي

مكونات الويب هي طريقة لإنشاء عناصر مخصصة تعمل جنبًا إلى جنب مع عناصر HTML القياسية. الهدف لمتصفحات الويب ، مثل Google و Mozilla ، هو توفير طريقة موحدة للمطورين لإنشاء عناصر مخصصة مع أي إطار عمل. الفكرة هي أنه يمكنك وضع شيء مثل <app-dashboard></app-dashboard> بجانب العناصر القياسية ، مثل <h1> و <ul>، وستعمل فقط.

باستخدام Angular ، يمكنك فعل ذلك بالفعل من خلال القوالب حيث يتم استخدام محددات المكونات لوضع المكون الزاوي في DOM.

في هذه المقالة ، سأوضح لك كيفية استخدام Angular لإنشاء نموذج اشتراك في رسالة إخبارية يمكن تضمينه يستخدم Web Components. يمكنك عرض الكود النهائي على جيثب.

أولاً ، سنقوم بإنشاء تطبيق Angular جديد وأداة بسيطة. بعد ذلك ، سوف نتأكد من أن الأداة تعمل مع عملية البناء الزاوي المعتادة.

نبدأ بتثبيت Angular CLI عالميًا:

npm install -g @angular/cli

إنشاء مشروع الزاوي

بعد ذلك ، نقوم بإنشاء مساحة عمل Angular جديدة ستحتوي على تطبيقنا:

ng new angular-web-component --routing=false --skip-tests=true --style=css

لسنا بحاجة إلى أي توجيه لمظاهرة لدينا. سنقوم أيضًا بتخطي إنشاء الاختبارات. لتصميم المكون ، سنبقي الأمور بسيطة ونستخدم CSS (البدائل التي تسمح بها Angular هي SCSS و Sass و Less و Stylus).

إنشاء مكون نموذج الاشتراك في النشرة الإخبارية

سنضيف مكونًا جديدًا سنحوله إلى أداة قابلة للتضمين. قم بتشغيل الأمر التالي في دليل المشروع الجذر:

ng generate component info-box

سيؤدي هذا إلى إنشاء رمز TypeScript للمكوِّن ونموذج HTML وورقة أنماط CSS.

سنقوم بتغيير المحدد من "app-info-box" الذي تم إنشاؤه إلى "info-box" ، وسنضيف سمتين للإدخال إلى رمز مكون مربع المعلومات:

// src/app/info-box/info-box.component.ts
import { Component, Input } from '@angular/core'; @Component({ selector: 'info-box', templateUrl: './info-box.component.html', styleUrls: ['./info-box.component.css']
})
export class InfoBoxComponent implements OnInit { @Input() signupTitle = 'Sign up for our newsletter'; @Input() thankyouMessage = 'Thanks!'; formData = { name: '', email: '' }; formSubmitted = false; constructor() { } onSubmit() { this.formSubmitted = true; }
}

بعد ذلك ، سنقوم بتحديث القالب لعرض نموذج تسجيل ورسالة شكر بعد أن يقوم المستخدم بالتسجيل في النشرة الإخبارية. تعد كل من رسالة الشكر وعنوان التسجيل من السمات المدخلة للمكون ، والتي سنتمكن من تعديلها كلما قمنا بتضمين المكون كأداة.

<!-- src/app/info-box/info-box.component.html -->
<div *ngIf="formSubmitted; else formEntry"> <h4>{{ thankyouMessage }}</h4> <p>{{ formData.name }}, our newsletter is on its way to your inbox!</p>
</div>
<ng-template #formEntry> <h4>{{ signupTitle }}</h4> <p>Get cool news and tips on the latest blockchain Angular-powered AI 5G stuff</p> <form (ngSubmit)="onSubmit()" #emailForm="ngForm"> <div> <label>Name:</label> <input type="text" name="name" [(ngModel)]="formData.name"> </div> <div> <label>Email:</label> <input type="text" name="email" [(ngModel)]="formData.email"> </div> <div> <button type="submit" [disabled]="!emailForm.form.valid">Sign up!</button> </div> </form>
</ng-template>

المنطق هو منطق النموذج الأساسي المستند إلى القالب الذي توفره Angular من خلال FormsModule.

سنستخدم مكون مربع المعلومات في القالب مرتين: مرة واحدة مع الإعدادات الافتراضية حيث لا يتم توفير سمات الإدخال ، ووقت آخر حيث نقدم عنوان التسجيل ورسالة الشكر:

<!-- src/app/app.component.html →
<h1>Welcome to Angular Web Component Example</h1>
<p><info-box></info-box></p>
<p><info-box signupTitle="Amazing newsletter!" thankyouMessage="Thanks for signing up!"></info-box></p>

بناء المشروع

الآن يمكننا بناء وخدمة المشروع محليًا باستخدام ng serve. سيقوم هذا الأمر بتجميع التعليمات البرمجية والقوالب وأوراق الأنماط وعرضها في خادم تطوير الويب المحلي. يمكنك فتح المتصفح الخاص بك إلى localhost: 4200 لرؤية تطبيق Angular.

إن إنشاء بنية للإنتاج أمر سهل مثل تشغيل الأمر ng build --prod

تكوين الزاوي لمكونات الويب

الآن بعد أن أصبح التطبيق يعمل ، يمكننا تكوينه لإنشاء مكون ويب. سيتيح لنا هذا تضمين المكون في موقع ثابت ، مثل تلك التي تم إنشاؤها بواسطة مولدات موقع ثابت ، أو تضمين الأداة في موقع ويب WordPress أو Shopify.

إضافة المكتبات اللازمة

في الوقت الحالي ، لا يدعم سوى مكونات الويب Firefox (الإصدار 63+) و Chrome و Opera. لدعم جميع المتصفحات الأخرى ، سنحتاج إلى إضافة مكتبة متعددة الوظائف تسمى "عنصر تسجيل المستندات". هذا يضيف دالة registerElement إلى كائن المستند العام حتى نتمكن من استخدام Web Components مع Angular.

قم بتثبيت حزمة document-register-element باستخدام هذا الأمر:

npm install --save document-register-element@">=1.7.2 <=1.8.1"

ملاحظة: بسبب وجود خلل في أحدث نسخة من المكتبة، هذا هو نطاق إصدار الحزمة الذي سيعمل. يجب عليك تحديث package.json لتضمين نطاق الإصدار المحدد.

نحتاج أيضًا إلى مكتبة @ angular / element ، لأنها توفر الوظيفة Angular التي تستخدم polyfill لتقديم المكونات الزاويّة:

ng add @angular/elements

تحديث ملف index.html واستخدام Web Component

الآن سنقوم بالتحديث index.html لاستخدام المكوِّن الزاوي بعلامة "info-box" التي تحل محل "app-root". لاحظ أنه في هذه المرحلة ، يمكنك أيضًا حذف مكون التطبيق تمامًا حيث يمكن عرض مكون مربع المعلومات مباشرةً في index.html ملف.

<!-- src/index.html →
<!doctype html>
<html lang="en">
<head> <meta charset="utf-8"> <title>AngularWebComponent</title> <base href="/ar/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body> <p><info-box></info-box></p> <p><info-box signupTitle="Amazing newsletter!" thankyouMessage="Thanks for signing up!"></info-box></p>
</body>
</html>

تعتبر سمات المكون مهمة ، لكنها تصبح أكثر أهمية لمكونات الويب ، لأنها الطريقة الوحيدة التي يمكن بها تكوين المكون. إذا كنت بحاجة إلى عرض بيانات أكثر تعقيدًا ، يمكنك تمرير سلسلة JSON أو عنوان URL. يمكنك أيضًا تنزيل بيانات JSON للتهيئة الإضافية باستخدام Angular HttpClient.

تعديل عملية البناء

إذا قمت بتشغيل خادم الويب Angular dev الآن ، فلن يعرض شيئًا ويظهر خطأ يبدو كالتالي:

Error: "The selector "app-root" did not match any elements"

وهذا يعني أن مكون جذر التطبيق لم يعد في index.html. هذا لأنه لا يزال لدينا AppComponent كجزء من تكوين تمهيد وحدة التطبيق.

لإصلاح ذلك ، سنحتاج أولاً إلى إزالة مكوِّن التطبيق ونموذجه ونمطه بالكامل:

rm src/app/app.component.*

بعد ذلك ، يجب علينا التحديث app.module.ts لإزالة مكون التطبيق.
نحتاج أيضًا إلى إضافة مكون مربع المعلومات كمكون إدخال. الفرق هو أنه يتم تقديم مكونات bootstrap بمجرد تحميل تطبيق Angular ، بينما لا يتم عرض مكونات الإدخال على الفور.

سنستخدم مُنشئ وحدة التطبيق لحقن مكون مربع المعلومات واستخدام ملف التسجيل الإلكتروني لتعريف مكون الويب كعنصر مخصص:

// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements'; import { InfoBoxComponent } from './info-box/info-box.component'; @NgModule({ declarations: [InfoBoxComponent], imports: [BrowserModule, FormsModule], providers: [], entryComponents: [InfoBoxComponent]
})
export class AppModule { constructor(injector: Injector) { const el = createCustomElement(InfoBoxComponent, { injector }); customElements.define('info-box', el); } ngDoBootstrap() {}
} 

رمز المُنشئ هو استبدال تكوين التمهيد. لاحظ أيضًا أننا نحدد CUSTOM_ELEMENTS_SCHEMA ، التي يتم توفيرها بواسطة @ angular / element. طريقة ngDoBootstrap مطلوبة أيضًا لبدء عملية العرض الزاوي.

بناء المشروع

يشبه بناء مشروع مكون ويب ما نقوم به لمشروع Angular نموذجي. نحن نجري ng serve للتنمية المحلية و ng build --prod. الفرق الرئيسي هو أن مكون التطبيق لم يعد موجودًا وهو index.html التي تجعل مكون الويب القابل للتضمين لدينا.

لذلك دعونا نبني المشروع:

ng build --prod

استخدام المكون في مشروع آخر

الآن لدينا بناء إنتاج مكون Angular الخاص بنا ، يمكننا استخدامه كمكون ويب في مشروع آخر.

نبدأ مشروعنا المستقل الجديد من خلال إنشاء مشروع جديد example دليل على المستوى الأعلى للمشروع. في هذا الدليل ، سيكون لدينا index.html ملف وسوف يحتوي على ملف info-box.js ملف JavaScript الذي أنتجناه ، إلى جانب ملف info-box.css ورقة الأنماط.

لننسخ ورقة الأنماط:

cp dist/angular-web-component/styles.*.css example/info-box.css

تقوم Angular ببناء العديد من ملفات JavaScript وملف النمط. نحتاج إلى أن يكون رمز JavaScript موجودًا في ملف واحد بحيث يمكن تضمينه بسهولة أكبر في مشروع آخر.

الطريقة التي نقوم بها بذلك هي ببساطة ربط ملفات JavaScript من dist دليل:

cat dist/angular-web-component/runtime-es2015*.js dist/angular-web-component/polyfills-es2015*.js dist/angular-web-component/main-es2015*.js > example/info-box.js

لتسهيل عملية البناء ، يمكننا تحديث scripts in package.json:

"scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod && cat dist/angular-web-component/runtime-es2015*.js dist/angular-web-component/polyfills-es2015*.js dist/angular-web-component/main-es5*.js > example/info-box.js && cp dist/angular-web-component/styles.*.css example/info-box.css", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" },

ثم يمكننا الجري npm run-script build.

سنقوم بإنشاء أساسي index.html يستخدم نسخة مسبقة من Bootstrap للتصميم.

في هذا المشروع الجديد سيكون لدينا الملفات التالية:

• index.html و
• معلومات-box.js
• معلومات-box.css

بالنسبة index.html، هذا هو كود HTML سيكون لدينا:

<!-- example/index.html →
<!DOCTYPE html>
<html>
<head> <title>Example Website with Embedded Angular Web Component</title> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="info-box.js"></script> <link rel="stylesheet" href="info-box.css">
</head>
<body> <div class="jumbotron"> <h1 class="display-4">Hello, world!</h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <hr class="my-4"> <p><info-box></info-box></p> <p><info-box signup-title="Amazing newsletter!" thankyou-message="Thanks for signing up!"></info-box></p> <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </div>
</body>
</html>

يتضمن إطار Bootstrap CSS ويمكنك أن ترى أنه تحت العنوان وأعلى الزر ، لدينا info-box مكون زاوي مضمن. لاحظ أن السمات التي أعطيت لها info-box استخدم شرطات بدلاً من علبة الكباب ، signup-title بدلا من signupTitle.

لرؤية هذا العمل ، علينا تثبيت http-server، وهو خادم ويب أساسي بدون تكوين وتشغيله من example دليل:

npm install --save-dev http-server
npx http-server example

افتح المتصفح إلى http: // localhost: 8080 وسترى صفحة المثال تظهر.

وفي الختام

تعد مكونات الويب طريقة رائعة لإنشاء أدوات قابلة لإعادة الاستخدام يمكن تضمينها في تطبيقات الويب أو مواقع الويب الأخرى. إذا كنت تريد مزيدًا من التفاعل على موقع الويب الذي تم إنشاؤه بشكل ثابت ، أو تحتاج إلى أداة تفاعلية وجذابة على موقع WordPress الخاص بك ، فأنت لم تعد مقيدًا بأي عملية بناء أو لغة أو إطار عمل كان يستخدمه المشروع.

يمكنك استخدام Angular مع TypeScript وإنشاء أدوات مصممة جيدًا يمكن استخدامها في أي مكان. تحقق من الرمز من هذا البرنامج التعليمي على جيثب.

Source: https://www.codementor.io/blog/angular-web-components-8e4n0r0zw7