۱۰ قابلیت مفید انگولار که احتمالاً از وجودشان اطلاع ندارید — راهنمای کاربردی

اگر مدت زمان زیادی است که مشغول نوشتن اپلیکیشن‌های انگولار هستید، شاید فکر کنید که با همه قابلیت‌های آن آشنا شده‌اید. اگر می‌خواهید در این زمینه مطمئن شوید، پیشنهاد می‌کنیم این مطلب را با موضوع معرفی 10 قابلیت مفید انگولار تا انتها مطالعه کنید.

علاوه بر فهرست قابلیت‌های مفید انگولار که در این راهنما ارائه شده است، یک ابزار نیز وجود دارد که قطعاً نمی‌توان نادیده گرفت و آن Bit (+) است. این ابزار موجب شده که اشتراک کد و همکاری روی کامپوننت‌های انگولار در پروژه‌های مختلف به فرایندی بسیار آسان تبدیل شود. با استفاده از Bit می‌توان یک UI منسجم طراحی کرد، سرعت توسعه را افزایش داد و خطاهای کد را به کمترین حد ممکن رساند.

1. Title

تگ Title به یک عنصر HTML گفته می‌شود که عنوان یک صفحه وب را تعیین می‌کند.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

تگ‌های Title در صفحه نتایج موتورهای جستجو به صورت عناوین قابل کلیک ظاهر می‌شوند. از این رو برای کاربردپذیری، سئو و اشتراک در رسانه‌های اجتماعی حائز اهمیت بالایی محسوب می‌شوند. اپلیکیشن‌های انگولار عنوان را از تگ <title>...</title> در فایل index.html گرفته و در پنجره مرورگر نمایش می‌دهند. با مراجعه به کامپوننت‌های مختلف در اپلیکیشن انگولار این عنوان تغییر نمی‌یابد. آیا می‌دانید که می‌توانید عنوان مرورگر را از داخل کامپوننت‌ها نیز تعیین کنید؟ انگولار یک سرویس Title در angular/platform-browser@ دارد. به این صورت صرفاً سرویس angular/platform-browser@ را در کامپوننت‌ها تزریق می‌کنیم و از متد setTitle برای تعیین عنوان بهره می‌گیریم.

1import { Title } from "@angular/platform-browser"
2@Component({
3    ...
4})
5export class LoginComponent implements OnInit {
6    constructor(private title: Title) {}
7    ngOnInit() {
8        title.setTitle("Login")
9    }
10}

زمانی که به LoginComponent بروید، عنوان مرورگر به صورت Login درمی‌آید. این فرایند را در همه کامپوننت‌های پروژه می‌توانیم تکرار کنیم به طوری که وقتی به هر کامپوننت می‌رویم، پنجره مرورگر تغییر یافته و عنوان آن کامپوننت را نمایش دهد.

2. Meta

اپلیکیشن انگولار ما به طور عمده موارد را از فایل index.html رندر می‌کند. تگ‌های متا در اپلیکیشن نیز جزء مواردی هستند که در فایل index.html تعیین می‌شوند. انگولار یک سرویس به نام Meta در angular/platform-browser@ دارد که به ما امکان می‌دهد تگ‌های متا را از داخل کامپوننت‌ها تنظیم کنیم. این قابلیت زمانی که به دنبال بهبود سئو و اشتراک اجتماعی هستیم، بسیار مفید واقع می‌شود. بر اساس مدخل ویکی‌پدیا:

عناصر Meta تگ‌های مورد استفاده در اسناد HTML و XHTML هستند که متادیتای ساخت‌یافته‌ای در مورد صفحه وب ارائه می‌کنند. تگ‌های متا بخشی از قطعه head صفحه وب هستند. چند عنصر Meta با خصوصیت‌های مختلف می‌توانند در یک صفحه منفرد مورد استفاده قرار گیرند. عناصر Meta می‌توانند برای تعیین توصیف، کلیدواژه‌ها و هر نوع فراداده دیگری که از طریق عناصر head دیگر و خصوصیت‌ها ارائه می‌شود، مورد استفاده واقع شوند.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

