آموزش AngularJS
دوشنبه 11 خرداد 1394در این مقاله قصد داریم به توضیح مختصری در رابطه با تکنولوژوی AngularJS با ارائه یک مثال ساده بپردازیم. AngularJS یک کتابخانه‌ای برپایه‌ی جاوااسکریپت است که به منظور تولید نرم‌افزارهای تحت وب توسط گوگل توسعه پیدا کرده است
AngularJS چیست؟
AngularJS یک کتابخانه‌ای برپایه‌ی جاوااسکریپت است که به منظور تولید نرم‌افزارهای تحت وب توسط گوگل توسعه پیدا کرده است. ایده‌ی اصلی AngularJS، اضافه کردن امکاناتی به HTML است تا آن را از یک زبان نشان‌گذاری ساده خارج کند و ابزارهای لازم برای تولید یک نرم‌افزار داده محور را به ساده‌ترین شکل ممکن فراهم نماید
.امکانات متنوعی در این کتابخانه وجود دارد.
ویژگی اصلی AngularJS، ایجاد ارتباط پویا میان داده‌های ورودی و خروجی است. به این معنی که به سادگی می‌توانید اطلاعات دریافت شده از کاربر را به صورت خودکار جمع‌آوری کنید، پردازش کنید، در محل‌های دلخواه نمایش دهید یا به سرور بفرستید.
به عبارت دیگر، AngularJS ابزاری است که برنامه‌نویسی MVC را به معنای واقعی در محیط وب دست‌یافتنی میکند.
با استفاده از AngularJS می‌توان در یک صفحه‌ی وب، چندین Application مجزا از هم ایجاد کرد که هر یک به پایگاه داده‌ای مجزا متصل می‌شوند و اطلاعات را ارسال و دریافت می‌کنند.
استفاده از این کتابخانه بسیار آسان است. کافی است صفت‌های متناسب را به تگ‌های HTML اضافه کنید و در انتها، فایل اسکریپت AngularJS را در صفحه درج کنید تا بقیه‌ی کارها به صورت اتوماتیک به انجام برسد.
دراین جا به توضیح مختصری از برخی صفت های مورداستفاده در AngularJS میپردازیم.
ng-app:
این صفت برای استفاده از AngularJS در html است این صقت را میتوانیم هم در Body صفحه ، و هم در در تگ های div در html قرار دهیم.
در واقع این صفت برای فرستادن یک مقدار به صفحه است وقتی که از صفت ng-controller. استفاده نکنیم.
ng-controller:
از این صفت زمانی استفاده میشود که میخواهیم یک کنترلر، در برنامه پیاده سازی شده با AngularJS ارسال کنیم.
ng-model:
این صفت مقدار کنترلر را به متغیری از AngularJS وصل میکند.
ng-bind
این صفت برای متصل کردن مقادیر مدل به صفحه Html به کار میرود .
Template:
برای استفاده از داده هایی که به صورت پویا، بایستی در برنامه اجرا شود، درصفحه Html از {{}} استفاده میکنیم.
حال اکنون به پیاده سازی یک مثال ساده با استفاده از AngularJS میپردازیم
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="">
UserName :
<input type="text" ng-model="UserName">
<hr />
Hello <span>{{UserName}}</span>
<br />
Hello <span ng-bind="UserName"></span>
</div>
</body>
</html>
در این مثال میخواهیم از صفت ng-model برای فرستادن مقدار داخل TextBox استفاده کنیم وهمان طور که مشاهده میکنید در این صفحه از دو تگ Span استفاده کردیم که اولی را با استفاده از خصوصیت Templateو دومینSpan را با استفاده از صفت ng-bind پیاده سازی کردیم و همان طور که مشاهده میکنید اطلاعات وارد شده در TextBox ها به صورت پویا درهر دو span نشان داده میشود.
و تنها این نکته را یاداوری کنم که برای استفاده از AngularJS، بایستی از از Script زیر استفاده شود.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
و در انتها خروجی برنامه به شکل زیر میباشد:
موفق باشید. آموزش angular
- AngularJs
- 3k بازدید
- 5 تشکر