دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۹
  • مرداد

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

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

      مقدمه

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

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

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

      مدل داده

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

      مثال:

      مثال : 

      نمای HTML

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

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

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

      مثال : 

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

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

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

      مثال : 

      یا شما می توانید از دستورالعمل 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
      به اشتراک بگذارید