10 ویژگی مفید Angular که احتمالاً هرگز استفاده نکرده اید!

1.سرویس Title

تگ title یک عنصر HTML است که عنوان یک صفحه وب را مشخص می کند. تگ های title در صفحات نتایج موتورهای جستجو (SERP) در قالب عنوان قابل کلیک برای یک نتیجه نمایش داده می‌شوند. آنها برای افزایش usability ، سئو و اشتراک گذاری در شبکه های اجتماعی بسیار مهم هستند.

برنامه های Angular ، عنوان را در پنجره مرورگر از تگ <title>...</title>داخل index.html تنظیم می کنند. پیمایش بین کامپوننت ها در Angular عنوان را تغییر نمی دهد.

آیا می دانید، می توانید عنوان مرورگر را از روی کامپوننت ها تنظیم کنید؟

انگولار یک سرویس Title در angular/platform-browser@ دارد. ما فقط سرویس Title را در کامپوننت خود تزریق می کنیم و از متد setTitle برای تنظیم عنوان استفاده می کنیم.

import { Title } from &quot@angular/platform-browser&quot
@Component({
    ...
})
export class LoginComponent implements OnInit {
    constructor(private title: Title) {}    
    ngOnInit() {
        title.setTitle(&quotLogin&quot)
    }
}

وقتی به LoginComponent هدایت می‌شویم، عنوان مرورگر روی «Login» تنظیم می‌شود.

می‌توانیم این موضوع را در تمام کامپوننت های پروژه‌مان تکرار کنیم تا وقتی به آن‌ها هدایت می‌شوند، پنجره مرورگر تغییر کند تا عنوان کامپوننت را نمایش دهد.

2.سرویس Meta

برنامه انگولار ما چیزهایی را رندر میکند که عمدتاً از index.html می آیند. متا تگ هایی که برنامه ما خواهد داشت همان است که در index.html تنظیم شده است. Angular دارای یک سرویس Meta در angular/platform-browser@ است که به ما امکان می دهد متا تگ ها را از کامپوننت های خود تنظیم کنیم.

این از نظر سئو و به اشتراک گذاری صفحه مربوط به کامپوننت در رسانه های اجتماعی بسیار مفید است.

طبق ویکی پدیا:

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

عناصر متا اطلاعاتی در مورد صفحه وب ارائه می دهند که می تواند توسط موتورهای جستجو برای دسته بندی صحیح صفحه مورد استفاده قرار گیرد.

استفاده از آن بسیار آسان است، فقط Meta را ازangular/platform-browser@ تزریق کرده و آن را در کامپوننت استفاده کنید.

import { Meta } from &quot@angular/platform-browser&quot
@Component({
    ...
})
export class BlogComponent implements OnInit {
    constructor(private meta: Meta) {}    
    ngOnInit() {
        meta.updateTag({name: &quottitle&quot, content: &quot&quot})
        meta.updateTag({name: &quotdescription&quot, content: &quotLorem ipsum dolor&quot})
        meta.updateTag({name: &quotimage&quot, content: &quot./assets/blog-image.jpg&quot})
        meta.updateTag({name: &quotsite&quot, content: &quotMy Site&quot})
    }
}

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

3. بازنویسی Template Interpolation

همه ما از Template Interpolation پیش‌فرض {{}}در templateهای خود برای نمایش property ها در کامپوننت استفاده می‌کنیم.

اگر یک عضو property را بین آنها قرار دهیم، در DOM مرورگر نمایش داده می شود.

آیا می‌دانید که می‌توانیم جداکننده‌های شروع و پایان را به دلخواه خودمان تغییر دهیم؟ ساده است، آن را در ویژگیinterpolationموجود در Component decorator مشخص کنید.

@Component({
    interpolation: [&quot((&quot,&quot))&quot]
})
export class AppComponent {}

درون یابی برای استفاده در صفحه AppComponent به شکل"(())"است و دیگر"{{}}" نخواهد بود .

@Component({
    template: `
        <div>
            ((data))
        </div>
    `,
    interpolation: [&quot((&quot,&quot))&quot]
})
export class AppComponent {
    data: any = &quotdataVar&quot
}

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

4.سرویس Location

ما می توانیم URL پنجره فعلی مرورگر را با استفاده از سرویس Location دریافت کنیم. بسته به اینکه کدام LocationStrategy استفاده می شود، Locationیا در مسیر URL یا بخش هش URL باقی می ماند.

با Location، می‌توانیم به یک URL برویم، در تاریخچه پلتفرم به جلو حرکت کنیم، در تاریخچه پلتفرم به عقب برگردیم، URL مرورگرها را تغییر دهیم.

ما سرویس Location را از CommonModule تزریق می کنیم تا از آن استفاده کنیم.

