به کار بردن AngularJS در یک صفحه از وب سایت

در این کلید آموزشی، قصد داریم که شما را با چگونگی به کار بردن AngularJS در یک صفحه از وب سایت آشنا کنیم. به تنها چیزی که برای این مورد نیاز داریم، دانلود فایل مربوط به AngularJS و سپس ارجاع به آن فایل، در صفحه مورد نظرمان می باشد.

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

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

برای دانلود فایل AngularJS ، به وب سایت زیر مراجعه می کنیم (اگر وب سایت مورد نظر باز نشد، باید از نرم افزارهای ((عاج فیل شکن)) استفاده کنید تا وب سایت مورد نظر باز شود) :

در صفحه اصلی این وب سایت، گزینه ای برای دانلود AngularJS وجود دارد :

دقت کنید که Angular با AngularJS تفاوت دارد و فایل های آن نیز در وب سایت دیگری قرار دارد، پس باید بر روی گزینه DOWNLOAD ANGULARJS کلیک کنید.

پس از کلیک بر روی گزینه DOWNLOAD ANGULARJS ، صفحه ای به صورت زیر نمایش داده می شود :

ما در قسمت Branch ، آخرین نسخه را انتخاب می کنیم. همچنین در قسمت Build ، با توجه به اینکه قصد نداریم کدهای اصلی AngularJS را بخوانیم و تنها قصد داریم که از فایل آن استفاده نماییم، بنابراین گزینه Minified را انتخاب می کنیم که در آن، کدها فشرده شده اند تا فایل مورد نظر، دارای حجم کمتری باشد (ما باید همیشه Minified را در وب سایت خود قرار دهیم، زیرا نباید حجم فایل هایی که کاربران هنگام اجرای صفحه، به صورت خودکار از وب سایت ما دانلود می کنند، زیاد باشد).

بنابراین یک فایل با نام angular.min.js دانلود می شود (عبارت min در نام آن، اشاره به Minified دارد).

اکنون توسط یک نرم افزار ویرایشگر متن (مثل Notepad در ویندوز یا Adobe Dreamweaver)، یک فایل جدید با نام index.html می سازیم و کدهای زیر را درون آن می نویسیم (کدهای ساختار اصلی یک فایل HTML) :

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

این فایل، یک صفحه html است که به عنوان صفحه ای از وب سایت ما خواهد بود. آن را در پوشه ای دلخواه قرار می دهیم. سپس فایل angular.min.js را در کنار فایل صفحه index.html قرار می دهیم. البته فایل angular.min.js در موقعیت های دیگری نیز می تواند قرار بگیرد (تنها کافی است که آدرس نسبی آن نسبت به فایل index.html را بدانیم)، ولی ما ترجیح داده ایم که این دو فایل در کنار یکدیگر باشند :

اکنون قصد داریم که در فایل index.html ، به فایل angular.min.js ارجاع بدهیم (بر اساس آدرس نسبی آن). برای این منظور، باید کد زیر به کدهای صفحه index.html افزوده شود (البته در میان تگ head) :

دقت کنید که اگر قصد دارید به فایل موجود در اینترنت ارجاع دهید، باید به جای کد قبلی، کد زیر به کدهای صفحه افزوده شود :

بنابراین کدهای صفحه index.html به صورت زیر خواهد بود :

خوب تا اینجا، ما فقط به چارچوب AngularJS ارجاع داده ایم و هنوز استفاده ای از این چارچوب (Framework) نشده است. اکنون برای اجرای یکی از قابلیت های چارچوب AngularJS ، کدهای صفحه index.html را به صورت زیر تغییر می دهیم :

نتیجه :

نتیجه به صورت زیر است (متنی را در کادر وارد کنید و نتیجه را ببینید) :

همان طور که مشاهده می کنید، یک کادر ساخته شده است که هر متنی را که در آن وارد کنید، در بخش دیگری از صفحه، نمایش داده می شود. به عنوان مثال، ما آدرس وب سایت کلیدستان (kelidestan.com) را در آن وارد می کنیم و نتیجه به صورت زیر می باشد :

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

قبل از هر چیز، عبارت ng-app در تگ html ذکر شده است، که بدون وجود آن، چارچوب AngularJS هیچ تغییری در ساختار صفحه نمی دهد، بنابراین وجود آن بسیار مهم است و نباید فراموش شود :

بخش مهم بعدی، عبارت زیر در تگ input می باشد :

و سپس عبارت زیر را در بین زوج تگ h1 داریم (همان بخش که متن در آن تکرار می شود) :

در واقع این دو مورد آخری، تعیین کرده اند که هر متنی که توسط تگ input دریافت شد، در محلی که عبارت {{websiteAddress}} را نوشته ایم، نمایش داده شود (تکرار شود). به نام websiteAddress در آنها توجه کنید. عبارت ng-model="websiteAddress" اعلام می کند که هر متنی که توسط تگ input از کاربر دریافت شد (هنگام وارد کردن تک تک کاراکترهای متن) با نام websiteAddress شناخته شود. بنابراین چارچوب AngularJS ، در تمام صفحه به دنبال عبارت های {{websiteAddress}} جستجو کرده و مقدار تعیین شده برای websiteAddress را به جای آنها در صفحه نمایش می دهد.

سایر بخش ها هم که تگ های ساده مربوط به HTML می باشند. تگ input ، یک کادر در صفحه ایجاد می کند که برای دریافت متن از کاربر به کار می رود (مشخصه placeholder در این تگ، تعیین کرده که چه متنی به صورت توضیح در کادر خالی نمایش داده شود، البته قبل از اینکه کاربر، متنی را در آن وارد کند). تگ های label و h1 هم برای نمایش متن هایی دلخواه به کار رفته اند.

تگ br برای ایجاد فاصله عمودی و تگ hr برای ایجاد یک خط افقی به کار می رود.