مقدمه و نصب انگولار

امروزه ورود به دنیای برنامه‌ نویسی حرفه‌ ای چیزی نیست جز فراگیری تکنیک‌ ها و فریم‌ورک‌ های مدرن سمت کاربر یا Frontend و سمت سرور یا Backend.

پس از طی کردن نزدیک به ۶ فصل از مطالب مربوط به فریم ورک قدرتمند انگولار ۲ اینبار قصد داریم در سری جدید دوره‌های آموزشی شرکت روکسو، به توضیح مفصل (۰ تا ۱۰۰) آموزش فارسی فریم ورک قدرتمند انگولار بپردازیم. لازم به ذکر است، جهت ورود به این دوره آموزشی باید همواره پیش نیازهای زیر را گذرانده باشید. اما نکته‌ ی مهمی‌ ای که در این آموزش‌ها وجود دارد این است، برای ورود به دوره آموزشی انگولار تحت هیچ شرایطی نیاز به یادگیری نسخه‌های ۱ و ۲ این فریم‌ورک نیست،زیر این آموزش‌ها نیز به صورت گام به گام و ۰ تا ۱۰۰ ارائه می‌شوند و آخرین نسخه انگولار را پوشش می دهد:

• تسلط به مفاهیم مقدماتی تا پیشرفته ساختار CSS
• تسلط به مفاهیم مقدماتی تا پیشرفته ساختار HTML
• تسلط به مفاهیم مقدماتی و متوسطه زبان برنامه‌نویسی JavaScript

Angular (انگولار) چیست؟

این فریم ورک به زبان برنامه‌نویسی جاوا اسکریپت نوشته شده است. به صورت تخصصی تر باید خدمت شما عرض کنیم که از انگولار به عنوان یک ابزار برای ساخت نرم‌ افزارهای تک صفحه‌ای (Single Page Apps) یا SPA استفاده می‌شود.

همچنین این صفحات دارای حافظه ماندگار بوده و کاربر پس از کلیک روی دکمه‌های Back یا Next در مرورگر به صفحات قبل یا بعد بدون refresh شدن (بارگذاری مجدد) صفحه انتقال پیدا می‌کند.

وب سایت اصلی روکسو مثال بسیار مناسبی به عنوان یک نرم‌ افزار تک صفحه‌ای یا SPA است. با انگولار می‌توانید دنیای برنامه‌نویسی خود را تغییر داده و نرم‌ افزارهایی با سرعت اجرایی فوق العاده بالا مثل اپلیکیشن‌ های موبایل در بستر اینترنت ایجاد کنید.

تاریخچه‌ی انگولار

انگولار ۱ تحت عنوان AngularJs در سال ۲۰۰۹ توسط کمپانی قدرتمند گوگل زیر نظر آقای Misko Hevery ارائه گردید. این نسخه از انگولار در مدت زمان بسیار کوتاهی با استقبال بی‌ نظیر برنامه‌ نویسان سمت کاربر، روبه‌رو شد. زیرا به عنوان یکی از فریم‌ ورک‌ های سریع برای تولید نرم‌افزارهای تحت وب و بر پایه JavaScript وارد دنیای برنامه‌نویسان شده بود و آنها را به شدت تحت تاثیر قرار داد.

انگولار ۲ به عنوان یک بازنویسی مجدد از انگولار ۱ ایجاد شد این نسخه از فریم‌ورک قدرتمند انگولار در سال ۲۰۱۶ و پس از ۶ سال تلاش مداوم مجموعه‌ی گوگل تولید و ارائه شد. این نسخه بسیار متفاوت تر از نسخه ۱ بود و هیچگونه شباهت ساختاری با آن نداشت، هوش بالاتر و ارائه‌ی تکنیک‌های منحصر بفرد، این فریم‌ورک را در بالاترین رده‌ی جهانی نگه‌ داشت.

همچنین پس از این تغییرات عظیم نام اصلی از AngularJs به Angular 2 تغییر پیدا کرد.

انگولار ۴ به عنوان یک ویرایش قدرتمند‌تر از انگولار ۲ ایجاد شد. این نسخه در سال ۲۰۱۷ روانه دنیای برنامه‌نویسان گردید. نکته‌ی قابل توجه این است که تغییرات خیلی وسیعی در این نسخه نسبت به انگولار ۲ ایجاد نشد بلکه ساختار قبلی ویرایش و امکانات جدیدی به آن اضافه شد.