import { Location } from &quot@angular/common&quot
@Component({
    ...
})
export class AppComponent {
    constructor(private location: Location) {}    

    navigateTo(url) {
        this.location.go(url)
    }    
   goBack() {
        location.back()
    }    
   goForward() {
        location.forward()
    }
}

5.ویژگی DOCUMENT

گاهی اوقات می خواهیم مدل سند را دریافت کنیم تا بتوانیم عملیات روی DOM را در برنامه Angular خود انجام دهیم.

توکن DOCUMENT دقیقاً همین را ارائه می دهد. DOCUMENT یک توکن DI است که محتوای اصلی رندر را نشان می دهد. در مرورگر، این سند DOM است. این عملیات DOM را به روشی environment-agnostic ارائه می دهد.

توجه: زمانی که محتوای برنامه ما و محتوای رندر شده یکسان نیستند (مثلاً هنگام اجرای برنامه در Web Worker) ممکن است Document در Context برنامه در دسترس نباشد.

فرض کنید یک عنصر در فایل html خود داریم:

<canvas id=&quotcanvas&quot></canvas>

با تزریق DOCUMENT می توانیم HTMLElement مربوط به canvas را بدست آوریم:

@Component({})
export class CanvasElement {
    constructor(@Inject(DOCUMENT) _doc: Document) {}    
    renderCanvas() {
        this._doc.getElementById(&quotcanvas&quot)
    }
}

ما می توانیم با خیال راحت این کار را با استفاده از ElementRef و template reference انجام دهیم، اما شما این روش را هم یاد گرفته اید.

هشدار: با احتیاط قدم بردارید! تعامل مستقیم با DOM خطرناک است و می تواند خطرات XSS را ایجاد کند.

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

ما عمدتاً از decoratorها برای کامپوننت، ماژول و دایرکتیوها در برنامه Angular خود استفاده کرده ایم.

ما این Attribute decorator را داریم که به ما امکان می دهد یک رشته استاتیک را بدون تاثیر منفی در performance با حذف change detection روی آن، بفرستیم.

مقادیر Attribute decorator یک بار بررسی می شوند و دیگر بررسی نمی شوند. آنها مشابه Input decorator@ استفاده می شوند:

@Component({
    ...
})
export class BlogComponent {
    constructor(@Attribute(&quottype&quot) private type: string ) {}
}

7.واسط HttpInterceptor

این یک ویژگی بسیار قدرتمند در Angular است. interceptor هاHttpRequestرا رهگیری و مدیریت می کنند.

اکثر interceptorها درخواست خروجی را قبل از ارسال آن به interceptor بعدی در زنجیره، با فراخوانی next.handle(transformedReq)تغییر می دهند .

در موارد نادر، interceptorها ممکن است بخواهند خودشان یک درخواست را به طور کامل رسیدگی کنند و به بقیه زنجیره واگذار نکنند. این رفتار مجاز است.

یک HttpInterceptor را می توان در موارد زیر استفاده کرد:

• احراز هویت
• فرآیند Caching
• پیاده سازی Fake backend
• تبدیل URL
• اصلاح header ها

استفاده از آن ساده است، ابتدا یک سرویس ایجاد کنید و رابط HttpInterceptor را پیاده سازی کنید.

@Injectable()
export class MockBackendInterceptor implements HttpInterceptor {
    constructor() {}    
    intercept(req: HttpRequest<any>, next: HttpHandler): 
    Observable<HttpEvent<any>> {
        ...
    }
}

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

@NgModule({
    ...
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MockBackendInterceptor,
            multi: true
        }
    ]
    ...
})
export class AppModule {}

8.ویژگی AppInitializer

گاهی اوقات می‌خواهیم زمانی که برنامه Angular ما شروع به کار می‌کند، یک قطعه کد اجرا شود، شاید برخی تنظیمات بارگیری شود، حافظه cache بارگیری شود، پیکربندی‌ها بارگیری شود یا برخی از بررسی‌ها انجام شود. توکن AppInitialzer در این مورد کمک می کند.

تابعAPP_INITIALIZER: تابعی که با مقداردهی اولیه (initialized) برنامه اجرا می شود.

کاربردش ساده است. می خواهیم این تابع runSettings در راه اندازی برنامه Angular ما اجرا شود:

function runSettingsOnInit() {
    ...
}

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

