التعرف على مكونات مشروع Angular

-

محتوى مشروعنا سيكون بالشكل التالي


لنبدأ بالملف الأسهل

الملف index.html 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>myApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

الملف تقريبا مفهوم فهو مجرد صفحة html  ولايحتوي سوى على هده التعليمة الغريبة والغير مفهومة
    <app-root></app-root>
باختصار شديد خلينا نقول أن هذا الوسم عبارة عن  المكان الذي سيضع فيه الـ angular   المحتوى عند تشغيل البرنامج. وهذا المحتوى  عادة سيكون عبارة عن صفحات  قد يكون مكونات مثل header ..footer..widget   ..الخ ... 

ماهو الملف main.ts ؟
main.ts هي نقطة بداية تشغيل تطبيقك ، وتقوم بتجميع كافة بيانات التطبيق  اللازمة  .

الملف app.component.ts .. وش فيه ؟  ومادا يعني  الـ component أساسا ؟
عند دخولك لملف app.component.ts  ستجد هذا المحتوى 
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!';
}

ادن مادا نقصد بكلمة Component ؟ 
الـ Component عبارة عن مكون قد يعبر عن صفحة مثلا. أو قد يشير على جزء معين من الصفحة مثل الـ Header footer  او قد يكون widget ....فالمكون أو الـ Component  في العادة يتكون من ثلاثة ملفات أو ملفين ومرات قد يكون ملف واحد حسب الحاجة وحسب حاجة المطور نفسه
الـComponent بشكل عام يتكون من ملف دو امتداد HTML  وهو ملف الview  الدي يعرض محتواه    سواء كان صفحة او جزء  معين من الصفحة ..
يتكون ايضا الComponent من ملف اخر دو امتداد TS وهو ملف مكتوب بلغة typescript وهي تقنية  قريبة منjavascript  ومبنية عليها  الا انها كائنية التوجه عكس javascript
هذا الملف الاخير (ملف الـ ts) هو الذي يدير ملف ذو الامتداد .html  وهو الذي يتحكم بالمتغيرات المتواجده داخله هو الذي يقوم بمعالجته   ..اي انهما ملفان مترابطان وأي تغيير يحدث بالمكون  فيخبر ملف html  انه حدث ذلك التغيير  ويقوم بتنفيذه دون الحاجة لتحديث الصفحة  شيء شبيه بالـ 'ajax' لمن يعرفون الاجاكس
سواء كان هذا التغيير في variable او اي شيء اخر ..وهكذا أي ان ملف الـ TS هو القلب النابض الذي ينعش ملف HTML وجعله يبدو  حيوي  يمكن نسميه  controller  بالنسبة للناس الي مطلعة على نظام الـ MVC  فملف ذو امتداد ts هو يشبه controller  اما ملفه دو الامتداد html بمثابة الـ view الخاص به.
هناك ملف ثالث قد يحتاجه المطور لربطه مع المكون وهو ملف الـ style دو امتداد css   وهذا الملف يمثل الاستايل "التنسيق" الخاص بالمكون او بمعنى اخر ملف الـcss الخاص بملف الـhtml فقط.. يعني أنه لكل مكون له تنسيق css  خاص به ولكن يمكن ان ننشيء ملف style.css كلاسيكي عام ويكون ملف موحد يخص جميع المكونات . 
ويتم تعريف مكونات المكون بداخله بهذا الشكل ولا تنسى ان هدا الشكل سنسميه من الأن بالـ metadata وهو بمثابة بطاقة الهوية للـcomponent  
@Component({
  selector: 'my-component',            //  اسم المكون لكل مكون اسم خاص به نحتاجه  عند مناداته بمكان ما
  templateUrl: './my.component.html',  //  ملف العرض الخاص بالمكون
  styleUrls: ['./my.component.css']    // ملف الاستايل الخاص بالمكون
})
// هو الاسم الذي نعطيه للمكون وهو متغير حسب الحاجة طبعا ليس شرط نسميه هكذا my-component
  • Metadata: وهي التي تربط العلاقة بين كلاس المكون مع الـtemplate الخاص به  فمثلا الـ Metadata التي اسمها @Component  تقوم بتحديد رابط القالب (HTML) ورابط التنسيق (CSS) وكذلك الـ selector الذي نستعمله بمناداة المكون وتنفيذه في مكان ما بالصفحة 
