نگاهی بر سرویس زبانی Angular

سرویس زبانی انگولار

به کمک این سرویس می توان خطاها، راهنمایی ها و تکمیل کدهای ناقص را دریافت کرد و در قالب های انگولار حرکت کرد. چه این قالب ها در یک فایل خارجی HTML باشند و چه درون annotation ها یا decorator های یک رشته تعبیه شده باشند. اگر شما یک فایل انگولار را باز کنید، این سرویس به صورت خودکار متوجه می شود، فایل tsconfig.json شما را می خواند، تمامی قالب هایی که شما در برنامه ی خود دارید را پیدا می کند و پس از آن سرویس زبانی را در اختیار تمامی قالب هایی قرار می دهد که شما آن ها را باز می کنید.

تکمیل خودکار

این قابلیت می تواند سرعت برنامه نویسی شما را تا حد زیادی افزایش دهد. به این صورت که هنگامی که شما در حال تایپ کردن هستید، راهنمایی ها و گزینه هایی متنی را ارائه می کند. مثال زیر این قابلیت را در یک interpolation نشان می دهد. قبل از اینکه تایپ کردنتان تمام شود می توانید با فشردن دکمه ی tab از گزینه ی پیشنهادی استفاده کنید.

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

بررسی خطا

این سرویس این قابلیت را دارد که پیشاپیش اشتباهات موجود در کدتان را به شما یادآور شود. در مثال زیر Angular نمی داند که orders چیست و از کجا آمده است.

حرکت داخل کدها

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

استفاده از سرویس زبانی Angular در ویرایشگر خود

این سرویس در حال حاضر در Visual Studio Code و WebStorm موجود است.

Visual Studio Code

داخل Visual Studio Code این سرویس را از store موجود در آیکون منوی سمت چپ نصب کنید. اگر می خواهید به دنبال افزونه بگردید، می توانید از قابلیت باز کردن سریع ویژوال استودیو (⌘+P) استفاده کنید. بعد از باز کردن آن دستور زیر را وارد کنید.

ext install Angular.ng-template

سپس برای نصب این سرویس بر روی دکمه ی install کلیک کنید.

WebStorm

این سرویس زبانی را در WebStorm باید به صورت یک dev dependency نصب کنید. زمانی که Angular این dev dependency را مشاهده می کند، این سرویس زبانی را داخل WebStorm ارائه می کند. سپس WebStorm علاوه بر این سرویس زبانی، رنگ بندی های داخل قالب را همراه با قابلیت تکمیل خودکار کد در اختیار شما می گذارد.
در زیر dev dependency ای که برای package.json نیاز دارید را مشاهده می کنید:

devDependencies {
 "@angular/language-service": "^6.0.0"
 }

سپس در پنجره ی ترمینال در root پروژه تان devDependencies را با استفاده از npm یا yarn نصب کنید:

npm install
یا
Yarn
یا
yarn install

Sublime Text

برای استفاده از این نرم افزار ابتدا نیاز دارید که تایپ اسکریپت را مجاز کنید. آخرین نسخه ی تایپ اسکریپت را در دایرکتوری محلی node_modules نصب کنید:

npm install --save-dev typescript

سپس در همین محل سرویس زبانی Angular را نصب کنید:

npm install --save-dev @angular/language-service

از نسخه ی 2.3 به بعد، تایپ اسکریپت مدل پلاگین سرویس زبانی ای دارد که این سرویس زبانی می تواند از آن استفاده کند.
سپس در user preferences خود (Cmd+, or Ctrl+,) کد زیر را اضافه کنید:

"typescript-tsdk": "< path to your folder >/node_modules/typescript/lib"

نصب این سرویس در پروژه ی خود

سرویس زبانی Angular را می توانید به کمک دستور npm زیر در پروژه ی خود نصب کنید:

npm install --save-dev @angular/language-service

علاوه بر این، کد زیر را به بخش "compilerOptions" مربوط به tsconfig.json پروژه ی خود اضافه کنید.

"plugins": [ 
{"name": "@angular/language-service"}
 ]

توجه داشته باشید که این حالت تنها در فایل های .ts قابلیت های تکمیل کد و عیب یابی را ارائه می کند. اگر می خواهید قابلیت تکمیل کد را در فایل های HTML پیاده سازی کنید به یک پلاگین sublime اختصاصی نیاز دارید (یا اینکه بر روی پلاگین موجود اصلاحاتی را انجام دهید).

نحوه ی کارکرد این سرویس زبانی

زمانی که در کنار یک سرویس زبانی از یک ویرایشگر استفاده می کنید، یک فرآیند ویراستاری وجود دارد که یک سرویس یا فرآیند زبانی مجزا را آغاز می کند.که این سرویس یا فرآیند به طور مفصل یک RPC را بیان می کند. هر زمان که شما داخل ویرایشگری به تایپ کردن بپردازید این ویرایشگر اطلاعات را به فرآیند دیگری ارسال می کند تا بتواند حالت پروژه ی شما را ردیابی کند. وقتی که شما لیست تکمیلی ای را داخل یک قالب فعال می کنید، این ویرایشگر ابتدا قالب را به یک HTML AST یا درخت سینتکس انتزاعی تجزیه می کند. بعد از آن کامپایلر Angular تفسیر می کند که این قالب جزء کدام ماژول است، همچنین حیطه ای که شما در آن قرار دارید و انتخابگر کامپوننت را مشخص می کند. سپس این کامپایلر مکان نشانگر موس تان را در قالب AST مشخص می کند. بعد از آن به متن پی می برد و می تواند فرزندان احتمالی را نیز تعیین کند.
اگر داخل یک interpolation باشید، این کار اندکی پیچیده تر خواهد بود. اگر داخل یک div اینترپولاسیونی از {{data.---}} داشته باشید و بعد از data.--- به یک لیست تکمیلی نیاز داشته باشید، این کامپایلر برای پیدا کردن پاسخ نمی تواند از HTML AST استفاده کند. HTML AST تنها می تواند به کامپایلر بگوید که متنی با کاراکترهای "{{data.---}}" وجود دارد. این همان زمانی است که تجزیه گر قالب عبارت AST ای را تولید می کند. و آن را داخل قالب AST مستقر می کند. سرویس زبانی Angular بعد از این کار به data.--- داخل متن آن نگاه می کند و از سرویس زبانی تایپ اسکریپت می پرسد که چه چیزهایی عضو داده ها هستند. سپس تایپ اسکریپت لیستی از گزینه های احتمالی را برگشت می دهد.
برای اطلاعات دقیق تر در این باره به Angular Language Service API مراجعه کنید.