با عرض سلام
در قسمت دوم از آموزش‌های صفر تا صد AngularJS اتصال داده‌ها، دستورالعمل، رشته‌ها و شی‌ءها در AngularJS موردبررسی قرار خواهد گرفت.
پیشنهاد می‌شود قبل از ورود به قسمت دوم این آموزش قسمت اول را موردبررسی قرار دهید.
اتصال داده‌ها
یکی از مفاهیم AngularJS ، اتصالِ داده است.
در زیر به بررسی یک نمونه کد AngularJS که بااتصال داده کار می‌کند می‌پردازیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE HTML> <html ng-app> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> </head> <body> <label>نام :</lanel> <input type="text" ng-model="name" placeholder="لطفا نام خود را وارد کنید."> <hr /> <h2>سلام {{name}}</h2> </body> </html> |
کد بالا یک کادر متنی ایجاد می‌کند. درحالی‌که شما دران تایپ می‌کنید خروجیان در المان <h2> نمایش داده می‌شود.
ng-model یک دستور است که عنصر HTML را به یک اصطلاح متصل می‌کند. در کد بالا، ما به این ویژگی نام name را اختصاص دادیم، سپس از نام اختصاص داده‌شده در علامت مخصوص AngularJS به‌صورت روبرو استفاده می‌کنیم: {{name}}
همچنین شما می‌توانید از قطعه کد بالا را به‌صورت زیر استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html ng-app> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> </head> <body> <label>نام :</lanel> <input type="text" ng-model="name" placeholder="لطفا نام خود را وارد کنید"> <hr /> <h2>سلام <span ng-bind="name"></span></h2> </body> </html> |
دو قطعه کد بالا یک عمل را انجام می‌دهند با این تفاوت که ng-bind بر روی یک المان HTML اثر می‌گذارد و علامت {{}} به‌صورت خودکار برایمان نمایش خواهد داد.
اتصال داده‌ها به ما این کمک را می‌کند تا هماهنگ‌سازی خودکار بین مدل و نمایش دادنان در کد HTML برقرار کنیم.
این دیدگاه اساساً DOM است که کاربر می‌بیند.
مدل داده‌هایی است که کاربر بر آنها اثر می‌گذارد و تأثیر آن نیز برای کاربر نمایش داده می‌شود.
اتصال به داده‌ها، یک طرح از اصطلاحات را در هر بار تغییر نمایش می‌دهد. هنگامی‌که مدل را تغییر دهید آن تغییر از طریق اصطلاحات به شما نمایش داده خواهد شد.
بررسی دستورالعمل‌های AngularJS
دستورالعمل‌های آنگولار مشابه صفات HTML هستند و اجازه می‌دهند که رفتار خاصی به عناصر DOM متصل گردد.
دستور ng-app یک برنامه را از طریق AngularJS راه‌اندازی می‌کند.
دستور ng-model یک ویژگی خاصی به المان‌های HTML اضافه می‌کند.
دستور ng-init مقدار داده‌های برنامه را اولویت‌بندی می‌کند.
به مثال زیر توجه کنید:
|
1 2 3 4 5 |
<div ng-app ng-init="Celsius=0;diff=32"> <p>سلسیوس: <input type="text" ng-model="Celsius"></p> <p>فارنهایت: {{ Celsius*1.8+diff}}</p> </div> |
قطعه کد بالا یک مبدل ساده از درجه‌ی سلسیوس به فارنهایت می‌باشد. ما دو خواص را با استفاده از ng-model برای اتصال کادر دریافت متن و اعمال تبدیل سلسیوس به فارنهایت دریافت کردیم. در انتها مقدار محاسبه‌شده‌ی درجه‌ی سلسیوس به‌صورت فارنهایت در تگ p نمایش داده خواهد شد.
یکی دیگر از دستورالعمل‌های بسیار مفید در AngularJS، دستورالعمل no-repeat است. با استفاده از این دستور می‌توانیم یک ساختار HTML را به هر تعداد دلخواه تکرار کنیم.
به مثال زیر توجه کنید :
|
1 2 3 4 5 6 7 |
<div ng-app ng-init="members=['Afzali', 'Moadi', 'Hosseinzadeh'] "> <ol> <li ng-repeat="name in members"> {{name}} </li> </ol> </div> |
در بالا قطعه کدی نوشتیم که مقادیر ارائه‌ی members را گرفته و هر خانه را در نام قرار داده و تا اتمام این کار به تعداد هر خانه یک مرحله تکرار صورت می‌گیرد.
به یاد داشته باشید که شما می‌توانید از دستورالعملها به‌صورت چندگانه نیز استفاده ببرید.
در زیر به بررسی انواع دیگری از عبارات می‌پردازیم.
عبارات آنگولار نیز همانند عبارات جاوااسکریپت عمل می‌کنند. می‌توانند شامل حروف، متغیرها و ارائه‌ها باشد.
به قطعه کد زیر توجه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>{{ 5 + 5 }}</p> </div> </body> </html> |
در صورت وجود عبارت ng-app متغیر حساب‌شده و جواب در خروجی نمایان خواهد شد ولی اگر ng-app را حذف کنیم به‌صورت عبارت نمایش داده خواهد شد و هیچ عملیاتی بر رویان انجام داده نخواهد شد.
بیایید به مثالی که در css از انگولار استفاده کرده‌ایم بپردازیم. در این مثال رنگی از ما گرفته و آن کادران رنگی را که وارد کرده‌اید به خود گرفته.
|
1 2 3 4 5 |
<div ng-app="" ng-init="myCol='lightblue'"> <input style="background-color:{{myCol}}" ng-model="myCol"> </div> |
همان‌طور که در مثال‌های قبل از ng-init استفاده کرده‌ایم برای درک بهتر این موضوع مثالی دیگر در زیر موردبررسی قرار خواهیم داد.
|
1 2 3 4 5 |
<div ng-app="" ng-init="quantity=1;cost=5"> <p>مجموع: {{ quantity * cost }}</p> </div> |
در قطعه کد بالا در ابتدا در ng-init مقادیر اولیه را تعریف کرده‌ایم و بعد داخل پرانتزها عبارات محاسبه‌شده و خروجی را به ما نمایش خواهد داد.
اگر تمایل به استفاده از ng-bind داشته باشیم قطعه کد بالا را به‌صورت زیر خواهیم نوشت.
|
1 2 3 4 5 |
<div ng-app="" ng-init="quantity=1;cost=5"> <p>مجموع: <span ng-bind="quantity * cost"></span></p> </div> |
رشته‌ها در AngularJS
رشته‌های آنگولار همانند رشته‌ها در جاوااسکریپت خواهند بود. به قطعه کد زیر درباره‌ی رشته‌ها توجه کنید.
|
1 2 3 4 5 |
<div ng-app="" ng-init="firstName='Morteza';lastName='Afzali'"> <p>The name is {{ firstName + " " + lastName }}</p> </div> |
برای اتصال دو رشته در آنگولار از + استفاده کرده‌ایم و برای ایجاد فاصله بین دو متغیر فاصله را داخل دابل کوتیشن‌ها قرار می‌دهیم.
اگر تمایل به استفاده از ng-bind داشته باشیم قطعه کد بالا به‌صورت زیر خواهیم نوشت.
|
1 2 3 4 5 |
<div ng-app="" ng-init="firstName='Morteza';lastName='Afzali'"> <p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p> </div> |
شی‌ءها در AngularJS
شی‌ءها هم همانند جاوا اسکریپت در انگولار تعریف خواهند شد. برای درک بهتر این موضوع به قطعه کد زیر توجه کنید.
|
1 2 3 4 5 |
<div ng-app="" ng-init="person={firstName:'Morteza',lastName:'Afzali'}"> <p>The name is {{ person.lastName }}</p> </div> |
اگر تمایل به استفاده از ng-bind داشته باشیم قطعه کد بالا به‌صورت زیر خواهیم نوشت.
|
1 2 3 4 5 |
<div ng-app="" ng-init="person={firstName:'Morteza',lastName:'Afzali'}"> <p>The name is <span ng-bind="person.lastName"></span></p> </div> |
آرایه‌ها در AngularJS
همانند موارد بالا آرایه‌ها هم نیز در آنگولار شبیه به جاوا اسکریپت خواهند بود. برای درک بهتر این موضوع به قطعه کد زیر توجه نمایید.
|
1 2 3 4 5 |
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>سومین ارایه : {{ points[2] }}</p> </div> |
همانند موارد فوق اگر تمایل به ng-bind داشته باشیم می‌توانیم قطعه کد فوق را ویرایش نماییم که از ذکر این موضوع پرهیز می‌کنیم.
بررسی عبارات در AngularJS و جاوا اسکریپت
اولین موضوع شباهت تعریف شی‌ءها، حروف و ارائه‌ها در انگولار و جاوااسکریپت خواهد بود.
دومین موضوع برخلاف جاوااسکریپت شما در انگولار این قابلیت را خواهید داشت که عبارات را داخل کدهای html مورداستفاده قرار دهید.
سومین موضوع آنگولار برخلاف جاوااسکریپت از حلقه‌ها، شرط‌ها و استثناها پشتیبانی نمی‌کند.
چهارمین موضوع آنگولار از فیلترها پشتیبانی می‌کند درصورتی‌که جاوااسکریپت این قابلیت را ندارد.
در صورت تمایل برای اطلاعات بیشتر می‌توانید به سایت w3schools مراجعه کنید.
در صورت نیاز می‌توانید سؤالات خود را از طریق فرم نظرات با ما به اشتراک بگذارید!
امیدوارم که این قسمت از آموزش‌های کدپز مورداستفاده‌ی شما عزیزان قرارگرفته باشد.
2 Comments
Join the discussion and tell us your opinion.
لطفا سریعتر به اموزش های ویدیویی برسید !
این اموزش ها رو خوندم جالب بودن تشکر از کارتون
درحال اماده سازی کامل مراحل اموزشی هستیم!
به زودی کل کدپز با تغییرات جدیدی روبرو خواهد شد و اموزش های ویدیویی انگولار بخشی از تغییرات کدپزخواهد بود.