محتوى الملف عبارة عن class  بسيط بداخله  متغير اسمه title 
لمن لم يفهم معنى الكلاس يمكنه التوجه  الى جهاز "لم افهم" والبحث عن البرمجة الكائنية التوجه oriented object programming 
مادا يعني هدا ؟
export
export يعني تصدير.. الـexport يعني تصدير ملف أو اظهار ملف  والـ import يعني جلب او استيراد الملف الية او استيراد الملف الفلاني  الى ملفي هذا 
عادة نستعمل export  عند انشاء كلاس فيجب ان نصدره او خلينا نقول نعلنه
ونحتاج الى import عندما نحتاج الى مكتبة معينة او نحتاج ملف معين أنشأناه مثل هذا  مثلا
import { Component } from '@angular/core';
 هنا نقول اجلب لي الكلاس Component .وستجده بالمكتبة او بالمكان '@angular/core'
 
طبعا نحتاج الى  الكلاس او الملف "component" لاجل تعريف هذا الكائن الغريب الذي يسمى بالـ Decorator
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
هذا الـ Decorator  يقوم بتوفير اعدادات البيانات الخاصة بالـ "component"  عندما نقول كومبننت فنحن نقصد بالمكون وعندما نقول مكون فنحن نقصد هذا الكلاس نفسه المسمى AppComponent  

هذا الـ Decorator  مهمته هي تحديد كيفية معالجة هده الـcomponent  حيث يتم استعماله بوقت التشغيل فهو يحتوى على مسار ملف الـhtml  ومسار الstyle الخاص بالكومبننت


الملف.angular-cli.json : يحتوى على اعدادات المشروع حيث يمكن من خلاله تحديد مثلا  اسم المشروع وتحديد مكان مجلد src ومجلد dist (مجلد dist هو المجلد الذي سيكون بداخله المشروع النهائي ولن تجده الان لاننا لم نقم بتوليده بعد وسنصل اليه بالدروس المتقدمة)
ايضا  يحتوى الملف angular-cli.json على مصفوفة styles + scripts   حيث يمكن وضع داخلها  ولنقل مثلا مسارات   الـ jquery  ومسارات css وغير ذلك من الـ plugins التي نرغب بتعريفها بمشاريعنا
 
 
نعود الان الى ملف app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-component',            //  اسم المكون لكل مكون اسم خاص به نحتاجه  عند مناداته بمكان ما
  templateUrl: './my.component.html',  //  ملف العرض الخاص بالمكون
  styleUrls: ['./my.component.css']    // ملف الاستايل الخاص بالمكون
})
// هو الاسم الذي نعطيه للمكون وهو متغير حسب الحاجة طبعا ليس شرط نسميه هكذا my-component
export class AppComponent {
  title = 'My First Angular App!';
}
 
يجب ان تعلم انه في تطبيقات الـangular يجب ان يتوفر على الأقل على  component أساسي  ولما نقول مكون اساسي فنحن نقصد " root component "    بالتطبيق لدلك قام مطوري angular بوضع  هذا الـcomponent الأساسي من اجل اقلاع التطبيق  وطبعا بالدروس القادمة سنتعلم كيف ننشيء الـcomponents  ..
فمهمة ملف الـ app.component.ts تكمن باقلاع التطبيق ويسمى بالمكون الأساسي  أو  root component  عادة يتوفر مكون اساسي واحد بكل تطبيق angular

تعليقات

إرسال تعليق