مقدمه‌ای بر آموزش انگولار جی‌اس: انگولار جی اس چیست، چه مزایایی دارد، قابلیت‌ها و ویژگی‌های آن و راهنمای دانلود و نصب

انگولار جی‌اس یک فریمورک جاوا اسکریپت است که مطمئناً نامش را این روزها زیاد می‌شنوید. حتماً این نام‌ها هم به گوشتان آشناست: پایتون (Python)، روبی (Ruby on Rails)، ری‌اکت (React) و ریداکس (Redux JS).

باید بگوییم که اگر در کنار زبان‌های قدیمی‌تر مثل جاوا (Java) و C++، به یکی از نام‌های بالا نیز مسلط باشید، به راحتی می‌توانید شغلی مناسب پیدا کنید. به خاطر داشته باشید که باید در جریان ترندهای روز برنامه‌نویسی باشید تا بتوانید دانش خود را در این زمینه به‌روز نگه دارید.

توجه کنید که شرکت‌ها کارمندانی را استخدام می‌کنند که بهره‌وری بالایی دارند. مطمئناً کارمندی از همکارانش بهتر است که زودتر بتواند کدی را بنویسید و خروجی موردنظر را در زمان کمتری تحویل دهد.

با توجه به مقتضیات حال حاضر و با در نظر گرفتن زمانی که لازم دارید تا در یک زبان برنامه‌نویسی حرفه‌‌ای شوید، Angular JS بهترین گزینه برای شروع است.

برای شروع بیایید کمی از انگولار جی‌اس بیشتر بدانیم.

 

انگولار جی‌اس چیست؟

AngularJS یک فریمورک جاوا اسکریپت است که در سمت کلاینت کار می‌کند و از آن برای توسعه‌ی اپلیکیشن‌های تحت وب استفاده می‌شود.

به زبان ساده‌تر، مرورگر کدی را که می‌نویسید، اجرا می‌کند، نه سرور. انگولار جی‌اس یکی از فریمورک‌های معروف و قدرتمند جاوا اسکریپت است که از آن در توسعه‌ی SPAها (اپلیکیشن‌های تک صفحه‌ای (Single Page Application)) و اپلیکیشن‌های تجاری استفاده می‌شود.

به همین دلیل، بسیاری از شرکت‌های برنامه‌نویسی، انگولار جی‌اس را جزو ملزومات می‌دانند.

پیشنهاد فرانش به شما
چگونه یادگیری جاوا اسکریپت را شروع کنیم؟

 

انگولار جی‌اس در چه سالی معرفی شد؟

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

می‌توانیم برنامه‌ای را، که در یک ماشین نوشته‌ایم، در دسترس تمام کاربران شبکه‌ی جهانی وب قرار دهیم. یکی از مشکلات مطرح در این زمینه در زمان پُست کردن یک صفحه رخ می‌دهد و این مشکل تأخیراتی را در ارتباطاتِ بین سرور و کلاینت ایجاد می‌کند.

Misko و Adam Abrons در سال ۲۰۰۹ انگولار جی‌اس را نوشتند تا راه‌حلی برای مشکلات کارایی باشد. بعد از آن گوگل مسئولیت نگه‌داری آن را به‌عهده گرفت.
انگولار جی‌اس پروژه‌ای متن باز (Open Source) است، پس می‌توانید به صورت رایگان از آن استفاده کنید و آن را به اشتراک بگذارید.

پس از معرفی انگولار جی‌اس، اپلیکیشن‌های تحت وب بسیاری با استفاده از آن تولید شدند. می‌توانید نام بسیاری از این اپلیکیشن‌ها را در وبسایت انگولار جی‌اس ببینید.

 

چرا از انگولار جی اس استفاده کنیم؟

در حال حاضر فریمورک‌های جاوا اسکریپت بسیاری برای استفاده موجودند، مثل React JS، Node JS، Backbone JS و غیره. با این وجود دلیل برتری انگولار جی‌اس بر سایر فریمورک‌ها چیست؟

وقتی از انگولار جی‌اس برای نوشتن صفحات وب استفاده می‌کنید، صفحات وب به صورت مداوم و با اعمال مختلفی که کاربر انجام می‌دهد، به‌روز رسانی نمی‌شود. این مسئله برای ارائه‌ی سریع‌تر خدمات به کاربر بسیار ضروری است.

