AngularJS یک چارچوب فوق‌العاده قهرمانانه جاوا اسکریپت MVW برای ساخت برنامه‌های یک صفحه (SPA) و برنامه‌های پویا است. در اینجا MVW مخفف Model View Whatever است (که ممکن است معماری Model View Controller یا Model View View-Model معماری یا MV* باشد). AngularJS در سال 2009 توسط Misko Hevery توسعه یافت و در حال حاضر توسط Google نگهداری می شود.

در این مجموعه آموزشی به موضوعات زیر می پردازیم:

بیایید اولین برنامه Hello World خود را با استفاده از AngularJS ایجاد کنیم

به این لینک بروید و روی دکمه دانلود کلیک کنید .

پس از آن، یک پاپ آپ معین روی صفحه ظاهر می شود. در شاخه، نسخه 1.4x (پایدار) و یک نسخه فشرده نشده از AngularJS را انتخاب کنید که برای اشکال زدایی و توسعه بهترین است (نسخه Minified AngularJS را برای استقرار برنامه خود انتخاب کنید، اما فقط در صورتی که نمی توانید از CDN Google استفاده کنید. نسخه فشرده شده AngularJS شامل بیلدهای AngularJS و همچنین مستندات است.

روی دکمه دانلود کلیک کنید. پوشه Script را در فهرست اصلی برنامه خود

اضافه کنید و اسکریپت Angular دانلود شده خود را در آن پوشه اضافه کنید. اگر از Visual Studio IDE استفاده می کنید، می توانید همچنین AngularJS را با استفاده از Nuget Packets به برنامه خود اضافه کنید. روی پروژه خود از Solution Explorer راست کلیک کرده و کلیک کنید

بسته های NuGet را مدیریت کنید . AngularJS را در Manage NuGet Packages

جستجو کنید سپس برای نصب / افزودن AngularJS در پروژه خود بر روی Install کلیک کنید. اکنون اسکریپت AngularJS را در برنامه خود اضافه کنید. پس از آن دستور ng-app را در برنامه خود اضافه کنید. دستورالعمل ng-app را می توان در سطح سند یا سطح بدنه یا در سطح Div اضافه کرد. دستورالعمل ng-app برنامه زاویه ای را تعریف می کند و برای بارگذاری ماژول های مختلف AngularJS در برنامه استفاده می شود. پس از آن علامت پرانتز دوتایی {{ }} را اضافه کنید تا عبارات را به عناصر داخلی نشانه گذاری زاویه ای متصل کنید.

کد:

<!DOCTYPE html>
<html ng-app>
<head>
<title>Angular Hello World Application</title>
<script src="Script/angular.js"></script>
</head>
<body>
{{4+4}}
</body>
</html>

برنامه خود را ذخیره و اجرا کنید. خواهید دید که عبارت داخل نشانه گذاری/قالب ({{}}) ارزیابی می شود.

برنامه Hello World را ایجاد کنیم

یک جعبه متن با دستور ng-model اضافه کنید. دستورالعمل ng-model کنترل HTML را با یک مدل / ویژگی که در Angular Application استفاده می شود، پیوند می دهد. ما از ویژگی ng-model برای نمایش مقدار کنترل HTML با کمک الگوی {{name}} استفاده کردیم .

کد:

<!DOCTYPE html>
<html ng-app>
<head>
<title>Angular Hello World Application</title>
<script src="Script/angular.js"></script>
</head>
<body>
<input type="text" ng-model="name"/><br />
<p>Hello {{name}}!</p>
</body>
</html>

برنامه را ذخیره و اجرا کنید.

ما همچنین می توانیم با استفاده از دستورالعمل ng-bind در برنامه خود همین کار را انجام دهیم. دستورالعمل ng-bind مقدار مدل را به کنترل/نمای HTML متصل می کند.

کد:

<!DOCTYPE html>
<html ng-app>
<head>
<title>Angular Hello World Application</title>
<script src="Script/angular.js"></script>
</head>
<body>
<input type="text" ng-model="name"/><br />
<p>Hello <span ng-bind="name"></span>!</p>
</body>
</html>

امیدوارم خوشتون اومده باشه با تشکر!