التعرف على templates في angular#

الـtemplates  في angular هي ملفات html  نضع بداخلها عادة  متغيرات variables او حلقات loops وعمليات شرطية مثل if 

نفس الشيء مع تطبيقات الويب الكلاسيكية المكتوبة بالـ php + html فعوضا على حقن اكواد php داخل html هنا  في angular نقوم بنفس الشيء ولكن نحقن بداخل html   خلينا نقول نحقن angular داخل html بمساعدة الـtypescript لكي تبدو الصفحة حيوية وديمايكية مثلما هو الحال مع php او .NET 

هي في الحقيقة احنا نقوم بحقن شيء يسمى الـ directives داخل  الـ templates ..فالمشكلة ان عالم angular مليء بالمصطلحات الجديدة والغريبة التي قد تشتت تفكيرك بالبداية لذلك نحاول الابتعاد قدر المستطاع عن المصطلحات المعقدة   ونقوم بتسيط المعلومة خطوة بخطوة

نرجع الى مشروعنا الجديد الذي أنشأناه ولندخل الى ملف app.component.html خلينا نشوف محتواه  لكي نأخذ فكرة على محتوى الtemplates في angular

الملف ستجده بالمسار التالي  src/app/app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

الصفحة عادية تقريبا  ما يهمنا هو المتغير الموجود هنا

 <h1>
    Welcome to {{ title }}!
  </h1>

هدا يسمى متغير  {{ title }}   المتغير يتم وضعه عادة بداخل أقواس معقوفة ويتم التحكم فيه  من الـ component الخاص به وفي حالتنا هذا  فالـ component المسؤول عن هذا الTemplate هو app.component.ts ولو رجعنا اليه سنلاحظ وجود المتغير title 

لنرى 

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

@Component({
  selector: 'my-component',            
  templateUrl: './my.component.html',   //هذا التمبلت الذي تم ربطه بالمكون 
  styleUrls: ['./my.component.css']     // وهذا ملفت التنسيق الذي ربطناه بالمكون
})
export class AppComponent {
  title = 'My First Angular App!'; // هذا هو المتغير المربوط بالتمبلت  
}

جرب غير  هذا المتغير الى  أي شيء اخر وأحفظ التغيرات  

ولنغيره مثلا الى

title = 'My First website'; 

ستلاحظ بالمتصفح انه قد قام بتغيير العنوان بالصفحة وهنا نفهم ان المكون   يقوم بمعالجة البيانات ثم طباعتها  بالـtemplate  او بالـ view الخاص به