آموزش Angular در یک نگاه – مبانی

آموزش Angular در یک نگاه – مبانی

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

اجازه دهید بیشتر درباره این موضوع بحث کنیم. اگر شما یک توسعه دهنده با تجربه باشید، بطور حتم Angular را با کتابخانه ها و فریم ورک های نام آشنا مثل jQuery، Knockout، Backbond، Ember و حتی React مقایسه کرده اید، اگر شما چیزهایی درباره برنامه نویسی GUI بدانید، احتمالا سعی کرده اید آنگولار را با MVC یا MVVM ارتباط دهید. این انگیزه ها طبیعی هستند، اما اینها می توانند باعث عدم درک کردن ویژگی های اصلی Angular شوند. برای این فصل تنها، من تنها از شما می خواهم به Angular به عنوان یک فریم ورک JavaScript فکر کنید.

خوب، ما با سه اصول اساسی Angular، کار را شروع خواهیم کرد: expressions، directives و scopes. با این حال قبل از کار با مثال ها، اجازه دهید بررسی سریعی از چگونگی کار angular در صفحات وب داشته باشیم.

راه اندازی

از کجا Angular را دانلود کنیم؟ در حالی که می توانید از وب سایت رسمی angular دانلود کنید، بارگذاری آنگولر در داخل صفحات خود از طریق CDN نیز امکان پذیر است، به عنوان مثال خط زیر را در فایل index.html در بین تگ head قرار می دهیم:

angular-download

ولی در این تست، می خواهم از طریق NPM آنگولار را نصب کنم. برای این کار با وارد کردن دستورات node -v و npm -v در خط فرمان مطمئن شوید، Node.js و NPM در حال حاظر بر روی سیستم شما نصب است. اگر موارد خواسته شده نصب نیست می توانید برنامه Node.js را در سایت رسمی آن دانلود کنید. توجه داشته باشید که لازم نیست npm را بصورت جداگانه نصب کنید، npm همراه با node است.

نصب Node.js با NVM در سرور مجازی (VPS)

اگر از ویندوز استفاده می کنید، برای اینکه در هیچ کدام از دستورات خط فرمان به مشکل بر نخورید، پیشنهاد می کنم Git را نیز نصب کنید.

خوب امیدوارم موارد خواسته شده را به درستی نصب کرده باشید. حال برگردیم به نصب angularjs.

ابتدا دستوارت زیر را در خط فرمان خود اجرا کنید:

همانطور که می دانیم خط اول باعث می شود در دایرکتوری جاری پوشه ای به نام project ایجاد شود (در این مثال پوشه project را در دایرکتوری Desktop ایجاد کرده ام) و با دستور خط دوم وارد دایکتوری تازه ایجاد شده می شویم. البته که دستور cd project تقریبا معدل با _$ عمل می کند. حال که پوشه project را ایجاد کردیم:

mkdir

دستور npm init را در ادامه دستورات اجرا می کنیم. این دستور باعث می شود فایل package.json در ریشه آپ ما ساخته شود. هر بسته npm شامل یک فایل package.json می باشد. این فایل تمام اطلاعات پروژه ما را نگهداری می کند، شامل نام پروژه، نسخه پروژه، توضیحات می باشد و از همه مهمتر وابستگی های پروژه ما را در خود نگهداری می کند، اطلاعات خواسته شده را بنا به سلیقه خود وارد کنید:

npm-init

حال دستور زیر را در ادامه دستورات وارد شده اجرا کنید:

دستور بالا باعث می شود آخرین نسخه منتشر شده آنگولر در پروژه ما کپی شود، پارامتر save-- نیز angular را به عنوان یک وابستگی در فایل package.json اضافه می کند و بسته ها در node_modules ذخیره می شوند. این فایل را باز کنید و مشاهده کنید:

npm-isntall-angular

همانطور که می بینیم angular در پوشه node_modules اضافه شده است.

حال اجازه دهید فایل angular را به پروژه خود لینک کنیم. برای این کار ابتدا در ریشه پروژه فایل index.html را ساخته و اچ تی ام ال های ساده زیر را به آن اضافه کنید:

بعد از اینکه کتابخانه آنگولار را به فایل index.html اضافه کردیم، حال نیاز داریم به آنگولار این اجازه را دهیم که کدام بخش از سند HTML را باید مدیریت کند. به خاطر داشته باشید که آنگولار به جای جاوا اسکریپت‌گرا، اچ‌تی‌ام‌ال‌گرا است. به جای اینکه مقداری جاوا اسکریپت برای اجرا شدن بنویسیم، از HTML های غیر استاندارد که فقط Angular آنها را شناسایی می کند استفاده می کنیم.

همانطور که در خط 1 مشاهده می کنیم، ng-app یک ویژگی خاص است که به هر عنصر DOM می توانیم اضافه کنیم. برای مثال، در این تست، ما np-app را در عنصر <html> قرار داده ایم، البته که می توانیم در هر کجایی که دلمان خواست قرار دهیم! ولی معمولا در عناصر html و body قرار می گیرد. در مثال بالا، با قرار دادن ng-app در html یا body باعث می شویم، angular کنترل کل صفحه ما را به دست گیرد. همانطور که گفتم می توانید آنگولار را در بخش کوچکتری از سند خود اضافه کنید، تا همراه با دیگر فریم ورک ها یا دیگر برنامه آنگولار اجرا شود.

خط بالا باعث می شود تا انگولار با دیدن رشته بین {{}} نوشته ما را چاپ کند.

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

 

منابع