باعرض سلام
در قسمت دوم از اموزش های صفر تا صد 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;diff32"> <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 مراجعه کنید.
درصورت نیاز میتوانید سوالات خود را از طریق فرم نظرات با ما به اشتراک بگذارید!
امیدوارم که این قسمت از اموزش های کدپز مورد استفاده ی شما عزیزان قرار گرفته باشد.
دیدگاه ها
لطفا سریعتر به اموزش های ویدیویی برسید !
این اموزش ها رو خوندم جالب بودن تشکر از کارتون
درحال اماده سازی کامل مراحل اموزشی هستیم!
به زودی کل کدپز با تغییرات جدیدی روبرو خواهد شد و اموزش های ویدیویی انگولار بخشی از تغییرات کدپزخواهد بود.