قسمت دوم AngularJS بررسی اتصال داده ها دستورالعملها رشته ها و شی ها

قسمت دوم AngularJS : اتصال داده ها دستورالعمل ها رشته ها و شی ها

باعرض سلام

در قسمت دوم از اموزش های صفر تا صد AngularJS اتصال داده ها ،دستور العمل ها ، رشته ها و شی ها در AngularJS مورد بررسی قرار خواهد گرفت.

پیشنهاد میشود قبل از ورود به قسمت دوم این اموزش قسمت اول را مورد بررسی قرار دهید.

اتصال داده ها

یکی از مفاهیم AngularJS ، اتصالِ داده است.

در زیر به بررسی یک نمونه کد AngularJS که با اتصال داده کار میکند میپردازیم:

کد بالا یک کادر متنی ایجاد میکند. درحالی که شما در ان تایپ میکنید خروجی ان در المان <h2> نمایش داده میشود.

ng-model یک دستور است که عنصر HTML را به یک اصطلاح متصل میکند. در کد بالا ، ما به این ویژگی نام name را اختصاص دادیم ، سپس از نام اختصاص داده شده در علامت مخصوص AngularJS بصورت روبرو استفاده میکنیم : {{name}}

همچنین شما میتوانید از قطعه کد بالا را بصورت زیر استفاده کنید.

دو قطعه کد بالا یک عمل را انجام میدهند با این تفاوت که ng-bind بر روی یک المان HTML اثر میگذارد و علامت {{}} بصورت خودکار برایمان نمایش خواهد داد.

اتصال داده ها به ما این کمک را میکند تا هماهنگ سازی خودکار بین مدل و نمایش دادن ان در کد HTML برقرار کنیم.

این دیدگاه اساسا DOM است که کاربر میبیند.

مدل داده هایی است که کاربر بر انها اثر میگذارد و تاثیر ان نیز برای کاربر نمایش داده میشود.

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

بررسی دستورالعمل های AngularJS

دستورالعمل های آنگولار مشابه صفات HTML هستند و اجازه میدهند که رفتار خاصی به عناصر DOM متصل گردد.

 

دستور ng-app یک برنامه را از طریق AngularJS راه اندازی میکند.

دستور ng-model یک ویژگی خاصی به المان های HTML اضافه میکند.

دستور ng-init مقدار داده های برنامه را اولویت بندی میکند.

به مثال زیر توجه کنید:

قطعه کد بالا یک مبدل ساده از درجه ی سلسیوس به فارنهایت میباشد. ما دو خواص را با استفاده از ng-model برای اتصال کادر دریافت متن و اعمال تبدیل سلسیوس به فارنهایت دریافت کردیم. در انتها مقدار محاسبه شده ی درجه ی سلسیوس بصورت فارنهایت در تگ p نمایش داده خواهد شد.

یکی دیگر از دستوالعمل های بسیار مفید در AngularJS ، دستورالعمل no-repeat است. با استفاده از این دستور میتوانیم یک ساختار HTML را به هر تعداد دلخواه تکرار کنیم.

به مثال زیر توجه کنید :

در بالا قطعه کدی نوشتیم که مقادیر ارایه ی members را گرفته و هر خانه را در نام قرار داده و تا اتمام این کار به تعداد هر خانه یک مرحله تکرار صورت میگیرد.

به یاد داشته باشید که شما میتوانید از دستورالعمل ها بصورت چندگانه نیز استفاده ببرید.

 

در زیر به بررسی انواع دیگری از عبارات می پردازیم.

عبارات آنگولار نیز همانند عبارات جاوااسکریپت عمل میکنند.میتواند شامل حروف ، متغییرها و ارایه ها باشد.

به قطعه کد زیر توجه کنید.

درصورت وجود عبارت ng-app متغییر حساب شده و جواب در خروجی نمایان خواهد شد ولی اگر ng-app را حذف کنیم بصورت عبارت نمایش داده خواهد شد و هیچ عملیاتی بر روی ان انجام داده نخواهد شد.

 

بیایید به مثالی که در css از انگولار استفاده کرده ایم بپردازیم. در این مثال رنگی از ما گرفته و ان کادران رنگی را که وارد کرده اید به خود گرفته .

همانطور که در مثال های قبل از ng-init استفاده کرده ایم برای درک بهتر این موضوع مثالی دیگر در زیر مورد بررسی قرار خواهیم داد.

در قطعه کد بالا در ابتدا در ng-init مقادیر اولیه را تعریف کرده ایم و بعد داخل پرانتز ها عبارات محاسبه شده و خروجی را به ما نمایش خواهد داد.

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

رشته ها در AngularJS

رشته های آنگولار همانند رشته ها در جاوااسکریپت خواهند بود. به قطعه کد زیر در باره ی رشته ها توجه کنید.

برای اتصال دو رشته در آنگولار از + استفاده کرده ایم و برای ایجاد فاصله بین دو متغییر فاصله را داخل دابل کوتیشن ها قرار میدهیم.

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

شی‌ها در AngularJS

شی‌ها هم همانند جاوا اسکریپت در انگولار تعریف خواهند شد . برای درک بهتر این موضوع به قطعه کد زیر توجه کنید.

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

آرایه ها در AngularJS

همانند موارد بالا آرایه ها هم نیز در آنگولار شبیه به جاوا اسکریپت خواهند بود. برای درک بهتر این موضوع به قطعه کد زیر توجه نمایید.

همانند موارد فوق اگر تمایل به ng-bind داشته باشیم میتوانیم قطعه کد فوق را ویرایش نماییم که از ذکر این موضوع پرهیز میکنیم.

 

بررسی عبارات در AngularJS و جاوا اسکریپت

اولین موضوع شباهت تعریف شی‌ها ، حروف و ارایه ها در انگولار و جاوااسکریپت خواهد بود.

دومین موضوع برخلاف جاوااسکریپت شما در انگولار این قابلیت را خواهید داشت که عبارات را داخل کدهای html مورد استفاده قرار دهید.

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

چهارمین موضوع آنگولار از فیلتر‌ها پشتیبانی میکند درصورتی که جاوااسکریپت این قابلیت را ندارد.

 

درصورت تمایل برای اطلاعات بیشتر میتوانید به سایت w3schools مراجعه کنید.

درصورت نیاز میتوانید سوالات خود را از طریق فرم نظرات با ما به اشتراک بگذارید!

امیدوارم که این قسمت از اموزش های کدپز مورد استفاده ی شما عزیزان قرار گرفته باشد.

برچسب ها : AngularJS چیست، آموزش صفر تا صد AngularJS

    دیدگاه ها

  1. لطفا سریعتر به اموزش های ویدیویی برسید !
    این اموزش ها رو خوندم جالب بودن تشکر از کارتون

    • درحال اماده سازی کامل مراحل اموزشی هستیم!
      به زودی کل کدپز با تغییرات جدیدی روبرو خواهد شد و اموزش های ویدیویی انگولار بخشی از تغییرات کدپزخواهد بود.

دیدگاه تازه ای بنویسید