عناصر Meta اطلاعاتی در مورد صفحه وب ارائه می‌کنند که این اطلاعات از سوی موتورهای جستجو برای دسته‌بندی صحیح صفحه مورد استفاده قرار می‌گیرد. استفاده از سرویس Meta کاملاً آسان است. کافی است Meta را از angular/platform-browser@ ایمپورت کرده و در کامپوننت تزریق کنید.

1import { Meta } from "@angular/platform-browser"
2@Component({
3    ...
4})
5export class BlogComponent implements OnInit {
6    constructor(private meta: Meta) {}
7    ngOnInit() {
8        meta.updateTag({name: "title", content: ""})
9        meta.updateTag({name: "description", content: "Lorem ipsum dolor"})
10        meta.updateTag({name: "image", content: "./assets/blog-image.jpg"})
11        meta.updateTag({name: "site", content: "My Site"})
12    }
13}

به این ترتیب کامپوننت BlogComponent ما می‌تواند از سوی فیسبوک، توییتر و موارد مشابه رندر شود چون در مورد کامپوننت توضیح داده‌ایم، عنوان آن را ارائه کرده‌ایم و تصاویر را توصیف کرده‌ایم.

3. باطل‌سازی میان‌یابی قالب

همه ما از میان‌یاب پیش‌فرض قالب یعنی {{}} در قالب‌هایمان برای نمایش مشخصه‌های کامپوننت استفاده می‌کنیم. این میان‌یاب با {{ آغاز می‌شود و با }} پایان می‌یابد. اگر یک عضو را در بین این دو کروشه دوبل قرار دهیم از سوی DOM مرورگر رندر خواهد شد. اما شما می‌توانید این کاراکترهای مشخص‌کننده‌ی ابتدا و انتهای میان‌یابی پیش‌فرض را با نمادهایی که خودتان تعریف می‌کنید، جایگزین نمایید. کافی است این کاراکترها را در مشخصه interpolation property در دکوراتور Component تعریف کنید.

1@Component({
2    interpolation: ["((","))"]
3})
4export class AppComponent {}

بدین ترتیب آن میان‌یابی که در قالب AppComponent استفاده می‌شود به صورت (()) خواهد بود و دیگر از {{}} استفاده نمی‌شود.

1@Component({
2    template: `
3        <div>
4            ((data))
5        </div>
6    `,
7    interpolation: ["((","))"]
8})
9export class AppComponent {
10    data: any = "dataVar"
11}

در زمان رندر کردن "dataVar" به جای ((data)) رندر خواهد شد.

4. Location

با استفاده از سرویس Location می‌توان URL پنجره جاری مرورگر را دریافت کرد. به این ترتیب سرویس Location بسته به این که از کدام LocationStrategy استفاده شده است، یا مسیر URL را بازگشت می‌دهد و یا قطعه هش URL را بازمی‌گرداند. با استفاده از LocationStrategy می‌توان به یک URL مراجعه کرد، در تاریخچه پلتفرم به سمت جلو حرکت کرد، به سمت عقب رفت، URL مرورگر را عوض کرد، و آیتم فوقانی روی پشته تاریخچه پلتفرم را جایگزین نمود. سرویس Location را از CommonModule ایمپورت کرده و مورد استفاده قرار می‌دهیم:

1import { Location } from "@angular/common"
2@Component({
3    ...
4})
5export class AppComponent {
6    constructor(private location: Location) {}
7    navigateTo(url) {
8        this.location.go(url)
9    }
10    goBack() {
11        location.back()
12    }
13    goForward() {
14        location.forward()
15    }
16}

5. DOCUMENT

برخی اوقات می‌خواهیم مدل سند را به دست آوریم تا بتوانیم عملیات DOM را از اپلیکیشن انگولار اجرا کنیم. DOCUMENT این وظیفه را انجام می‌دهد. DOCUMENT یک توکن DI است که چارچوب رندرینگ اصلی را نمایش می‌دهد. در یک مرورگر این یک سند DOM است. بدین ترتیب عملیات DOM به روشی مستقل از محیط ارائه می‌شود.

