فریمورک Angular Js بهترین برای برنامه نویسی سمت کاربر

فرشاد مراحم

Angular Js بهترین فریمورک برای برنامه نویسی سمت کاربر

هدف از تهیه این مقاله آشنایی با فریمورک قدرتمند Angular جهت ایجاد یک رابط کاربری جذاب مبتنی بر HTML/CSS/Jquery/TypeScript می باشد که یک تکنولوژی جدید و کاربردی می باشد و بسیاری از وب اپلیکیشن های قدرتمند از این فریمورک استفاده میکنند.

شاید معیار و انتخاب بعضی افراد در انتخاب یک زبان یا فریمورک ،کمپانی و حامی آن فریمورک باشد منظور من شرکت هایی هستند که از آن فریمورک حمایت میکنند. زبان Angular یک حامی قدرتمند دارد و محصول شرکت Google می باشد که پشتیبانی کاملی از این زبان دارد.

ولی معیار و دلایلی که قرار است ما در این مقاله برای شما توضیح بدهیم فراتر از حمایت یک کمپانی از یک زبان می باشد.

Angular JS چیست ؟

 Angular یک فریمورک ساختاریافته ، جاوا اسکریپتی ، متن باز (Open Source) جهت ساخت اپلیکیشن های تک صفحه ای به اصطلاح (single-page-applications = SPA) می باشد.

زبان اصلی و قالب این فریمورک HTML می باشد و میتوانیم با Syntax های موجود در زبان HTML اجزا و بخش های مختلف نرم افزار خودمان را توسعه بدهیم. انگولار یک فریمورک قدرتمند از لحاظ امنیتی بوده و به شما اجازه میدهد در هر لحظه، خروجی خود را مشاهده کنید. و توسط API ها میتوانید چندین برنامه و پروژه انگولاری را به هم مرتبط کنید و اهداف خود را پیاده سازی نمائید.

یکی دیگر از مهترین ویژگی های این فریمورک عدم نیاز به Refresh دوباره صفحه بعد از انجام یک عملیات در صفحه مربوطه می باشد برای درک بیشتر میتوان یک صفحه Registering را در نظر بگیرید بعد از وارد کردن اطلاعات لازم است تا دکمه مربوط به Insert را بزنیم. اکثر برنامه های تحت وب جهت Transfer کردن داده ها به سمت سرور، صفحه مورد نظر را Refresh میکنند ولی اگر Client Side با Angular باشد این بحث پیش نمی آید و بدون Refresh صفحه، داده ها ارسال میشوند.

Angular از معماری MVC مدل، ویو، کنترلر پشتیبانی میکند بطوریکه Model، ورودی را از کاربر دریافت و مدیریت میکند View وظیفه بازنمایی اطلاعات و Controller وظیفه پاسخ به ورودی و تعامل با مدل را بر عهده دارد.

اجزای تشکیل دهنده Angular Js 

در حالت کلی میتوان گفت این فریمورک از سه بخش اصلی تشکیل میشود : 

1) ng-app : استارت و تعریف یک اپلیکیشن Angular توسط این دستور درون کدهای HTML استفاده میشود

2) ng-model : با استفاده از این دستور میتوان مقدار یک فیلد متنی را به متغیری که در آنگولار تعریف شده است ، Bind کرد 

3) ng-bind : دستوری برای نمایش و update کردن متن در صفحه در حالت کلی توسط این دستور مقادیر از یک برنامه انگولار به ویو های HTML بایند میشود.

بحث مهم Type Script : استفاده از برنامه نویسی شی گرائی و تایپ اسکریپتی قدرت و اختیار بیشتری به توسعه دهندگان در محیط Angular میدهد استفاده از این تکنولوژی در این محیط موجب تفکیک پذیری بیشتر ، منظم و مرتب بودن کدها کنار یکدیگر شده است و همچنین اصول حرفه ای برنامه نویسی رعایت میشود که یکی از مزیت های مهم Angular می باشد.

تکنولوژی مهم Dependency Injection : یکی از مباحث مهم بین برنامه نویسان و توسعه دهندگان وب استفاده از مولفه ها و کدهای آماده در App های جدید ، در سایر پروژه ها و یا بخش های مختلف یک پروژه هستند تزریق وابستگی یا همان Dependency Injection باعث صرفه جویی در زمان میشود و براحتی از سورس کدهای آماده خود میتوانیم استفاده کنیم که Angular از این قابلیت پشتیبانی میکند.

بحث SEO در Angular : اگر انتخاب شما برای پیاده سازی Client Side پروژه استفاده از Angular می باشد باید گفت رابطه نسبتا ضعیفی با SEO دارد البته تیم Angular بسیار در تلاش برای رفع این مشکل هستند و تا حدی برطرف شده است ولی به نتیجه ایده آل و مطلوب نرسیده است.

Angular / Cli چیست ؟

رابط خط فرمان انگولار یا (CLI) ابزاری بسیار کاربردی که به توسعه دهندگان Angular کمک میکند که سازماندهی کد بیشتری داشته باشند و اپلیکیشن‌ها را به روشی سریع‌تر طراحی کنند و تمرکز اصلی بر برنامه نویسی داشته باشند و بخش های مختلفی همچنن تست کدها، بوجود آمدن ارور و مشاهده خطاها را ابزار CLI انجام میدهد.دلایل مهمی که مارا به استفاده از Angular / CLI مجبور میکند وجود Pattern های برنامه نویسی ، Argument های آماده برای سبک کدنویسی که موجب خوانایی و نگهداشت مناسبی از کدها میشوند و پشتیبانی را آسان میکند، می باشد.

ساخت یک پروژه Angular 

برای ساخت یک پروژه Angular لازم است تا یک محیط برای کدنویسی داشته باشیم. Visual studio code میتواند بهترین انتخاب باشد ، یک محیط Open Source که قابلیت اجرا بر روی سیستم عامل های لینوکس، مک و ویندوز را دارد که از تکنولوژی هایی همچون تکمیل کد هوشمند (intelligent code completion)، برجسته سازی سینتکس(syntax highlighting)، بازسازی کد (code refactoring)، عیب یابی (debugging) و تکه کدها (snippets) پشتیبانی میکند.

ساختار اصلی ویژوال استودیو کد با زبان های برنامه نویسی ++C، نود.جی‌اس(Node.js)، فریم ورک الکترون که یک چارچوب نرم‌افزاری می باشد و دیگر تکنولوژی‌های توسعه وب همچون موناکو نوشته شده‌است. حجم کمتر و برخورداری از یک مخزن بزرگی از افزونه‌ها موجب شده تا تبدیل به یک رقیب جدی برای دیگر ویرایشگرها در این بخش شود. این نرم‌افزار توسط مایکروسافت توسعه داده شده و هم‌اکنون به‌طور رایگان و Open Source در دسترس است.

در این محیط براحتی میتوان یک پروژه ایجاد کرد و با استفاده از تکنولوژی های مطرح شده در Angular / CLI کدهای HTML , CSS , Jquery را نوشت و یک SPA تولید کرد.