• ۲۹
  • مرداد
توضیحات
  • دسته‌بندی‌ها : آموزش جاوا اسکریپت
  • بازدید : 394
جلسه ۰۶ : ارتباط داده ها در AngularJS
  • جزئیات
  • نوع محتواآموزش تصویری

فیلم های آموزشی آکادمی پی وی لرن

  • آموزش های مرتبط

  • ۲۹
  • مرداد

جلسه ۰۶ : ارتباط داده ها در AngularJS

  • دسته‌بندی‌ها :
  • بازدید : 394

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی ویلرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. در مباحث قبلی ما شما را با ماژول ها در AngularJS آشنا کردیم و همچنین  تعدادی از کاربردهای مهم ماژول ها را نیز ، بیان کردیم. اگر خاطرتان باشد گفتیم که یکی از کاربردهای ماژول ها در AngularJS ، فراهم کردن ارتباط بین داده ها در کد HTML و کد AngularJS، است. که در آموزش این بخش، ما شما را، بیشتر با مبحث
Data binding یا ارتباط داده ها در AngularJS ، آشنا خواهیم کرد.

ارتباط داده ها در AngularJS

اتصال داده در AngularJS هماهنگ سازی بین ماژول و کد HTML است.

مدل داده

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

مثال:

مثال : 

نمای HTML

ظرف HTML که در آن برنامه AngularJS نمایش داده می شود، view یا نمایه نامیده می شود.

view به مدل دسترسی دارد. و روش های متعددی برای نمایش داده های مدل در view وجود دارد.

شما می توانید از دستور ng-bind استفاده کنید. که innerHTML عنصر را به ملک مشخص شده مرتبط می کند:

مثال : نمای HTML

خودتان امتحان کنید »

مثال : 

شما همچنین می توانید از {{}} دوبار استفاده کنید. تا محتوا را از مدل نمایش دهید:

مثال : استفاده از براکت

خودتان امتحان کنید »

مثال : 

یا شما می توانید از دستورالعمل ng-model در کنترل های HTML برای اتصال مدل به نمایه استفاده کنید.

دستور العمل ng-model

از دستورالعمل
ng-model برای اتصال داده ها از مدل به نمایش در کنترل های HTML استفاده کنید (input, select, textarea)

مثال : دستورالعمل ng-model

خودتان امتحان کنید »

 

مثال : 

دستورالعمل ng-model یک اتصال دوطرفه بین مدل و نمایه فراهم می کند.

دو کاربرد ارتباط دادها

Data binding یا اتصال داده در AngularJS هماهنگ سازی بین مدل و view است.

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

مثال : عملکرد Data binding

خودتان امتحان کنید »

مثال : 

کنترلرهای AngularJS

اپلیکیشن ها در AngularJS توسط کنترلرها، کنترل می شود.

از آنجا که در بحث هماهنگ سازی فوری مدل و view ، کنترل کننده می تواند به طور کامل از view جدا شده و به سادگی بر داده های مدل متمرکز شود. با توجه به اتصال داده در AngularJS، نمای view ، هر تغییری را که در کنترلر ایجاد شده را، منعکس خواهد کرد.

مثال : عملکرد کنترلرها

خودتان امتحان کنید »

مثال : 

کلام آخر

در این بخش از سری آموزشهای کامل AngularJS ، شما با مباحث کاربرد Data binding یا ارتباط داده ها در AngularJS ، آشنا شدید. همچنین ساختار آن و نحوه استفاده در کد را نیز، یاد گرفتید. امدواریم که مطالب  فوق ، مورد توجه و پسند شما قرار گرفته باشد.

این پست را ارزیابی کنید
QR:  جلسه ۰۶ : ارتباط داده ها در AngularJS
به اشتراک بگذارید