فیلم آموزش نود جی اس، انگولار و مونگو دی بی – پیاده سازی احراز هویت کاربر با Angular، Node.js و MongoDB در فرادرس

کلیک کنید

نکته: ممکن است در زمانی که Application و Rendering Contexts یکسان نباشند، در Application Context به DOCUMENT دسترسی نداشته باشیم. برای نمونه این وضعیت در زمانی که اپلیکیشن را در یک Web Worker اجرا می‌کنیم، چنین حالتی مصداق دارد. فرض کنید یک عنصر در HTML داریم:

1<canvas id="canvas"></canvas>

بدین ترتیب می‌توانیم با تزریق DOCUMENT اقدام به دریافت HTMLElement بوم بکنیم:

1@Component({
2})
3export class CanvasElement {
4    constructor(@Inject(DOCUMENT) _doc: Document) {}
5}

سپس می‌توانیم HTMLElement بوم را با فراخوانی متد ()getElementById به دست آوریم:

1@Component({
2})
3export class CanvasElement {
4    constructor(@Inject(DOCUMENT) _doc: Document) {}
5    renderCanvas() {
6        this._doc.getElementById("canvas")
7    }
8}

این کار با استفاده از ElementRef و ارجاع قالب به طرز امنی قابل اجرا است، اما این روش صرفاً برای آشنایی شما مطرح شد.

هشدار: در زمان تعامل مستقیم با DOM باید کاملاً هوشیار باشید، زیرا این کار خطرناک است و می‌تواند ریسک‌های XSS به همراه داشته باشد.

6. دکوراتور Attribute@

ما در اپلیکیشن‌های انگولار به طور عمده از دکوراتورهای Component ،Module و Directive استفاده می‌کنیم. اما یک دکوراتور Attribute نیز داریم که به ما امکان می‌دهد یک رشته استاتیک را بدون هزینه عملکردی و با حذف بررسی تشخیص تغییر روی آن ارسال کنیم. مقادیر دکوراتور Attribute تنها یک بار بررسی می‌شوند و در ادامه هرگز بررسی نخواهد شد. این موارد به طور مشابهِ دکوراتور Input@ استفاده می‌شوند:

1@Component({
2    ...
3})
4export class BlogComponent {
5    constructor(@Attribute("type") private type: string ) {}
6}

7. HttpInterceptor

این یکی از قابلیت‌های بسیار قدرتمند انگولار محسوب می‌شود. این قابلیت HttpRequest را تفسیر کرده و به مدیریت آن می‌پردازد. اغلب مفسرها درخواست خروجی را پیش از ارسال به مفسر بعدی در یک زنجیره با فراخوانی next.handle(transformedReq) ترجمه می‌کنند.

در موارد نادری مفسرها ممکن است بخواهند یک درخواست را به طور کامل خودشان مدیریت کنند و به بقیه زنجیره ارسال نکنند. این رفتار مُجازی محسوب می‌شود. HttpInterceptor در موارد زیر استفاده می‌شود:

• احراز هویت
• کش کردن
• تبدیل URL
• ویرایش هدرها

استفاده از HttpInterceptor آسان است. ابتدا یک سرویس ایجاد کرده و اینترفیس HttpInterceptor را پیاده‌سازی می‌کنیم:

1@Injectable()
2export class MockBackendInterceptor implements HttpInterceptor {
3    constructor() {}
4    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
5        ...
6    }
7}

سپس آن را در ماژول اصلی درج می‌کنیم:

1@NgModule({
2    ...
3    providers: [
4        {
5            provide: HTTP_INTERCEPTORS,
6            useClass: MockBackendInterceptor,
7            multi: true
8        }
9    ]
10    ...
11})
12export class AppModule {}

8. AppInitializer

برخی اوقات مواردی پیش می‌آید که می‌خواهیم یک قطعه کد در زمان آغاز به کار اپلیکیشن انگولار اجرا شود و شاید برخی تنظیمات را بارگذاری کند، کش را بارگذاری کند، پیکربندی را بارگذاری کند و یا برخی بررسی‌های اولیه را انجام دهد. AppInitializer به ما کمک می‌کند این کار را انجام دهیم. APP_INITIALIZER تابعی است که درزمان آغاز به کار اپلیکیشن اجرا می‌شود. استفاده از آن آسان است. فرض کنید می‌خواهیم تابع runSettings در زمان آغاز به کار اپلیکیشن انگولارمان اجرا شود:

