15 فروردین آنگولار جی‌اس (AngularJS)چیست ؟
آنگولار جی‌اس (AngularJS) که توسط گوگل توسعه داده شده است، یک چارچوب جاوااسکریپت است که به طراحی و ساخت برنامه‌های وب پویا کمک می‌کند. این چارچوب، سینتکس HTML را گسترش می‌دهد تا اجزای یک برنامه را تعریف کند و یک چارچوب برای معماری MVC (Model-View-Controller) و MVVM (Model-View-ViewModel) از سمت مشتری فراهم می‌کند. این چارچوب از سال ۲۰۱۰ که منتشر شد و به دلیل ویژگی‌های قوی و قابلیت‌های پیوسته دادن داده قدرتمند خود و سادگی استفاده، محبوبیت بسیاری پیدا کرده است.
مفاهیم اصلی AngularJS
۱. پیوند داده دو طرفه
پیوند داده‌های دوطرفه یکی از ویژگی‌های کلیدی است که باعث ابراز متمایزی شدن AngularJS میان چارچوب‌های جاوااسکریپت دیگر در زمان معرفی اولیه آن شد. این به هماهنگی خودکار داده‌ها بین مدل (داده‌های برنامه) و نمایش (رابط کاربری نمایش داده به کاربر) اشاره دارد. این بدان معناست که هرگونه تغییرات ایجاد شده در مدل به صورت فوری در نمایش انعکاس داده می‌شوند و برعکس، بدون نیاز به دستکاری صریح DOM.
نحوه کار پیوند داده دوطرفه
در AngularJS، پیوند داده دوطرفه توسط دستورالعمل‌های پیوند داده چارچوب، به خصوص `ng-model`، تسهیل می‌شود. در ادامه شرحی از نحوه کار آن آمده است:
عبارت پیوند داده: در نمایش HTML، از عبارات پیوند داده AngularJS استفاده می‌کنید که با دو براکت منحنی (`{{ }}`) نشان داده می‌شوند، برای پیوند داده از مدل به نمایش یا برعکس.
تغییرات مدل: هرگونه تغییرات اعمال شده در مدل در کد جاوااسکریپت به صورت خودکار به عناصر UI متناظری که به آن خصوصیت مدل متصل شده‌اند، انتقال داده می‌شوند.
به‌روزرسانی ورودی کاربر مدل: همین‌طور که کاربر با یک فیلد ورود متصل به `ng-model` تعامل می‌کند، مانند تایپ در یک جعبه متن، مقدار وارد شده توسط کاربر به طور خودکار با خصوصیت متناظر در مدل همگام‌سازی می‌شود.
به‌روزرسانی خودکار: AngularJS به صورت داخلی، تغییرات را در مدل مشاهده کرده و نمایش را به‌موقع به‌روزرسانی می‌کند. همچنین، رویدادهای ورودی کاربر را نیز مشاهده کرده و مدل را به‌روزرسانی می‌کند.
مزایای پیوند داده دوطرفه
سادگی: پیوند داده دوطرفه ، فرآیند توسعه را ساده‌تر می‌کند و با حذف نیاز به دستکاری دستی DOM برای به‌روزرسانی رابط کاربری بر اساس تغییرات مدل یا برعکس. توسعه‌دهندگان می‌توانند به‌جای نگرانی از همگام‌سازی رابط کاربری و داده، بیشتر به نوشتن منطق برنامه تمرکز کنند
به‌روزرسانی به‌زمان‌واقعی: با پیوند داده دوطرفه، تغییرات اعمال شده توسط کاربر در رابط کاربری به‌طور فوری در مدل داده اصولی، بازتاب داده می‌شوند، که تجربه کاربری پردازشی و واکنش گرایی را ارائه می‌دهد.
کاهش کد بویلرپلیت(Boilerplate): پیوند داده دوطرفه AngularJS میزان کد بویلرپلیت(Boilerplate) مورد نیاز برای همگام‌سازی مدل و نمایش را کاهش می‌دهد، که منجر به کدی تمیزتر و قابل نگهداری می‌شود.
دست‌کم کردن کد خطاهای خودکار: AngularJS هندلینگ همگام‌سازی بین مدل و نمایش را به طور کارآمد انجام می‌دهد، که احتمال خطاهای مرتبط با عدم انطباق داده را کاهش می‌دهد.
برای تغییر این متن بر روی دکمه ویرایش کلیک کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
مثالی از پیوند داده دوطرفه در AngularJS
یک مثال ساده را در نظر بگیرید که یک فیلد ورود به یک خصوصیت مدل متصل شده است:
<!DOCTYPE html>
<html lang=”en” ng-app=”myApp”>
<head>
<meta charset=”UTF-8″>
<title>Two-Way Data Binding Example</title>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”></script>
</head>
<body>
<div ng-controller=”MyController”>
<input type=”text” ng-model=”name”>
<h1>Hello, {{ name }}</h1>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘MyController’, function($scope) {
$scope.name = ‘AngularJS’;
});
</script>
</body>
</html>
در این مثال، هر تغییری که توسط کاربر در فیلد ورودی انجام شود، به طور خودکار متغیر `$scope.name` در کنترل‌کننده به‌روزرسانی می‌شود، و بالعکس. نمایش (`{{ name }}`) به طور پویا بروزرسانی می‌شود تا تغییرات در مدل را نشان دهد.
۲. دستورالعمل‌ها
دستورالعمل‌ها یکی از قدرتمندترین و چندمنظوره‌ترین ویژگی‌های AngularJS هستند. آن‌ها به توسعه‌دهندگان این امکان را می‌دهند که HTML را با ویژگی‌ها و عناصر جدید گسترش دهند، کامپوننت‌های UI قابل استفاده مجدد، رفتارها و مدیریت DOM را پوشش دهند. دستورالعمل‌ها نقش حیاتی در بهبود قابلیت ماژولاریته، قابل استفاده مجدد بودن و قابلیت تعمیر AngularJS دارند.
معرفی دستورالعمل‌ها
در AngularJS، دستورالعمل‌ها نشانگرهایی بر روی عناصر DOM هستند که به کامپایلر HTML AngularJS (`$compile`) می‌گویند که یک رفتار مشخص را به آن عنصر DOM اضافه کند یا آن را به یک عنصر جدید تبدیل کند. دستورالعمل‌ها می‌توانند برای اهداف مختلفی استفاده شوند که شامل موارد زیر می‌شود:
تغییر DOM: دستورالعمل‌ها می‌توانند DOM را تغییر دهند، مانند اضافه یا حذف عناصر، تغییر ویژگی‌ها یا تغییر استایل‌ها.
ایجاد کامپوننت‌های قابل استفاده مجدد: دستورالعمل‌ها به توسعه‌دهندگان این امکان را می‌دهند که کامپوننت‌های UI قابل استفاده مجددی ایجاد کنند که هم قالب HTML و هم رفتار مرتبط را شامل می‌شوند.
افزایش نحو HTML: دستورالعمل‌ها نحو HTML را با معرفی ویژگی‌ها و عناصر سفارشی گسترش می‌دهند که آن را بیانگر و قدرتمندتر می‌کند.
پیوند داده: دستورالعمل‌ها می‌توانند برای ایجاد پیوند داده بین مدل و نمایش استفاده شوند، که به‌وسیله آن به‌روزرسانی‌های پویا در رابط کاربری بر اساس تغییرات در داده‌های زیرین فعال می‌شود.
مدیریت تعامل کاربر: دستورالعمل‌ها می‌توانند تعاملات کاربری مانند کلیک‌ها یا فشار دکمه‌ها را ضبط کرده و عملکردها یا رویدادهای مربوطه را فعال کنند.
انواع دستورالعمل‌ها
AngularJS انواع مختلفی از دستورالعمل‌ها را پشتیبانی می‌کند، هر کدام با هدف خاص خود:
دستورالعمل‌های عنصر: این دستورالعمل‌ها عناصر HTML جدید ایجاد یا عناصر موجود را جایگزین می‌کنند. به عنوان مثال، `<my-directive></my-directive>`.
دستورالعمل‌های ویژگی: این دستورالعمل‌ها رفتار یا ظاهر عناصر HTML موجود را با اضافه کردن ویژگی‌های سفارشی تغییر می‌دهند. به عنوان مثال، `<div my-directive></div>`.
دستورالعمل‌های کلاس: این دستورالعمل‌ها بر اساس حضور یک کلاس CSS، رفتار یا استایل را اعمال می‌کنند. به عنوان مثال، `<div class=”my-directive”></div>`.
دستورالعمل‌های کامنت: این دستورالعمل‌ها در داخل نظرات HTML قرار می‌گیرند و برای اعمال رفتار به عناصر مجاور آن‌ها استفاده می‌شوند. به عنوان مثال، `<!– directive: my-directive –>`.
ایجاد دستورالعمل‌های سفارشی
توسعه‌دهندگان می‌توانند دستورالعمل‌های سفارشی را برای پوشش کامپوننت‌ها یا رفتارهای قابل استفاده مجدد ایجاد کنند. در زیر یک مثال ابتدایی از چگونگی تعریف یک دستورالعمل سفارشی در AngularJS آورده شده است:
angular.module(‘myApp’, [])
.directive(‘myDirective’, function() {
return {
restrict: ‘E’, // Restrict usage to elements
template: ‘<div>Hello, {{name}}!</div>’,
scope: {
name: ‘@’ // Create isolated scope binding
}
};
});
در این مثال:
– `restrict` مشخص می‌کند که دستورالعمل چگونه می‌تواند استفاده شود (به عنوان مثال، ‘E’ برای عنصر).
– `template` الگوی HTML مرتبط با دستورالعمل را تعریف می‌کند.
– `scope` یک دامنه جداگانه برای دستورالعمل ایجاد می‌کند، که به آن اجازه می‌دهد تا اطلاعات ورودی (`name`) را از دامنه والد دریافت کند.
دستورالعمل‌های تعبیه‌شده
AngularJS همچنین مجموعه‌ای از دستورالعمل‌های تعبیه‌شده را فراهم می‌کند که موارد استفاده متداولی را پوشش می‌دهند، مانند `ng-model` برای پیوند داده دوطرفه، `ng-repeat` برای تکرار از روی آرایه‌ها، `ng-click` برای مدیریت رویدادهای کلیک و موارد دیگر.
دستورالعمل‌ها جزئی اساسی از توسعه AngularJS هستند که توسعه‌دهندگان را قادر می‌سازند تا کامپوننت‌های قابل استفاده مجدد ایجاد کنند، نحو HTML را بهبود بخشند و رفتارها را پوشش دهند. با درک نحوه استفاده و ایجاد دستورالعمل‌ها به‌طور موثر، توسعه‌دهندگان می‌توانند برنامه‌های وب ماژولار، قابل تعمیر و بسیار تعاملی با AngularJS بسازند.
۳.تزریق وابستگی (DI)
تزریق وابستگی (DI) یک الگوی طراحی اصلی در AngularJS است که با مدیریت وابستگی‌ها بین اجزای مختلف یک برنامه، مدولاریت، قابل تعمیری و قابل تست کد را ترویج می‌دهد. در AngularJS، سیستم DI یک جزئی حیاتی از چارچوب است و در طول فرآیند توسعه به طور گسترده استفاده می‌شود.
تعریف تزریق وابستگی
تزریق وابستگی یک الگوی طراحی نرم‌افزاری است که در آن وابستگی‌های یک جزء به صورت خارجی ارائه می‌شود به جای آن که درونی ایجاد شود. به جای اینکه یک جزء وابستگی‌های خودش را ایجاد کند، آن‌ها از خارج به آن منتقل می‌شوند. این رویکرد باعث جدا کردن اجزا می‌شود، که آن‌ها را مدولارتر و قابل تعمیرتر می‌کند.
چگونگی عملکرد تزریق وابستگی در AngularJS
سیستم DI AngularJS بر اساس مفهوم ارائه‌دهندگان، خدمات و تزریق‌کنندگان برای مدیریت وابستگی‌ها استوار است.
ارائه‌دهندگان: ارائه‌دهندگان مسئول ایجاد و مدیریت وابستگی‌ها هستند. آن‌ها می‌توانند خدمات، کارخانه‌ها، ثابت‌ها یا خود ارائه‌دهندگان باشند. ارائه‌دهندگان با استفاده از رابط API ارائه‌دهنده AngularJS تعریف می‌شوند، که به توسعه‌دهندگان امکان می‌دهد تا پیکربندی کنند که چگونه وابستگی‌ها ایجاد و نمونه‌سازی شوند.
خدمات: خدمات شی‌ها یا توابعی هستند که وظایف خاصی را انجام می‌دهند و می‌توانند در سایر اجزا تزریق شوند. آن‌ها تک‌نمونه هستند، به این معنی که AngularJS تنها یک نمونه از خدمت ایجاد می‌کند و آن را در سراسر برنامه به اشتراک می‌گذارد. خدمات معمولاً برای تجمیع منطق کسب و کار، دسترسی به داده یا عملکردهای مشترک استفاده می‌شوند.
تزریق‌کنندگان: تزریق‌کنندگان مسئول حل وابستگی‌ها و تزریق آن‌ها به اجزا هستند. سیستم تزریق کننده AngularJS به طور خودکار وابستگی‌های مشخص شده در سازنده یا پارامترهای تابع یک مولفه را شناسایی می‌کند و آن‌ها را در زمان اجرا فراهم می‌کند. این امکان را به اجزا می‌دهد که از یکدیگر جدا شوند و به راحتی قابل تست باشند.
فواید تزریق وابستگی در AngularJS
مدولاریته: تزریق وابستگی طراحی مدولار را با تشویق به تفکیک مسائل و جدا کردن وابستگی‌ها بین اجزا ترویج می‌دهد. این باعث می‌شود تا توسعه، نگهداری و مقیاس‌پذیری برنامه‌های AngularJS آسان‌تر شود.
قابلیت تست: با خارج کردن وابستگی‌ها، تزریق وابستگی تست واحد را آسان‌تر می‌کند. اجزا می‌توانند با فراهم کردن وابستگی‌های مصنوعی یا ساختگی، به صورت جداگانه تست شوند که این به توسعه‌دهندگان اجازه می‌دهد تا رفتار آن‌ها را مستقل از سایر بخش‌های برنامه بررسی کنند.
قابلیت استفاده مجدد: تزریق وابستگی با امکان استفاده مجدد از کد با این امکان که اجزا به راحتی می‌توانند در بخش‌های مختلف برنامه یا حتی در برنامه‌های دیگر استفاده شوند، کد مجدد سازی را ترویج می‌دهد. از آنجا که وابستگی‌ها تزریق می‌شوند و نه به صورت کد شده‌اند، اجزا تنوع و قابلیت سازگاری بیشتری با سناریوهای مختلف به دست می‌آورند.
انعطاف‌پذیری: تزریق وابستگی به توسعه‌دهندگان امکان می‌دهد که به راحتی وابستگی‌ها را جایگزین کنند یا رفتار آن‌ها را بدون تغییر اجرای مولفه تغییر دهند. این انعطاف‌پذیری باعث می‌شود تا به راحتی با الزامات تغییرات یا جایگزینی وابستگی‌های قدیمی با جایگزین‌های جدید سازگار شود.
مثالی از تزریق وابستگی در AngularJS
angular.module(‘myApp’, [])
.controller(‘MyController’, function($scope, MyService) {
$scope.data = MyService.getData();
})
.service(‘MyService’, function() {
this.getData = function() {
return [‘AngularJS’, ‘Dependency Injection’, ‘Modularity’];
};
});
در این مثال:
– `MyController` به `MyService` برای دریافت داده‌ها وابسته است.
– `MyService` به `MyController` تزریق شده است با استفاده از سیستم DI AngularJS.
– تزریق‌کننده AngularJS به‌طور خودکار وابستگی‌های مشخص شده در سازنده کنترل‌کننده را حل کرده و در زمان اجرا آن‌ها را فراهم می‌کند.
تزریق وابستگی یک مفهوم اساسی در AngularJS است که مدولاریت، قابل نگهداری و قابل تست بودن کد را ترویج می‌دهد. با بیرون‌کشیدن وابستگی‌ها و مدیریت نمونه‌سازی و حل آن‌ها، AngularJS به توسعه‌دهندگان امکان می‌دهد تا برنامه‌هایی با مقیاس‌پذیری، انعطاف‌پذیری و نگهداری بهتری بسازند. درک از چگونگی بهره‌برداری موثر از تزریق وابستگی برای مسلط شدن بر توسعه AngularJS و ساخت برنامه‌های قوی و با کیفیت بسیار حیاتی است.
۴.معماری MVC/MVVM: در AngularJS، همانطور که با بسیاری از چارچوب‌های وب مدرن است، معماری بر پایه اصول الگوهای طراحی MVC (Model-View-Controller) یا MVVM (Model-View-ViewModel) است. این الگوها به سازماندهی کد، جداسازی مسائل و بهبود قابل نگهداری، مقیاس‌پذیری و قابل تست بودن برنامه‌ها کمک می‌کنند.
MVC یک الگوی طراحی است که یک برنامه را به سه مؤلفه متصل به هم تقسیم می‌کند:
مدل: مدل داده‌ها و منطق کسب و کار برنامه را نمایندگی می‌کند. این شامل ذخیره، بازیابی، تغییر و اعتبارسنجی داده‌ها است. در AngularJS، مدل معمولاً از اشیاء JavaScript یا خدماتی که مدیریت داده را انجام می‌دهند، تشکیل شده است.
نمایش: نمایش مسئول نمایش رابط کاربری (UI) به کاربر است. این داده‌ها را از مدل نمایش می‌دهد و تعاملات کاربر را مدیریت می‌کند، مانند کلیک‌ها و رویدادهای ورودی. در AngularJS، نماها معمولاً با استفاده از قالب‌های HTML بهبود یافته با دستورالعمل‌ها و عبارات پیوند داده AngularJS تعریف می‌شوند.
کنترل‌کننده: کنترل‌کننده به عنوان واسط بین مدل و نما عمل می‌کند. این شامل منطق برنامه، پاسخ به عملکردهای کاربر و به‌روزرسانی مدل یا نما می‌شود. در AngularJS، کنترل‌کننده‌ها توابع یا اشیاء جاوااسکریپت هستند که به بخش‌های خاصی از رابط کاربری با استفاده از دستورالعمل‌های AngularJS اضافه می‌شوند.
معماری MVVM
MVVM نوعی تغییر از الگوی MVC است که یک لایه ViewModel را بین مدل و نما معرفی می‌کند. اجزای کلیدی معماری MVVM عبارتند از:
مدل: همانند MVC، مدل نماینده داده‌ها و منطق کسب و کار برنامه است.
نما: همانند MVC، نما رابط کاربری (UI) را به کاربر ارائه می‌دهد و تعاملات کاربر را مدیریت می‌کند.
ViewModel: ViewModel لایه‌ای بین مدل و نما است. این داده‌ها و عملیات از مدل به نما را ارائه می‌دهد و مکانیسم‌های پیوند داده را فراهم می‌کند تا آن‌ها را همگام نگه دارد. در AngularJS، ViewModel معمولاً توسط شیء scope نمایان می‌شود که به عنوان پلی بین کنترل‌کننده (مدل) و نما عمل می‌کند.
AngularJS و MVC/MVVM
AngularJS مفاهیم MVC و MVVM را ترکیب می‌کند تا یک معماری جامع برای ساخت برنامه‌های وب ارائه دهد. در اینجا نحوه پیاده‌سازی این الگوها در AngularJS آورده شده است:
مدل: در AngularJS، مدل‌ها معمولاً توسط اشیاء یا خدمات جاوااسکریپت نمایان می‌شوند که داده‌های برنامه را مدیریت می‌کنند. خدماتی مانند کارخانه‌ها یا خدمات، اغلب برای نهان‌سازی دسترسی به داده و منطق مدیریت و تغییر داده استفاده می‌شوند.
نما: نماها در AngularJS با استفاده از قالب‌های HTML بهبود یافته با دستورالعمل‌ها و عبارات پیوند داده AngularJS تعریف می‌شوند. دستورالعمل‌ها به توسعه‌دهندگان امکان می‌دهند نحوه HTML را گسترش دهند و اجزای قابل استفاده مجدد ایجاد کنند، در حالی که پیوند داده به طور خودکار داده‌ها را بین مدل و نما همگام می‌کند.
کنترل‌کننده/ViewModel: در AngularJS، کنترل‌کننده‌ها به عنوان لایه کنترل در معماری MVC عمل می‌کنند. آن‌ها شامل منطق برنامه، پاسخ به تعاملات کاربر و به‌روزرسانی مدل یا نما است. علاوه بر این، شیء scope در AngularJS به عنوان ViewModel عمل می‌کند و مکانیسم‌های پیوند داده را فراهم می‌کند تا کنترل‌کننده (مدل) را با نما متصل کند.
مزایای معماری MVC/MVVM در AngularJS:
جداسازی مسائل: معماری MVC/MVVM جداسازی واضحی از مسائل را ترویج می‌دهد، با اجزای متمایزی که مسئولیت مدیریت داده، ارائه رابط کاربری و منطق برنامه را بر عهده دارند.
مدولاریته: با جدا کردن اجزا، معماری MVC/MVVM مدولاریت را فراهم می‌کند، که توسعه، نگهداری و مقیاس‌پذیری برنامه‌های AngularJS را آسان‌تر می‌کند.
قابلیت تست: جداسازی مسائل امکان آزمون واحدهای دقیق‌تری از اجزای فردی را فراهم می‌کند، که به بهبود قابلیت تست کلی برنامه کمک می‌کند.
قابلیت استفاده مجدد: معماری MVC/MVVM تراشه کد را تشویق به استفاده مجدد می‌کند، چرا که اجزا به راحتی می‌توانند در بخش‌های مختلف برنامه یا حتی در برنامه‌های دیگر استفاده شوند.
معماری MVC/MVVM AngularJS پایه‌ی قوی‌ای برای ساخت برنامه‌های وب پویا و قابل نگهداری فراهم می‌کند. با جدا کردن مسائل به اجزا متمایز (مدل، نما و کنترل‌کننده/مدل-نما)، AngularJS مدولاریت، مقیاس‌پذیری و قابلیت تست را ترویج می‌دهد، که توسعه و نگهداری برنامه‌های پیچیده را آسان‌تر می‌کند. درک و به‌کارگیری موثر اصول معماری MVC/MVVM برای مسلط شدن بر توسعه AngularJS و ساخت برنامه‌های وب با کیفیت و قوی بسیار حیاتی است.
آیا درباره ادغام جاوااسکریپت و هوش مصنوعی در برنامه‌های وب مبتنی بر وب می‌دانید؟ اینجا کلیک کنید!
۵. خدمات: AngularJS خدمات داخلی را فراهم می‌کند که می‌توان آن‌ها را به اجزا تزریق کرد تا وظایف رایجی مانند درخواست‌های HTTP، مسیریابی و محلی‌سازی را تسهیل کنند. توسعه‌دهندگان همچنین می‌توانند خدمات سفارشی ایجاد کنند تا منطق کسب و کار را نهان کنند و قابلیت‌هایی را در سراسر برنامه به اشتراک بگذارند.
۶. مسیریابی: AngularJS شامل یک مکانیزم مسیریابی مشتری است که به توسعه‌دهندگان امکان می‌دهد مسیرها را تعریف کرده و آن‌ها را به نماها/قالب‌های خاص نقشه‌برداری کنند. این امکان را فراهم می‌کند تا برنامه‌های تک‌صفحه‌ای (SPAs) را ایجاد کنید که مسیریابی بدون بارگیری کامل صفحه اتفاق می‌افتد.
۷. پشتیبانی از آزمون: AngularJS با توجه به قابلیت آزمون طراحی شده است. ابزارهایی مانند Jasmine و Karma برای آزمون واحد و چارچوب‌های آزمون پایان به پایان مانند Protractor را فراهم می‌کند. همچنین سیستم تزریق وابستگی همچنین آسان‌تر می‌کند که وابستگی‌ها را برای اهداف آزمون مسخره کنید.
AngularJS در مقابل Angular
مهم است بدانید که AngularJS از Angular (معمولاً به عنوان Angular 2+) متمایز است. Angular، که در سال ۲۰۱۶ منتشر شد، یک بازنویسی کامل از AngularJS است و تغییرات و بهبودهای قابل توجهی را معرفی می‌کند. Angular از TypeScript به عنوان زبان اصلی خود استفاده می‌کند، یک معماری مدولار بیشتر را ارائه می‌دهد، عملکرد بهتری دارد و ابزار بهبود یافته‌ای را ارائه می‌دهد. در حالی که AngularJS هنوز هم در مورد برنامه‌های قدیمی وسیع استفاده می‌شود، پروژه‌های جدید معمولاً Angular یا چارچوب‌های مدرن دیگر مانند React یا Vue.js را انتخاب می‌کنند.
مثالی از کد: AngularJS
<!DOCTYPE html>
<html lang=”en” ng-app=”myApp”>
<head>
<meta charset=”UTF-8″>
<title>AngularJS Example</title>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”></script>
</head>
<body>
<div ng-controller=”MyController”>
<input type=”text” ng-model=”name”>
<h1>Hello, {{ name }}</h1>
</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘MyController’, function($scope) {
$scope.name = ‘AngularJS’;
});
</script>
</body>
</html>
در این مثال:
– `ng-app=”myApp”` ماژول برنامه AngularJS را اعلام می‌کند.
– `ng-controller=”MyController”` کنترل‌کننده را با عنصر HTML مرتبط می‌کند.
– `ng-model=”name”` فیلد ورودی را به متغیر `name` در محدوده کنترل‌کننده متصل می‌کند.
– `{{ name }}` مقدار متغیر `name` را در نما نمایش می‌دهد.
نتیجه گیری
AngularJS با ارائه یک چارچوب قدرتمند برای ساخت برنامه‌های وب پویا و تعاملی، توسعه وب را ثورت داد. ویژگی‌هایی مانند پیوند داده دوطرفه، دستورالعمل‌ها و تزریق وابستگی، توسعه را ساده‌تر می‌کنند و قابلیت نگهداری کد را افزایش می‌دهند. در حالی که AngularJS همچنان در بسیاری از پروژه‌ها استفاده می‌شود، توسعه‌دهندگان باید همچنین گزینه‌های جدیدتر مانند Angular را برای ساخت برنامه‌های وب مدرن مدنظر قرار دهند.
اگر می‌خواهید بیشتر بخوانید، پیوندهای منبع زیر را مشاهده کنید:
AngularJS for beginners
AngularJS
Introduction to AngularJS