AngularJs از سیر تا پیاز – قسمت دوم

انقیاد داده و برنامه Hello World با Angular

بهترین برنامه برای شروع کار با Angular برنامه معروف Hello World است. ابتدا با یک سری کد HTML ساده شروع می کنیم

q

اگر برنامه را اجرا کنید می بینید که در صفحه یک جعبه متنی وجود دارد که با نوشتن هر کلمه در آن در پایین عبارتی را نمایش می دهد مثلا اگر World بنویسید در پایین عبارت Hello World نمایش داده می شود. چگونه این عمل اتفاق می افتد در ادامه توضیح خواهم داد.

معرفی انقیاد داده در AngularJs

در فریمورک های معمولی وب، مانند Rails، کنترلر داده ها را از مدل می گیرد و باهم ترکیب می کند و با یک غالب تعریف شده به کاربر در سمت ویو نمایش می دهد. این ترکیب یک ویوی یک طرفه یا single-way ایجاد می کند. بدون ساخت مولفه های جاوا اسکریپت سفارشی، ویو فقط داده ای را برمی گرداند یا نمایش می دهد که مدل در زمان render شدن ویو ارسال کرده است که در همین زمان چندین فریمورک جاوااسکریپت وجود دارند که انقیاد داده بین ویو و مدل را به صورت خودکار انجام می دهند.

AngularJs به روش مختلفی این کار را انجام می دهد. علاوه بر اینکه داده ها را داخل غالب تعریف شده ادغام می کند و اشیای DOM را جایگذاری می کند، AngularJs یک غالب live یا زنده را به عنوان ویو ایجاد می کند. این ویژگی مسلما یکی از بهترین ویژگی ها در AngularJs می باشد که به ما اجازه می دهد تا برنامه Hello World را با تنها ۱۰ خط کد و بدون حتی یک خط کد جاوا اسکریپت، ایجاد کنیم.

این ویژگی با قرار دادن فایل angular.js در صفحه HTML و با استفاده از صفت ng-app روی یکی از اشیا، کار می کند. صفت ng-app بیان می کند که هر چیزی که در داخل این شی که صفت ng-app دارد قرار بگیرد مربوط به Angular است و کامپایلر متوجه می شود که این قطعه از کد را به صورت Angular باید برخورد کند.

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

Angular مقداری را که مدل برمی گرداند همیشه به خاطر می سپارد مانند مقدار name در مثال Hello World. زمانی که Angular فکر کند که مقدار می تواند تغییر کند، متد $digest() را اجرا می کند تا بررسی کند مقدار dirty است یا خیر. این فرآیند dirty checking یا چک کردن کثیف نامیده می شود که فقط چک می کند ببیند که مقدار مدل تغییر کرده است یا خیر. هرچیزی که پتانسیل تغییر را داشته باشد، Angular عمل dirty check را داخل یک حلقه انجام می دهد تا مطمئن شود که همه چیز سازگار است.

زمانی که از فریمورک های دیگر مانند KnockoutJs استفاده می کنید، این فریمورک ها یک تابعی را که به عنوان شنونده تغییر یا change listener شناخته می شوند، به رویداد تغییر ضمیمه می کنند که این فر آیند یک فرآیند بسیار پیچیده و ناکارآمد است. برخورد با مکانیزم تغییر ، ردیابی وابستگی و رخ دادن بسیاری از رویدادها پیچیده است و اغلب وقتا منجر به خطا در کارایی برنامه می شود.

انقیاد داده ساده یا simple data binding

اگر به تصویر کدی که در بالا قرار دادم توجه کنید می بینید که چگونه مقدار صفت name را به فیلد input با استفاده از directive یا رهنمود ng-model انقیاد کردم. این انقیاد به این معنی است که هر مقداری که شما در فیلد input بنویسید آن مقدار به name انقیاد می شود و در صفحه نمایش می دهد مثلا اگر مقدار Ali را در فیلد بنویسید در صفحه عبارت Hello Ali را مشاهده می کنید.

توجه: Bi-directional یا دوجهته که در این بخش از آن استفاده می کنیم به این معنی است که اگر در view مقدار تغییر کند، مدل با روش چک کردن کثیف که قبلا در مورد آن توضیح دادم، مقدارش تغییر می کند و با تغییر مقدار در مدل، مقدار در view هم تغییر کرده و نتیجه آن را در صفحه مشاهده می کنید.

برای تنظیم این نوع انقیاد، ما از تابع ng-model بر روی فیلد input استفاده می کنیم مانند کد زیر:

qw

میبینید که به چه راحتی عمل انقیاد را انجام دادیم. الان ما می توانیم ببینیم که با تغییر مقدار در ویو، مقدار مدل هم تغییر می کند. زمانی که مقدار داخل input تغییر کند مقدار person.name نیز تغییر کرده و در ویو نتیجه این تغییر را مشاهده می کنید. حالا می توانید ببینید که چگونه انقیاد دو طرفه انجام دادیم. انقیاد دو طرفه را به شکل دیگری هم می توانیم انجام دهیم که در اینجا با استفاده از کنترلر این کار را انجام می دهم.

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

wf

در این مثال ما یک ساعت ساختیم که در هرثانیه مقدار ساعت را تغییر می دهد. کد مربوط به کنترلر را در تصویر زیر مشاهده می کنید:

cl

همانطور که مشاهده می کنید کنترلر یک پارامتری با عنوان $scope دارد که در بخش های بعد در مورد این پارامتر توضیح خواهم داد. در این مثال وقتی تایمر شروع به کار می کند تابع updateClock اجرا می شود و مقدار ساعت جاری در متغیر $scope.clock قرار می گیرد. حال ما می توانیم مقدار متغیری که در داخل $scope قرار گرفته را در ویو با استفاده از {{}} نشان دهیم:

df

تابع کنترلر را می توانیم در داخل همان ویو و در داخل تگ script بنویسیم و یا در فایل جداگانه ای با پسوند .js بنویسیم و لینک این فایل را در داخل ویوی مورد نظر قرار دهیم.

در بخش بعد در مورد ماژول ها صحبت خواهیم کرد.

منبع: کتاب ng-book

۳ دیدگاه به ثبت رسیده است .

  1. بهزاد شیرانی می‌گه:

    سلام
    ممنون از مطلبتون، منتظر ادامه مبحث هستیم

  2. امیرمسعود می‌گه:

    عالی دوست عزیز. ثابت قدم باشید انشالله. منتظر ادامه مبحث هستیم. موفق باشی

  3. زهره می‌گه:

    سلام خیلی خوب بود کامل و اصولی و خیلی سلیس
    تشکر میکنم و منتظر ادامه هستم

مشترک خبرنامه شوید

  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

نقش مدیر تضمین کیفیت

نقش مدیر تضمین کیفیت در چابک چیست؟ آیا ما واقعا ...

چگونه وارد کار تست ن

مثل همه ی کارها، کار تست نرم افزار و انتخاب ...

ابزارهای مفید برای ت

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

BDD Best Practice

معرفی BDD BDD یا توسعه رفتار محور یک متدولوژی است برای ...

Agile Test Strategy

در محیط چابک یا agile، جایی که ما روی اسپرینت ...