شاید این سوال برای شما پیش بیاید که انگولار ۳ چرا منتشر نشد؟ نسخه ۳ به عنوان یک ویرایش مقدماتی از نسخه ۲ نادیده و بنا به تشخیص کمپانی گوگل تولید مطرح نشد.

سپس انگولار نسخه ۵ در تاریخ ۱ نوامبر سال ۲۰۱۷ در اختیار توسعه دهندگان قرار گرفت. این نسخه یک نقطه عطف در انگولار به حساب می آید زیرا تغییراتی در زمینه کار با httpClient ها ایجاد شد.

در ۴ ام ماه می سال ۲۰۱۸ نسخه ۶ انگولار وارد دنیای برنامه نویسان شد. با بروز شدن انگولار به نسخه ۶ تغییرات خیلی زیادی انجام نگرفت. بلکه بیشتر محوریت تغییرات روی مفاهیم پلتفرم rxjs بود.

نسخه ۷ انگولار هم اکنون به عنوان آخرین نسخه آن بوده و در پاییز سال ۲۰۱۸ ارائه شد.

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

رابط خط فرمان انگولار یا Angular CLI چیست؟

یعنی شما می‌توانید با استفاده از این ابزار تنها با نوشتن چند دستور ساده فایل‌های خود را ایجاد کرده و آنها را مدیریت کنید و در نتیجه به جای آنکه با موس کار کرده و مدت زمان زیادی را صرف ایجاد فایل‌ها کنید، روی برنامه‌ی خود تمرکز کرده و امکانات نرم‌افزار خود را افزایش می‌دهید. برای استفاده از این ابزار باید ابتدا Node.js را روی سیستم یا سرور خود نصب کنید.

برای نصب نود روی این لینک کلیک کرده و سپس در انتهای صفحه دکمه‌ی سمت چپ که عبارت Recommended for Most Users به همراه آخرین نسخه نود روی آن درج شده را دانلود کنید.

پس از اینکه نرم‌ افزار Nodejs.org را دانلود و نصب کردید، یک پوشه جهت کار با پروژه‌ی خود در هر مسیری که دوست دارید ایجاد کنید. سپس از طریق CMD یا خط فرمان ویندوز به مسیر پوشه‌ی خود بروید:

پس از ورود به فولدر، باید تمام وابستگی‌های مورد نیاز را با استفاده از دستور npm که مخفف عبارت node package manager است در فولدر برنامه نصب کنیم. بنابراین دستور زیر را اعمال خواهیم کرد:

پس از اجرای دستور فوق، با دستور زیر ابزار cli انگولار را نصب می‌کنیم:

کلمه‌ی g مخفف global بوده و در صورت اعمال ابزار cli روی کامپیوتر شما نصب می‌شود. در صورتیکه node را به درستی نصب کرده باشید تمام وابستگی‌ها در سیستم شخصی شما و فضای localhost ایجاد می‌شود.

حال در ادامه برای ایجاد یک پروژه جدید انگولار دستور زیر را تایپ می‌کنیم:

همانطور که ملاحظه می‌کنید با نصب cli خط فرمان ng برای شما فعال شده و با نوشتن دستور فوق یک فولدر به نام my-first-app ایجاد شده که محتویات درون آن شامل تمام وابستگی‌ها فایل‌های موردنیاز برای شروع یک برنامه‌ی انگولاری است. بنابراین باید خروجی شما به صورت زیر باشد:

با اینکار یک سری فایل در پوشه جدید شما ایجاد شده است که به صورت خودکار توسط خط فرمان انگولار (Angular CLI) تولید شده است.

حال با استفاده از دستور زیر وارد پوشه‌ی اصلی برنامه می‌شویم:

پس از ورود به این پوشه در صورت وارد کردن دستور زیر تمام فایل‌های انگولار پردازش و کامپایل شده و در نهایت در مسیر http://localhost:4200 وب سایت شما در دسترس خواهد بود:

در صورتیکه این کار را به درستی انجام داده باشید با ورود به آدرس http://localhost:4200 با عبارت Welcome to app که به صورت زیر است، روبه‌رو خواهید شد.

به شما تبریک می‌گوییم تا به اینجای کار توانستید اولین پروژه‌ی انگولار ۴ خود را ایجاد کنید. در فصل ۱-۲ به آموزش توضیحات مرتبط با cli خواهیم پرداخت با ما همراه باشید.

توجه: دوستان عزیز آموزش ویدیویی انگولار 6 از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید.

منبع: روکسو