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

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

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

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

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

انگولار فریم ورک قدرتمندی‌ است که بر پایه‌ی MVC ایجاد شده و از آن جهت تولید نرم‌ افزارهای مدرن در سطح وب، موبایل و دسکتاپ، استفاده می‌کنند.

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

این سوال برای شما پیش می‌آید که SPA یا نرم‌افزار های تک صفحه‌ ای چیست؟
پاسخ: نرم‌ افزارهای مبتنی بر وب یا موبایل که با تکنولوژی SPA ساخته می‌شوند بدین صورت عمل می‌کنند که به هنگام کلیک کردن روی یک لینک در این نرم‌افزارها، صفحه بدون رفرش شدن به صفحه جدیدی منتقل می‌شود. یعنی بدون اینکه صفحه‌ی وب سایت شما از صفر و مجددا بارگذاری شود، کاربر به صفحه جدیدی منتقل خواهد شد.

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

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

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

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

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

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

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

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

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

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

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

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

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

رابط خط فرمان انگولار یا Angular Command Line Interface به عنوان یک ابزار برای ایجاد و مدیریت ساده نرم‌ افزارهای انگولاری است.

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

Node.js به عنوان یک پلتفرم یا فضای کاری جهت اجرای سریع و همزمان Real-Time نرم‌افزارها در بستر یک سرور امن توسط شرکت گوگل ایجاد شد. ابزار nodejs به شما کمک می‌کند تا وابستگی‌های موردنیاز برای تولید یک نرم‌افزار را به راحتی هرچه تمام تر دانلود کرده و در پروژه خود مورد استفاده قرار دهید.

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

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

// Your folder path replace with c:/roxoAngular4

cd c:/roxoAngular4

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

npm install

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

npm i -g @angular/cli

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

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

ng new my-first-app

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

installing ng
  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
  create src\app\app.component.spec.ts
  create src\app\app.component.ts
  create src\app\app.module.ts
  create src\assets\.gitkeep
  create src\environments\environment.prod.ts
  create src\environments\environment.ts
  create src\favicon.ico
  create src\index.html
  create src\main.ts
  create src\polyfills.ts
  create src\styles.css
  create src\test.ts
  create src\tsconfig.app.json
  create src\tsconfig.spec.json
  create src\typings.d.ts
  create .angular-cli.json
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Installing packages for tooling via npm.

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

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

cd my-first-app/

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

ng serve

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

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

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