آموزش رایگان انگولار ۸ Angular پروژه محور

 

اما انگولار جی‌اس چگونه این کار را عملی می‌کند؟

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

  1. Dependency Injection

Dependency Injection در مهندسی نرم افزار، به معنای رد و بدل کردن شئ بین اپلیکیشن و کلاینت است.

Injection یعنی یک Dependency (مثلاً یک سرویس) را به یک شئ مستقل (مثلاً یک کلاینت) بفرستیم تا از آن استفاده کند. انگولار جی‌اس چندین کامپوننت اصلی را برای انجام ساده‌تر DI درنظر گرفته است.

  1. Model View Controller (معماری MVC)

از انگولار جی‌اس برای نوشتن Rich Internet Application (RIA) استفاده می‌شود و با استفاده از معماری MVC در انگولار جی‌اس می‌توانیم از دیتا بایندینگ دو سویه (Two-Way Data Binding) استفاده کنیم.

شمایی ساده از این معماری را در شکل زیر می‌بینید:

مدل MVC در Angular Js

تصویر: جریان کاری فریمورک AngularJS MVC، View با استفاده از عمل کاربر Controller را فراخوانی می‌کند، Controller (تابع JS)، مدل را به روز رسانی می‌کند، Model (شئ $scope)، دیتا بایندینگ دو سویه، View (المنت DOM)، تابع $scope می‌تواند بر اساس تعاملات کاربر فراخوانی کند.

ما به عنوان یک برنامه‌نویس تنها کافی است که کدهایمان را به سه قسمت Model، View و Controller تقسیم کنیم. انگولار جی‌اس باقی کارها، مثل مدیریت کامپوننت‌ها (Component) و اتصالشان‌ به هم را، به صورت خودکار انجام می‌دهد.

  1. دیتا بایندینگ دو سویه

تغییرات نرم افزار باید رسپانسیو (Responsive) باشند و تغییرات اعمال شده در سیستم و واسط کاربری باید با دقت و سرعت بالا بر هم اثر بگذارند.

انگولار جی اس با سنکرون کردن Model و View، نوعی از بایندینگ را عرضه می‌کند.

  1. تست

جالب توجه است که انگولار جی‌اس از همان ابتدا به گونه‌ای طراحی شد که امکان تست را نیز برای برنامه نویسان فراهم کند.

می‌توانیم با خیالی آسوده هر یک از کاپوننت‌ها را با استفاده از Unit Testing یا End-to-End Testing تست کنیم. هم‌چنین می‌توانیم به منظور تست، اپلیکیشن را به مرورگرهای مختلف منتقل کنیم.

  1. کنترل رفتار المنت‌های DOM

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

به زبان ساده‌تر، در انگولار جی‌اس ماژولاریتی داریم و می‌توانیم با کمک قابلیت‌هایی مثل Directiveها و Filterها انعطاف و شخصی‌سازی بیشتری را در کد داشته باشیم.

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

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

 

مطالبی که قبل از یادگیری جی اس (AngularJS) باید بدانید

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

می‌توانید از HTML و CSS برای طراحی صفحات وب خودتان استفاده کنید و از همین صفحات نیز برای تست استفاده کنید. برای استفاده از انگولار جی‌اس، داشتنِ دانشی اولیه از جاوا اسکریپت بسیار مهم است.

بنابراین توصیه‌ی ما به شما این است که پیش از شروع یادگیری، کمی درباره‌ی HTML، CSS و مفاهیم پایه‌ی جاوا اسکریپت بدانید.

پیشنهاد فرانش به شما
۵ دلیل برای یاد گرفتن HTML

 

ویژگی‌ها و قابلیت‌های Angular JS

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

معماری MVC

برای اینکه نحوه‌ی عملکرد کد را بفهمید، باید معماری Model-View-Controller انگولار جی‌اس را یاد بگیرید. 

MVC اساس انگولار جی‌اس است و از این جهت از اهمیت بالایی برخوردار است. وقتی Eventای رخ می‌دهد، بخش Controller کد ورودی Event را دریافت می‌کند. این ورودی شامل درخواست‌های گوناگونی برای اپلیکیشن است.

بخش Model کد، که معمولا منطق برنامه است، با Controller همکاری و داده‌ی لازم را آماده می‌کند. از این داده‌ها برای تولید یک خروجی قابل‌قبول برای کاربر استفاده می‌شود. بنابراین، در این معماری مسائل مربوط به منطق برنامه را از لایه‌ی UI (واسط کاربری) جدا می‌کنیم.