@NgModule({
    providers: [
        { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
    ]
})

9.ویژگی Bootstrap Listener

درست مانند Angular ، AppInitializer دارای یک ویژگی است که به ما امکان می دهد زمانی که یک کامپوننت در حال بوت استرپ شدن است به آن گوش دهیم. اینAPP_BOOTSTRAP_LISTENER است.

تمام متدهای ارائه شده از طریق این توکن برای هر کامپوننتی که بوت استرپ شده است فراخوانی می شود.

ما دلایل زیادی برای گوش دادن به bootstrapping کامپوننت ها داریم، به عنوان مثال، ماژول Router از آن برای تخریب و ایجاد کامپوننت ها بر اساس route navigation استفاده می کند.

برای استفاده APP_BOOTSTRAP_LISTENER، آن را با تابع callback به بخش providers در AppModule خود اضافه می کنیم:

@NgModule({
    {
        provide: APP_BOOTSTRAP_LISTENER, multi: true, 
        useExisting: runOnBootstrap
    }
    ...
})
export class AppModule {}

10.ویژگی NgPlural

تکثر Pluralization در حوزه خود مشکلی است. ما باید همیشه گرامر را در برنامه هایمان بر اساس مقدار مفرد/جمع (singular/plural) به درستی تعریف کنیم. برخی از وب سایت ها از (s) استفاده می کنند. مثل:

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

این بر عهده خواننده است که هنگام خواندن آن (s) را حذف کند یا (s) را اضافه کند :)

در Angular، دستورالعمل NgPlural برای مدیریت تعداد جمعی در قالب‌ها استفاده می‌شود. این دستورالعمل یکی از ویژگی‌های بین‌المللی‌سازی (i18n) Angular است که به توسعه‌دهندگان امکان می‌دهد برنامه‌ها را به چند زبان پشتیبانی کرده و ویژگی‌های خاص زبانی مانند اعداد جمع را مدیریت کنند.

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

<p [ngPlural]=&quotcomponents&quot>
    <ng-template ngPluralCase=&quot=1&quot>1 component removed</ng-template>    
    <ng-template ngPluralCase=&quot>1&quot>{{components}} components removed 
     </ng-template>    
</p>

ببینید، ما از دستورالعمل NgPlural برای حذف (s)هنگام نمایش تعداد "کامپوننت های حذف شده" استفاده کرده ایم. نمایش خواهد داد:

// if 1 component
1 component removed
// if 5 components
5 components removed

دستورالعمل NgPlural معمولاً همراه با دستورالعمل NgSwitch استفاده می‌شود تا محتوا را براساس قوانین تعداد جمع زبان مورد نظر نمایش دهد. این دستورالعمل ورودی عددی را دریافت می‌کند و امکان تعریف قالب‌های مختلف بر اساس شکل جمع این عدد را فراهم می‌کند.

در ادامه نمونه‌ای از نحوه استفاده از NgPlural در یک قالب Angular آورده شده است:

<div [ngSwitch]=&quotmessageCount&quot>

  <ng-container *ngPlural=&quotmessageCount&quot>

    <ng-container *ngPluralCase=&quot'=0'&quot>No messages.</ng-container>

    <ng-container *ngPluralCase=&quot'=1'&quot>1 message.</ng-container>

    <ng-container *ngPluralCase=&quot'other'&quot>{{ messageCount }} messages.</ng-container>

  </ng-container>

</div>

در این نمونه، متغیری به نام messageCount وجود دارد که تعداد پیام‌ها را نمایش می‌دهد. دستورالعمل ngSwitch برای ارزیابی مقدار messageCount استفاده شده است و دستورالعمل ngPlural درون دستورالعمل ngSwitch استفاده شده است تا قالب‌های مختلف بر اساس شکل جمع مقدار تعریف شود.

- دستورالعمل ngPluralCase با مقدار '=0' برای مدیریت حالتی استفاده می‌شود که messageCount برابر با صفر است.

- دستورالعمل ngPluralCase با مقدار '=1' برای مدیریت حالتی استفاده می‌شود که messageCount برابر با یک است.

- دستورالعمل ngPluralCase با مقدار 'other' برای مدیریت سایر حالت‌ها استفاده می‌شود.

دستورالعمل NgPlural قوانین مختلف تعداد جمع بر اساس زبان مورد نظر شما را پشتیبانی می‌کند. به طور پیش‌فرض، ویژگی بومی‌سازی Angular پشتیبانی از زبان‌های مختلفی را فراهم می‌کند. با این حال، شما همچنین می‌توانید قوانین تعداد جمع را سفارشی کنید یا با استفاده از کتابخانه‌های بومی‌سازی Angular پشتیبانی از زبان‌های اضافی را اضافه کنید.

لازم به ذکر است که برای استفاده از دستورالعمل NgPlural، باید بسته بین‌المللی‌سازی (i18n) Angular را در پروژه Angular خود نصب و به درستی پیکربندی کنید.

این مقاله برگردان شده یک مقاله معتبر درباره این موضوع است.برای دسترسی به مقاله منبع اینجا کلیک کنید.

برای مشاهده پست های بیشتر و ارتباط با من از طریق لینکدین اینجا کلیک کنید.

امیدوارم براتون مفید واقع شده باشه.