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

الـ Modules عبارة عن  حاويات "containers" هذه الحاويات تحتوي على تعريفات الملفات مختلفة  فيمكن أن تحتوي على مكونات "components" و ملفات خدمة"services"  وملفات أخرى يتم التصريح بها وتعريفها عند  الـ Module.  

تحتوي مشاريع الـangular  على الأقل على Modules  واحد   ويسمى  app.module.ts ويمكن انشاء موديلات حسب  الحاجة اليها وحسب نوعية المشروع فيمكن مثلا انشاء موديل خاص بلوحة تحكم الـusers وموديل خاص بالصفحات وموديل خاص بالproducts واخر خاص بالـ  news وهكذا ... ويمكن الاكتفاء بالموديل الرئيسي الدي يقدمه angular  فقط 

الملف app.module.ts. هذا الملف هو المكان الذي نقوم فيه بالتصريح داخله بالمكونات "components" والملفات المسؤولة عن الخدمات "services"  و حتى الـ modules التي نقوم بانشائها .

محتوى الملف app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

الـ BrowserModule : هو module مدمج مع angular حيث يوفر هذا الموديول عدد من الخدمات المحددة لمنصة المتصفح لذلك فإن الـ app.module.ts   "الموديل الأساسي"  يقوم باستيرادها عن طريق تعليمة "import"

BrowserModule  يتضمن تعليمات شائعة جدا سنتعرف عليها لاحقا  مثل تعليمة الشرطية (if)  والتي تعرف بـ NgIf وتعليمة الحلقات (foreach,for)  والتي تعرف في angular بـ NgFor يمكن استخدامها في القوالب الخاصة بمشاريع angular .. عموما لست بحاجة للتعمق بهذه التفاصيل .خد فقط رؤوس أقلام عن هذه المكتبات.

يمكن أن يبدأ تطبيق Angular الخاص بك بطرق عديدة ومختلفة  ولكن بما أننا تقوم بتشغيل المشروع على المتصفح "Navigator"   فسوف نحتاج الى هذا الـ module  لإقلاع التطبيق   والذي يتواجد بالمكتبة المكتبة التي تم تعريفها في  "platform-browser"

import { BrowserModule } from '@angular/platform-browser';

NgModule

NgModule عبارة عن سياق تجميعي نقوم فيه بتجميع مختلف الملفات التي نقوم بانشائها  بمشاريعنا مثل "components" , "services" والـ "modules"  , يوفر NgModule  عددًا من الميزات المفيدة لكل من بيئة العمل الأساسية والمطورين في Angular.  

مثال وهمي

     @NgModule({
        declarations: [ Component1,Component2,Component3 ], 
        imports: [ Module1,Module2 ], 
        providers: [Service1,Service2,Service3,Service4],
        bootstrap: [AppComponent]
        })