داشتن این معماری یکی از دلایلی است که از انگولار جی‌اس برای ساخت اپلیکیشن‌های تک صفحه‌ای (SPA) استفاده می‌شود.

Directiveها

AngularJS با HTML همراه شده است تا صفحات وب بسازد. در این مسیر “Directive”ها شناسه‌هایی خاص در انگولار جی‌اس‌ هستند که به این ترکیب کمک می‌کنند.

 

عبارت در AngularJS

بر خلاف جاوا اسکریپت سنتی، Expressionها در انگولار جی‌اس می‌توانند دارای لیترال (Literal)، عملگر (Operator) و متغیر (Variable) باشند.

می‌توانیم عبارت‌ها را داخل خود تگ‌ HTML بنویسیم، اما حتماً باید در این صورت از ng-app استفاده کنیم که یک directive است. در صورت عدم استفاده از آن، عبارت بدون بررسی شدن، به همان صورت در صفحه نمایش داده می‌شود.

می‌توانیم عبارت‌های انگولار جی اس را در {} یا در یک Directive بنویسیم.

سینتکس (Syntax):

در {}:

<div ng-app=””>
<p>My first expression in Angular JS: {{3+3}}</p>
</div>

در Directive:

<div ng-controller=”Name of your controller”>
<element ng-bind="your expression"></element>
</div>
پیشنهاد فرانش به شما
بهترین زبان‌‌ های برنامه نویسی در ۲۰۱۹: ۱۰ زبان برتر برای یادگیری

اعداد در AngularJS

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

مثال:

<div ng-app=””>
<p>The value of 5 times 10 is : {{5*10}}<p>
</div>

رشته (String) در AngularJS

می‌توانیم با استفاده از directiveهای ng-init یا ng-controller رشته تعریف کنیم. می‌توانیم با استفاده از عملگر + در یک عبارت، رشته‌ها را الحاق کنیم.

می‌توانیم در یک {} از رشته‌ها به صورت عبارت استفاده کنیم یا درست شبیه اعداد از دستور ng-bind استفاده کنیم.

سینتکس:

در {}:

<div ng-app=”” ng-init=”first string variable name=’your first string’;second string variable name
=’your second string’”>
<p>My first string expression in Angular JS: 
{{ first string variable name + second string variable name }}</p>
</div>

در Directive:

<div ng-app=”” ng-init=” first string variable name=’your first string’; 
second string variable name=’your second string’”>

<p>My first string expression in Angular JS:<span ng-bind=
" first string variable name + second string variable name "></span></p>

</div>

اشیاء در AngularJS:

اشیاء در انگولار جی‌اس، درست شبیه مشابه جاوا اسکریپتی خود هستند. می‌توانیم با استفاده از عملگر . “dot” به آیتم‌های موجود در یک شئ دسترسی داشته باشیم.

سینتکس:

در {}:

<div ng-app=”” ng-init=”your object name=
{first variable name=’your first value’,second variable name
=’your second value’}”>
<p>My first object in Angular JS: {{ your object name.second variable name }}</p>
</div>

در Directive:

<div ng-app=”” ng-init=”your object name={first variable name=’your first value’,second variable name
=’your second value’}”>

<p>My first object in Angular JS:<span ng-bind=" your object name.second variable name "></span></p>

</div>

آرایه‌ها در AngularJS

رفتار آرایه‌ها در انگولار جی‌اس، درست شبیه مشابه جاوا اسکریپتی آنهاست.

می‌توانیم با عنوان کردن شماره‌ی ایندکس خانه‌ای از آرایه در یک []، به مقدار آن دسترسی داشته باشیم. توجه داشته باشید که ایندکس گذاری در آرایه از ۰ شروع می‌شود. مثلاً المنت ۱ دارای ایندکس ۰ است، المنت ۲ دارای ایندکس ۱ و به همین ترتیب.

سینتکس:

در {}:

<div ng-app=”” ng-init=”your array name=[your first value,your second value]”>
<p>My first array in Angular JS: {{ your array name[1] }}</p>
</div>

در Directive:

