JavaScript

مقدمه کار با AngularJs

تبلیغات
4 سوالی شهرداری
کانال تلگرام فتولیا

AngularJs یک فریم ورک جاوااسکریپت است و به صورت یک فایل .js ارائه می شود و به وسیله تگ <script> می توان آن را به صفحه الحاق کرد.

اضافه کردن AngularJs به صفحه

برای اضافه کردن فایل اصلی AngularJs کافیست کد زیر را در بخش <head> سایت قرار دهید :

توسعه قابلیت های HTML

کار اصلی فریم ورک AngularJs توسعه و بست دادن قابلیت های ذاتی HTML است . این کار به وسیله ng-دستور مورد نظر انجام می گیرد.

  • دستور ng-app یک اپلیکیشن وب را تعریف می کند
  • دستور ng-model مقادیر ورودی های HTML مثل (Input,Textarea,Select) را به برنامه می رساند
  • دستور ng-bind داده های اپلیکیشن را به عناصر HTML می رساند (Bind)

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

در کد بالا همانطور که می بینید فایل اصلی AngularJs در بالای صفحه اضافه شده است و شروع به کار کرده است.

سپس توسط دستور ng-app به AngularJs گفتیم که تگ <div> صاحب اپلیکیشن Angularjs است.

بعد از آن با دستور ng-model مقدار فیلد input را به متغیر اپلیکیشن “name” وصل کردیم.

در انتها با دستور ng-bind کاری کردیم که متغیر برنامه name به innerHtml تگ <p> متصل شود .

دستورات AngularJS

همانطور که در مثال بالا دیدید ، دستورات AngularJs در واقع خصیصه (Attribute) های HTML با پیشوند ng هستند.

برای مثال دستور ng-init ، متغیرهای برنامه را ایجاد می کند :

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

یا اگر valid بودن کدهای HTML برایتان اهمیت دارد می توانید از کد زیر به جای کد فوق استفاده کنید :

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

اگر می خواهید کدهای HTML صفحه Valid باشند می توانید به جای پیشوند ng- از پیشوند data-bg- استفاده کنید.

در ادامه سری آموزش ها با دستورات AngularJs بیشتر آشنا خواهید شد.

عبارت های Angularjs

عبارت ها (Expressions) در AngularJs داخل دابل آکولاد نوشته می شوند : {{ expression }}

این بخش شبیه Template Engine هایی است که در فریم ورک های PHP مورد استفاده قرار می گیرند تا نحو برنامه را از بخش نمایش آن جدا کنند . AngularJS داده ها را دقیقا جایی نمایش می دهد که عبارت نوشته شده باشد .

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

در کل عبارات در angularJs داده ها را به عناصر HTML منتقل می کنند مثل کاری که دستور ng-bind انجام می دهد.

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

در ادامه سری آموزش ها با عبارات AngularJS بیشتر آشنا خواهید شد.

اپلیکیشن های AngularJs

ماژول های Angularjs برنامه های Angularjs را تعریف می کنند و کنترلر های Angularjs برنامه های Angularjs را کنترل می کنند.

همانطور که در بالا نیز اشاره شد دستور ng-app نیز یک برنامه را تعریف می کند و دستور ng-controller کنترلر آن را مشخص می کند. به مثال زیر دقت کنید :

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

در کد بالا برنامه را بوسیله Module تعریف کردیم و در یک متغیر قرار دادیم

سپس بوسیله Controller کارکرد آن را کنترل کردیم

تا اینجا با مقدمات AngularJs آشنا شدید . در مباحث آینده بیشتر در مورد ماژول و کنترلر صحبت خواهیم کرد

منبع

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *