Angular Track

ليه المرحلة دي مهمة

Angular شغال في منتجات كتير في ال Enterprise والبنوك والحكومة، والوظايف دي مرتباتها كويسة وثابتة. و Angular الحديث مختلف جداً عن الكورسات القديمة: Standalone components و Signals وال Control flow الجديد و Zoneless change detection خلوه أبسط وأسرع.

تتعلم إيه

1. لازم تعرفه

   ال Components وال Templates وال Control flow

   علّم إنه خلص

   Standalone components، و Template syntax وال Bindings، وال Inputs وال Outputs، و @if و @for و @switch الجاهزين.

   تبقى خلصته لما

   • بتبني الفيتشرز ب Standalone components بس، من غير NgModules.
   • بتستخدم @for مع track وعارف ليه track مهم.

   المصادر

   • angular.dev — Tutorialsكورس
   • angular.dev — EssentialsDocs
2. لازم تعرفه

   ال Signals

   علّم إنه خلص

   signal و computed و effect و linkedSignal، وال Inputs المعمولة ب Signals: نظام ال Reactivity الحديث في Angular والطريق للتطبيقات ال Zoneless.

   تبقى خلصته لما

   • بتدير ال State في ال Component ب Signals، وبتطلّع القيم المشتقة ب computed.
   • عارف إمتى تستخدم Signal وإمتى RxJS أنسب.

   المصادر

   • angular.dev — SignalsDocs
3. لازم تعرفه

   ال Dependency injection وال Services

   علّم إنه خلص

   inject()، وال Providers ونطاقاتهم، وال Services للمنطق المشترك، و HttpClient مع Interceptors لل Auth وال Errors.

   تبقى خلصته لما

   • تقدر تشرح الفرق بين providedIn: 'root' و Provider على مستوى ال Component.
   • كتبت Interceptor بيضيف Auth header ويتعامل مع 401.

   المصادر

   • angular.dev — Dependency injectionDocs
4. لازم تعرفه

   RxJS

   علّم إنه خلص

   ال Observables وال Subscriptions، وال Operators اللي هتستخدمها كل يوم (map و switchMap و debounceTime و catchError و combineLatest)، والربط مع ال Signals.

   تبقى خلصته لما

   • تقدر تعمل بحث فيه debounce ب switchMap بيلغي ال Requests القديمة.
   • عمرك ما تسيب Subscription مفتوح (async pipe أو takeUntilDestroyed أو toSignal).

   المصادر

   • RxJS docsDocs
   • Learn RxJS operatorsتمرين
5. لازم تعرفه

   ال Routing وال Forms

   علّم إنه خلص

   Routes بتتحمّل lazy، و Guards و Resolvers، و Reactive forms ب Typed form controls و Custom validators.

   تبقى خلصته لما

   • ال Routes بتاعة الفيتشرز lazy-loaded.
   • تقدر تعمل Form ديناميكي ب Typed controls و Validation بين أكتر من field.

   المصادر

   • angular.dev — RoutingDocs
   • angular.dev — FormsDocs
6. اتعلمه بعدين

   Angular SSR وال CLI وال Testing

   علّم إنه خلص

   ال Server-side rendering وال Hydration ب Angular SSR، وال Angular CLI، وال Unit وال Component tests.

   تبقى خلصته لما

   • تقدر تضيف SSR ل App وتتأكد إن الصفحات بتترندر على ال Server.
   • ال Services وال Components عندك ليها tests ليها معنى.

   المصادر

   • angular.dev — Server-side renderingDocs
7. اختياري

   ال State management في المشاريع الكبيرة

   علّم إنه خلص

   Services معمولة ب Signals الأول، و NgRx (ومعاه ال Signal Store) لما فيتشرز كتير تشارك state معقدة. و Analog هو ال Meta-framework بتاع Angular لو عايز file-based routing.

   تبقى خلصته لما

   • تقدر تبرر إمتى مشروع محتاج NgRx وإمتى Signal service تكفي.

   المصادر

   • NgRx Signal StoreDocs
   • AnalogDocs

أخطاء شائعة

• إنك تتعلم من كورسات قبل 2023 مليانة NgModules و *ngIf. استخدم angular.dev مش مقالات قديمة.
• إنك تعمل subscribe جوه subscribe. استخدم RxJS operators عشان تركّب ال Streams.
• إنك تضيف NgRx ل App صغير. ابدأ ب Signals في Services.