أُعلِن مؤخرا عن الإصدار الجديد لإطار العمل المعروف أنغولار Angular الخاص بلغة البرمجة جافاسكريبت، والذي تقرر في وقت سابق إعطاؤه الرقم 4.
نسخة أنغولار 4 Angular الجديدة لم تأتي بتغييرات جذرية بطبيعة الحال، مثلما كان الوضع عند الإنتقال من الإصدار 1 إلى الإصدار 2، ولكنها جاءت بعدد من التحسينات والميزات الجديدة التي من شأنها زيادة سرعة وكفاءة تطبيقات الويب المدعومة من إطار العمل أنغولار 4.
1. إمكانية استخدام Else مع If في القوالب

في الإصدار Angular 2 كنا نستطيع إضافة الوسم *ngIf لعنصر معين داخل القالب Template وإظهار هذا العنصر أو إخفائه بناءً على التعبير داخل الوسم *ngIf :
<p *ngIf="isLoggedIn">You are logged in as</p>
1

<p *ngIf="isLoggedIn">You are logged in as</p>



في هذا المثال نقوم بإظهار هذا النص إذا كان المستخدم مُعَرَّفًا (Authenticated)، ولكن ماذا لو لم يكن الحال كذلك ؟ في الماضي كنا نضيف وسم *ngIf آخر للعنصر الثاني الذي نريد إظهاره في الحالة المعاكسة :
<p *ngIf="isLoggedIn">You are logged in</p> <p *ngIf="!isLoggedIn">You are not logged in</p>
1
2

<p *ngIf="isLoggedIn">You are logged in</p>
<p *ngIf="!isLoggedIn">You are not logged in</p>



ولكن مع الوسم الجديد Else ، الأمر بات أبسط :
<element *ngIf="[condition expression]; else [else template]"> </element>
1
2
3

<element *ngIf="[condition expression]; else [else template]">

</element>



<ng-template #hidden> <p>You are not logged in</p> </ng-template> <p *ngIf="shown; else hidden"> You are logged in! </p>
1
2
3
4
5
6

<ng-template #hidden>
<p>You are not logged in</p>
</ng-template>
<p *ngIf="shown; else hidden">
You are logged in!
</p>



2. وحدة الأنيميشن Animation Module

الأنيمشن كانت موجودة في إصدار أنغولار 2 ولكنها كانت مدمجة في نواة البرنامج @angular/core وكان يتم استدعاؤها على هذا النحو :
import { Component, OnInit // Animation modules animate, state, style, transition, trigger } from '@angular/core'
1
2
3
4
5
6
7
8
9

import {
Component,
OnInit
// Animation modules
animate,
state,
style,
transition,
trigger } from '@angular/core'



ولكن مع إصدار أنغولار 4، تقرر تخصيص وحدة خاصة منفصلة للأنيميشن فيتم استدعاؤها فقط في حال احتجنا إليها :
import {Component, OnInit} from '@angular/core'; //Animations modules import { animate, state, style, transition, trigger } from '@angular/animations'
1
2
3
4
5
6
7
8
9

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

//Animations modules
import {
animate,
state,
style,
transition,
trigger } from '@angular/animations'



3. Angular Universal

لطالما كان السيو SEO ووصول محركات البحث لمحتوى صفحاتنا أكبر المشاكل التي واجهت ولا تزال تواجه إطارات عمل جافاسكريبت المعروفة مثل أنغولار، React.js، Vue.js وغيرها. فالمحتوى (كود HTML) يتم توليده داخل المتصفح وليس من الخادم كما هو شائع.
Angular Universal هو أحد المشاريع التي جاءت بهدف إيجاد حل لهذه المعضلة، دوره هو توليد محتوى الصفحة كاملا داخل الخادم قبل إرسالها للمتصفح. هذا المشروع كان مدعوما من طرف عدد من المطورين من خارج الفريق الرسمي لأنغولار، ولكن مع قدوم أنغولار 4 قرر القائمون على هذا الإطار ضم Angular Universal بشكل رسمي، أي أنه أصبح الآن جزءً من إطار العمل Angular 4.
4. الشيفرة النهائية أصبحت أخف

قام مطورو أنغولار 4 بمجهود كبير لتحسين طريقة توليد كود الجافاسكريبت النهائي للمشروع، فنجحوا في جعله أخف ب 60% تقريبا عما كان عليه الحال من قبل، وستلاحظ الفرق بنفسك كلما كان حجم المشروع أكبر، حيث أكد عدد من المطورين أن الإنتقال من الإصدار 2 إلى الإصدار 4 خفض وزن ملفات المشروع النهائية بمئات الكيلو بايت.
5. أنغولار 4 متوافق مع تايب سكريبت 2.1 و 2.2

إطار العمل أنغولار 4 بات متوافقا مع إصدارات Typescript الأخيرة، هذا سيمكن المطورين من الإستفادة من الميزات الجديدة لهذا الأخير في مشاريعهم.
6. الخريطة المصدرية للقوالب Source maps for templates

هذه إضافة رائعة وعملية بشكل كبير، فعند التنفيذ قد يكون هناك خطأ في أحد القوالب داخل الصفحة، ودور هذه الخرائط المصدرية Source maps هو إيجاد مصدر الخطأ بشكل محدد، فكما نعلم جميعا، الشيفرة النهائية التي يتم توليدها لا تمكن من تتبع مصدر الخطأ بشكل دقيق.