<div ng-app=”” ng-init=”your array name=[your first value,your second value]”>
<p>My first array in Angular JS: <span ng-bind="your array name[1] "></span></p>
</div>
پیشنهاد فرانش به شما
ایجاد وب سرور با صفحه HTML به کمک ESP8266

شکل زیر تمامی عبارت‌های موجود در AngularJS را نشان می‌دهد:

عبارت‌های موجود در AngularJS

توجه داشته باشید که انگولار جی‌اس:

  • از دستورات شرطی (Condition)، حلقه‌ها (Loop) و Exceptionها در عبارات پشتیبانی نمی‌کند.
  • از تعاریف تابع (حتی اگر داخل دستور ng-init نوشته شوند) در عبارات پشتیبانی نمی‌کند.
  • از عملگرهای بیتی، کاما، void و new در عبارات پشتیبانی نمی‌کند.
  • Propertyهای null یا undefined (بدون مقدار) را نادیده می‌گیرد.
  • عبارت‌ها با توجه به شئ scope ارزیابی می‌شوند نه Global Window.

 

فیلترها در AngularJS

Filterها فقط در انگولار جی‌اس هستند و در جاوا اسکریپت سنتی موجود نیستند.

از فیلترها برای تغییر داده‌ی خروجی استفاده می‌شود تا بتوان آنها را با انواع داده‌های ورودی سازگار کرد. می‌توانیم با استفاده از عملگر pipe (“|”) از فیلترها در عبارات یا دستورات استفاده کنیم.

انواع مختلف فیلترها

Uppercase

کمک می‌کند رشته را به صورت حروف بزرگ (Uppercase) فرمت کنیم.

سینتکس:

<div ng-app=”” ng-controller=”first string variable name”>
<p>My first string expression in uppercase in Angular JS: 
{{ first string variable name | uppercase}}</p>
</div>

Lowercase

کمک می‌کند رشته را به صورت حروف کوچک (Lowercase) فرمت کنیم.

سینتکس:

<div ng-app=”” ng-controller=”first string variable name”>
<p>My first string expression in lowercase in AngularJS: 
{{ first string variable name | lowercase}}</p>
</div>

Currency

از این فیلتر برای عبارت‌های عددی استفاده می‌شود تا آنها را به فرم واحد پول (Currency) در آوریم. می‌توانیم از عملگر “|” در کنارِ عبارت‌های این تبدیل استفاده کنیم.

سینتکس:

<div ng-app=”” ng-init=”your number value”>
<h1>Price : {{ your number value | currency }}</h1>
 </div>

Filter

<div ng-app=”” ng-controller=”your array name”>
<ul>
<li ng-repeat=”x in your array name | filter: ‘i’”>
{{x}}
</li>
</ul>
</div>

از این فیلتر تنها می‌توانیم برای آرایه‌ و انتخاب یک زیرمجموعه از آن استفاده کنیم.

سینتکس:

<div ng-app=”” ng-controller=”your array name”>
<ul>
<li ng-repeat=”x in your array name | filter: ‘i’”>
{{x}}
</li>
</ul>
</div>
پیشنهاد فرانش به شما
تفاوت Angular و React

orderBy

از این فیلتر می‌توانیم برای دستوراتی مثل ng-repeat و به ترتیب نمایش دادنشان استفاده کنیم. می‌توانیم با استفاده از عملگر “|” در کنار دستور ng-repeat در لیست‌های نامرتب، آنها را مرتب کنیم.

سینتکس:

<div ng-app=”” ng-controller=”your object name”>
<ul>
<li ng-repeat=”x in your object name | orderBy:’your desired order’”>
{{x.your first variable+x.your second variable}}
</li>
</ul>
</div>

در تصویر زیر، شیوه‌ی استفاده از تمامی فیلترهای بالا را می‌بینید:

فیلترهای انگولار جی اس

فیلترهای انگولار جی اس

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

 

چگونه محیط برنامه نویسی Angular JS را آماده کنیم؟

باید اول محیط برنامه‌نویسی را آماده کنیم تا بتوانیم در آن کد بنویسیم و دستورات ساده‌ای را با استفاده از انگولار جی اس اجرا کنیم. برای شروع، آخرین نسخه از یک برنامه‌ی ویرایش متن مثل Notepad ++ و مرورگری دلخواه انتخاب کنید.

حالا، به وب سایت رسمی AngularJS بروید و نسخه‌ی انگولار جی‌اس موردنظر خود را دانلود کنید.

