آموزش قدم به قدم AngularJS (قسمت اول)

AngularJS (إنگیولر‌جِی‌اس) یکی از مشهورترین و بهترین فریم‌ورک‌های جاوااسکریپت است. ویژگی قدرمند Data Binding دوطرفه در AngularJS کار کردن با اشیای JavaScript و HTML را بسیار ساده کرده است. دلیل اصلی پیدایش AngularJS بایندیگ و بایندینگ و بایندیگ بوده است. AngularJS یک بایندیگ فریم‌ورک است که رابط کاربری HTML را به اشیای JavaScript بایند می‌کند. بایندینگ در انگولار جی اس با انجام این کار، حجم زیادی از کدهایی که برای ایجاد ارتباط بین HTML و اشیای JavaScript نوشته می‌شد کاسته شده است. از آنجا که از AngularJS از الگوهای طراحی MVC و MVVM، به طور همزمان پشتیبانی می‌کند، آن را به عنوان MVW(Model-View-Whatever) و یا “مدل، ویو و هر چیز دیگری” می‌شناسند. Mv*

قدم اول : درست کردن یک صفحه HTML ساده

می‌خواهیم با هم یک پروژه ساده که فقط شامل HTML ،CSS و JavaScript است را درست کنیم، برای اینکار ابتدا یک پوشه در یک مسیر دلخواه درست کنید، سپس Visual Studio را باز کرده و روی File->Open->Website مانند تصویر زیر کلیک کنید. وقتی که شما یک پوشه را به عنوان Website باز می‌کنید، Visual Studio فایل‌های اضافی مانند web.config و global.asax و … را به پروژه اضافه نمی‌کند. باز کردن وب سایت و مسیر پوشه‌ای که درست کرده بودید را مانند شکل زیر به آن بدهید. 2 کار شما تمام شد، شما توانستید یک پروژه بسیار ساده درست کنید، که هیچ چیزی در آن وجود ندارد. این فقط یک پروژه خالی است که فایل های مخصوص مایکروسافت هم در آن دیده نمی‌شود. 3 بیایید یک صفحه HTML ساده درست کنیم و نام آن را HelloWorld.html بگذاریم. 3 NewHTML در این صفحه HTML یک TextBox درست می‌کنیم و اسم آن را txtHello می‌گذاریم، سپس این TextBox را به تابع جاوا اسکریپتی به نام Hello بایند خواهیم کرد. و حالا می‌خواهیم از AngularJS برای بایند کردن این دو موجودیت استفاده کنیم.

قدم دوم : اضافه کردن AngularJS به پروژه

حالا که رابط کاربری HTML و کلاس های JavaScrip را در جای خود قرار دادیم، بیایید اول AngularJS را دانلود کنیم. برای این کار روی پروژه راست کلیک کرده و گزینه Manage NuGet Packages را مانند تصویر انتخاب کنید. MangeNuGet Packages کلمه AngularJS را در کادر جستجو وارد کنید، سپس AngularJS Core را انخاب کرده و روی دکمه Install کلیک کنید. در لیست ظاهر شده چندین AngularJS وجود دارد که Extension های AngularJS هستند. که به تدریج در پست های بعدی راجع به آنها صحبت خواهیم کرد. مهم ترین آن‌ها Angular core است، روی آن کلیک کنید تا به پروژه شما اضافه گردد. NuGet پس از نصب، شما می‌توانید فایل های Angular را در پوشه Scripts ببینید. AngularJS Scripts; حالا با استفاده از تگ script مانند تصویر زیر به فایل Angular (به خطوط Bold شده نگاه کنید) Reference دهید.

قدم سوم : اضافه کردن عبارت های ng-controller و ng-model

حالا برای اتصال کلاس HelloWorld با کادر متنی HTML به دو چیز نیاز دارید : اول، درست کردن یک نمونه از کلاس HelloWorld دوم، تنظیم خاصیت شی HelloWorld به TextBox برای این کار ما به ng-controller و ng-model نیاز داریم. به ng-controller و ng-model در إنگیولر‌جِی‌اس directive گفته می‌شود. به یاد داشته باشید که إنگیولر‌جِی‌اس یک زبان برنامه‌نویسی اعلانی است. اعلانی یعنی اینکه شما فقط directive ها را اضافه می‌کنید، و بدون اینکه نیاز باشد چگونگی انجام آن کار را به آن بگویید کاری که می‌خواهید را برای شما انجام می‌دهد. دایرکتیو ng-controller یک شی از کنترولر HelloWorld درست کرده و آن را به تگ div بایند می‌کند، و ng-model مقدار فیلد input را به پراپرتی txtHello بایند می‌کند. همانطور که در تصویر زیر نشان داده شده، برای نمایش پراپرتی txtHello روی صفحه نمایش، به {{عبارت مورد نظر}} نیاز داریم. بنابراین وقتی چیزی را در TextBox تایپ می‌کنیم، در تگ div نمایش داده خواهد شد.

قدم چهارم : ng-app و مفهوم scope

حالا اگر دایرکتیو ng-controller نمونه‌ها(instance) را درست می‌‌کند، اگر مانند کد پایین، چندین دایرکتیو ng-controller در صفحه HTML خود داشته باشید چه اتفاقی خواهد افتاد. یک instace درست می‌کند یا چند instance ؟ درباره این موضوع فکر کنید… بدیهی است که شما به عنوان یک برنامه‌نویس، دوست دارید instance های مختلف از HelloWorld داشته باشید و بتوانید به هر دو div موجود در صفحه HTML بایند کنید. این دقیقاً همان کاری است که AngularJS برای ما انجام می‌دهد. اما حالا که دو instance متفاوت در یک صفحه HTML داریم، محدوده استفاده (یا scope ) این دو instance چگونه تعیین می‌شود. آیا در تمام صفحه HTML قابل استفاده است ؟ محدوده استفاده (یا scope ) این دو instance با تگ <div> آغاز شده و با تگ </div> به پایان می‌رسد.AngularJS وقتی به دایرکتیو ng-controller برخورد می‌کند، این instance ها را به صورت خودکار می‌سازد. حالا اگر بخواهیم این instance ها با هم ارتباط داشته باشند و داده هایشان را با هم به اشتراک بگذارند باید چه کار کنیم ؟ ما چیزی به نام ng-app داریم که این کار را برای ما انجام می‌دهد. ng-app یک شی درست می‌کند که از طریق آن تمام controller ها را کنترل می‌کند و به آن‌ها کمک می‌کند تا بتوانند داده‌هایشان را با هم به اشتراک بگذارند.

قدم پنجم راه اندازی پروژه و دیدن نتایج

خوب، حالا که همه تنظیمات را انجام دادیم، برای شروع کار پروژه Angular به مقداری کد احتیاج داریم. ما می‌خواهیم َAngular اشیا controller و ng-app را بسازد و بایندینگ را برای ما انجام دهد. بنابراین به کد هایی که در پایین می‌بینید احتیاج داریم. اول یک instance از app می‌سازیم، سپس یک شی controller به app اضافه می‌کنیم. همین بود، کلید Ctrl+F5 را فشار دهید و از بایندیگ خودکار لذت ببرید، حالا وقتی چیزی را در TextBox وارد می‌کنید، عبارت پایین به صورت خودکار Update می‌شود. Completed کد نهایی به صورت کامل موضوع بعدی چیست؟ در درس بعدی در مورد event ها و validation ها در Angular صحبت خواهیم کرد.

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

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