ما المقصود بـ templateUrls و styleUrls في Angular؟
تعرف على أساسيات عرض HTML و CSS ، بالطريقة الزاويّة.
باستخدام Angular ، يمكنك فصل الصفحات أو مربعات الحوار أو
الأقسام الأخرى من تطبيقك إلى مكونات. تتكون المكونات في تطبيق Angular
بشكل أساسي من ملفات HTML و CSS و TypeScript.
في ملف TypeScript ، يمكنك إضافة أي منطق مطلوب حتى تعمل
واجهة المستخدم ، مثل استرداد البيانات من الخادم.
يمكنك أيضًا عرض HTML و CSS للمكون باستخدام TypeScript ،
من خلال تحديد سمات القالب والنمط. يمكنك استخدام templateUrl أو
styleUrls للارتباط بملفات HTML أو CSS خارجية.
ما هو النموذج و templateUrl في Angular؟
عند إنشاء المكون الخاص بك في Angular ، يمكنك عرض HTML له باستخدام قالب.
هناك طريقتان يمكنك من خلالهما كتابة قالب HTML الخاص بك:
- يمكنك كتابة كود HTML الخاص بك داخل قالب في ملف TypeScript نفسه.
- يمكنك كتابة كود HTML الخاص بك في ملف خارجي ، وربط ملف TypeScript بملف HTML هذا.
في مكون جديد ، يمكنك تعيين سمات "template" أو
"templateUrl" بناءً على مكان كتابة HTML.
1- أنشئ تطبيق Angular جديدًا .
2- في الطرفية للتطبيق الخاص بك ، قم بتشغيل الأمر
ng create component لإنشاء مكون جديد. استدعاء المكون الجديد "about-page":
ng generate component about-page
3- في app.component.html ، استبدل الشفرة الحالية بعلامات لمكونك الجديد:
<app-about-page></app-about-page>
4- افتح ملف about-page.component.ts . إذا لم يكن لديك الكثير من
تعليمات HTML البرمجية ، فيمكنك استخدام سمة القالب لكتابتها مباشرةً
داخل ملف TypeScript. استبدل مصمم Component بما يلي:
@Component({
selector: 'app-about-page',
template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>'
})
5- إذا كنت تريد تضمين قالب متعدد الأسطر ، فيمكنك استخدام علامات الاقتباس الخلفية بدلاً من ذلك:
@Component({
selector: 'app-about-page',
template: `<h2>About Page</h2>
<br>
<p>This is rendering the HTML from the TypeScript file!</p>`
})
6- في Terminal ، اكتب ng serve لتجميع التعليمات البرمجية الخاصة بك وتشغيلها في متصفح الويب.
افتح التطبيق الخاص بك على http : // localhost : 4200 / .
سيتم عرض كود HTML الخاص بك من ملف TypeScript على الصفحة.
7- في about-page.component.ts ، استبدل "template" بـ
"templateUrl" بدلاً من ذلك. قم بتضمين الارتباط إلى ملف HTML الخارجي للمكون.
يمكنك استخدام "templateUrl" إذا كان لديك كود HTML أكثر تعقيدًا يتطلب ملفه الخاص:
@Component({
selector: 'app-about-page',
templateUrl: './about-page.component.html'
})
8- أضف بعض تعليمات HTML البرمجية إلى ملف about-page.component.html :
<h2>About Page</h2>
<p>This is rendering the HTML from the HTML file!</p>
9- ارجع إلى متصفحك أو أعد تشغيل خدمة ng لإعادة تجميع التعليمات البرمجية الخاصة بك.
افتح التطبيق الخاص بك على http : // localhost : 4200 / .
يعرض المتصفح الآن HTML من ملف about-page.component.html .
ما هي الأنماط والأسلوب في Angular؟
على غرار HTML ، يمكنك استخدام "style" أو "styleUrls"
بناءً على المكان الذي تختار تخزين CSS فيه.
يمكنك تضمين CSS في كود TypeScript إذا كان لديك إعلانات CSS بسيطة للغاية.
بخلاف ذلك ، يمكنك استخدام "styleUrls" لربط ملف TypeScript
بملف CSS خارجي يحتوي على المزيد من الأنماط:
1- في تطبيق Angular الذي أنشأته مسبقًا ، افتح ملف about-page.component.ts .
أضف سمة "أنماط" إلى المكون. داخل "الأنماط" ، أضف نمط CSS للصفحة :
@Component({
selector: 'app-about-page',
templateUrl: './about-page.component.html',
styles: ['h2 {color:red}','p {color:green}']
})
2- في Terminal ، اكتب ng serve لتجميع التعليمات البرمجية الخاصة بك
وتشغيلها في متصفح الويب. افتح التطبيق الخاص بك على
http : // localhost : 4200 / لعرض النمط المحدد في ملف TypeScript.
3- إذا كان لديك الكثير من CSS ، فاستخدم "styleUrls" بدلاً من "styles" ،
لربط ملف TypeScript بملف CSS خارجي. في about-page.component.ts ،
استبدلComponent decorator بما يلي:
@Component({
selector: 'app-about-page',
templateUrl: './about-page.component.html',
styleUrls: ['./about-page.component.css']
})
4- أضف بعض أنماط CSS إلى about-page.component.css :
h2 {
color: blue
}
p {
color: darkorange
}
5- ارجع إلى متصفحك أو أعد تشغيل خدمة ng لإعادة تجميع التعليمات البرمجية الخاصة بك.
افتح التطبيق الخاص بك على http : // localhost : 4200 /
لعرض الأنماط المستخدمة من ملف CSS الخارجي.
عرض HTML للمكون في Angular
أنت الآن تعرف الطرق المختلفة التي يمكنك من خلالها عرض محتوى
HTML و CSS في تطبيق Angular. يمكنك تحديد الأسلوب الذي تريد
استخدامه بناءً على مدى تعقيد HTML و CSS.
إذا كنت مهتمًا ، يمكنك استكشاف كيفية تمرير البيانات بين
ملفات HTML و TypeScript لمكون Angular.