نسخه انگولار جی اس مورد نظر خودتون رو دانلود کنید

حالا گام‌های زیر را طی کنید تا از دانلود مناسب آن مطمئن شوید:

  • روی “Download AngularJS” کلیک کنید.

دانلود انگولار جی اس

  • طبق موارد زیر جزئیات را وارد کنید:

Branch: یک نسخه‌ی Stable (برای صفحات وب جدید) یا Legacy (برای استفاده از انگولار جی اس در وب‌ سایت‌هایی که قبلاً ساخته شده‌اند) استفاده کنید.

Build: یکی از گزینه‌های Uncompressed (با فرمت‌دهی مناسب به متن که قابلیت خوانایی را بالا می‌برد- Development Mode)، Minified (برای اهداف استقرار (Deployment) محصول روی سرور، برای ایجاد نسخه‌های فشرده‌‌ی کد) یا Zip را انتخاب کنید.

وارد کردن جزییات

CDN (Content Delivery Network): CDN خود را مشخص کنید تا فایل script انگولار جی‌اس را دریافت کنید.

این مسیر را می‌توانید تغییر دهید (می‌توانید مسیری در سیستم محلی خود را اضافه کنید) یا بدون تغییر، از آن در کد HTML صفحات وبی که می‌نویسید، استفاده کنید.

افزودن script از CDN:

<script
src=” https://ajax.googleapis.com/ajax/libs/angularJS/1.7.2/angular.min.js”
type=”text/javascript”>
</script>

افزودن script از سیستم محلی:

<script
src=” scripts/angular.js”
type=”text/javascript”>
</script>

پس از کامل شدن مراحل نصب، می‌توانید با اضافه کردن Path به کد HTML صفحات وبی که می‌سازید، اولین اپلیکیشن AngularJS خود را اجرا کنید.

 

اولین اپلیکیشن شما

می‌توانید یک کد ساده‌ی HTML مثل کد زیر بنویسید و با افزودن Script انگولار جی اس به آن، اولین تجربه‌ی برنامه‌نویسی خود را با استفاده از انگولار جی‌اس داشته باشید.

<html>
<head>
<title>Angular JS First application</title>
</head>
<body>
<h1>First application</h1>
<div ng-app=”MyApp”>
<p>Enter your Name : <input type=”text” ng-model=”name”></p>
<p>Hello <span ng-bind=”name”></span>!</p>
</div>
<script src=” https://ajax.googleapis.com/ajax/libs/angularJS/1.7.2/angular.min.js”>
</script>
</body>
</html>

این فایل را با پسوند html ذخیره کنید و آن را در مرورگر خود اجرا کنید. نتیجه به شکل زیر است.

اولین اپلیکیشن شما - انگولار جی اس

بعد از اجرای اولین برنامه، حالا می‌توانید از انگولار جی‌اس برای ساده‌تر کردن بسیاری از عملکردهای سخت در پروژه‌هایتان استفاده کنید.

پیشنهاد فرانش به شما
آموزش HTML به زبان ساده

 

محدودیت‌های AngularJS

در زیر برخی از محدودیت‌های انگولار جی‌اس را می‌بینید:

  • فریمورک امنی برای جاوا اسکریپت نیست. باید حتماً برای امن نگه داشتن کدهایتان در سمت سرور احراز هویت و صدور مجوز (Authorization & Authentication) داشته باشید.
  • یک اپلیکیشن AngularJs، Degradable نیست. Degradable نبودن به این معناست که اگر کاربری جاوا اسکریپت را غیرفعال کند، به جز صفحه‌ی ابتدایی دیگر چیزی نمی‌بیند.

با همه‌ی این‌ها، می‌دانیم که مزیت‌های انگولار جی‌اس بیشترند. اخیراً برنامه نویسان بیشترین استفاده را از این فناوری داشته‌اند.

دوره های مرتبط در فرانش

 

نتیجه‌گیری

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

معمولاً از آن برای ساخت ساده و کم‌هزینه‌ی اپلیکیشن‌های تحت وب، به خصوص SPAها، استفاده می‌شود. نسخه‌ی آپگرید شده‌اش انگولار ۲ است. انگولار ۲، که بر اساس انگولار جی‌اس نوشته شده است، از مدل برنامه‌نویسی شی گرایی (Object Oriented Programming) استفاده می‌کند.