1function runSettingsOnInit() {
2    ...
3}

به ماژول اصلی AppModule می‌رویم و آن را به بخش providers در دکوراتور NgModule اضافه می‌کنیم:

1@NgModule({
2    providers: [
3        { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
4    ]
5})

9. Bootstrap Listener

Bootstrap Listener نیز همانند AppInitializer به ما امکان می‌دهد که به زمان بوت‌استرپ شدن یک کامپوننت گوش دهیم. همه Callback-های ارائه شده از سوی APP_BOOTSTRAP_LISTENER در زمان بوت‌استرپ شدن هر کامپوننت فراخوانی می‌شوند. دلایل زیادی برای تحت نظر گرفتن زمان بوت‌استرپ شدن کامپوننت‌ها وجود دارد. برای مثال ماژول Router از آن برای تخریب و ایجاد کامپوننت‌ها بر اساس ناوبری مسیر استفاده می‌کند. برای استفاده از APP_BOOTSTRAP_LISTENER آن را به بخش providers در AppModule با تابع callback اضافه می‌کنیم:

1@NgModule({
2    {
3        provide: APP_BOOTSTRAP_LISTENER, multi: true, 
4        useExisting: runOnBootstrap
5    }
6    ...
7})
8export class AppModule {}

10. NgPlural

اسامی جمع غالباً دردسرساز هستند. همواره باید اسامی مفرد و جمع را به دقت در اپلیکیشن‌های خود بر اساس مقدار منفرد یا جمعی مربوطه تعریف کنیم. برخی وب‌سایت‌ها از s جمع به صورت زیر استفاده می‌کنند:

1 component(s) removed
3 component(s) removed

بدین ترتیب خواننده خود باید در زمان نیاز s را اضافه کرده و در زمان عدم نیاز آن را حذف کند و نخواند. انگولار این مشکل را با استفاده از دایرکتیو NgPlural برای ما حل کرده است. NgPlural درختان فرعی DOM را بر اساس مقدار عددی حذف و اضافه می‌کند. به این ترتیب بحث اسامی جمع حل می‌شود.به این ترتیب درختان فرعی DOM که با مقدار عبارت سوئیچ منطبق باشند نمایش می‌یابند و یا در صورت عدم موفقیت آن از درختان فرعی DOM که با دسته‌بندی اسامی جمع عبارت سوئیچ مطابقت دارند استفاده می‌کند.

برای استفاده از این دایرکتیو باید یک عنصر کانتینر ارائه شود که خصوصیت [ngPlural] را روی عبارت سوئیچ تعیین می‌کند. عناصر داخلی دارای [ngPluralCase] بر اساس عبارت‌های خود نمایش می‌یابند:

1<p [ngPlural]="components">
2    <ng-template ngPluralCase="=1">1 component removed</ng-template>    
3    <ng-template ngPluralCase=">1">{{components}} components removed </ng-template>    
4</p>

همان طور که می‌بینید از دایرکتیو NgPlural برای حذف (s) در زمان نمایش تعداد کامپوننت‌های حذف شده استفاده کردیم:

1// if 1 component
21 component removed
3// if 5 components
45 components removed

سخن پایانی

در این مقاله با 10 مورد قابلیت مفید انگولار آشنا شدیم. برای ما بگویید که آیا با این قابلیت‌های انگولار از قبل آشنا بودید یا با مطالعه این راهنما آشنا شدید. همچنین در صورتی که قابلیت‌های دیگری می‌شناسید که فکر می‌کنید شناختشان برای خوانندگان مجله فرادرس مفید خواهد بود، در بخش نظرات این نوشته درج کنید.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های  JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش مقدماتی AngularJS برای ساخت اپلیکیشن‌های تک‌صفحه‌ای
• آشنایی با Angular CLI – به زبان ساده
• ساخت کتابخانه انگولار با Angular CLI — از صفر تا صد

==