دوره تصویری آموزش انگولار ۲ – جلسه اول

در این دوره قصد داریم انگولار ۴ و در واقع انگولار ۲ + را به شما آموزش دهیم. “۲+” یعنی بعد از این که نسخه جدید انگولار که در واقع با نام انگولار ۲ شناخته می شود، معرفی شد، انگولار ۲ پیشرفت کرد و سپس انگولار ۴ و امروز نسخه ۵ انگولار موجود است.

ایجاد پروژه

برای ایجاد یک پروژه انگولار ۲ می توانیم از توضیحات موجود در سایت انگولار استفاده کنیم و پروژه را ایجاد کنیم. برای این منظور وارد سایت angular.io می شویم که توضیحات مربوط به نحوه ایجاد پروژه در آن موجود است. روی دکمه GET STARTED کلیک می کنیم که در این بخش، توضیحات نحوه تولید پروژه انگولار ۲ آمده است. اولین چیزی که برای ایجاد یک پروژه انگولار ۲ نیاز است، angular CLI می باشد که CLI مخفف عبارت Command Line Interface می باشد.

نصب Nodejs

قبل از نصب angular CLI می بایست NodeJs و npm را روی سیستم خود نصب کرده باشیم. برای این منظور وارد سایت nodejs.org می شویم و نسخه مربوط به سیستم عامل خود را از این سات دانلود کرده و نصب می نماییم. همراه با نصب npm، nodejs (که مخفف عبارت Node Package Manager است) نیز نصب می شود. npm برای نصب پکیج های مربوط به پروژه های مختلف، ازجمله react و angular به کار می رود.

نصب Angular cli

بعد از نصب nodejs وارد command prompt ویندوز می شویم. برای این کار در منوی استارت، cmd را سرچ می کنیم. بعد از باز شدن command prompt در آن، دستور npm install -g @angular/cli را وارد می کنیم. (“g” به معنای نصب پکیج به صورت globally روی کل ویندوز می باشد و فقط مخصوص یک پروژه خاص نیست) بعد از نوشتن دستور، کلید اینتر را می زنیم که شروع به نصب angular می کند.
در مرحله بعد، برای ایجاد پروژه در command prompt دستور ng new project1 (که در اینجا project1 نامی است دلخواه که ما برای پروژه خود انتخاب کرده ایم) را وارد کرده و اینتر می زنیم و منتظر می مانیم تا پروژه ایجاد شود.

command prompt را که باز می کنیم، در خط آخر متنی نوشته شده است که آدرس ایجاد پروژه انگولار شما می باشد. برای تغییر این آدرس، می توانید به محل مورد نظر رفته و با نگه داشتن کلید shift راست کلیک کرده و گزینه open command window here را انتخاب کنید. با این کار پروژه در آدرس تعیین شده، ایجاد می شود.

محتوای پروژه انگولار ۲

برای کدنویسی انگولار، از نرم افزارهای ویرایشگر مختلفی می توان استفاده کرد. ما در اینجا از ویرایشکر visual studio code استفاده می کنیم. نرم افزار را باز می کنیم و از منوی فایل، گزینه open folder را اینتخاب می کنیم و از مسیر مربوطه، پروژه را باز می کنیم. پوشه های مربوط به پروژه را مشاهده می کنیم که شامل e2e، node_modules و src می شود. در پوشه src فایل های اصلی پروژه موجود است که در زیرپوشه app، فایل های app.component.html، app.component.ts و … وجود دارد.

در فایل app.component.html کدهای html و در فایل app.component.ts کدهای کنترلی مربوط به صفحات وب را مشاهده می کنیم، که ts مخفف type script می باشد که زبانی بر پایه java script است.

اجرای پروژه انگولار ۲

برای اجرای پروژه می توانیم از منوی view گزینه integrated terminal (یا کلیدهای ترکیبی `+ctrl) را انتخاب کنیم.  در این جا برای اجرای پروژه می بایست دستور ng serve را تایپ کرده و اینتر بزنیم. در صورتی که پورت پیش فرض که همان پورت ۴۲۰۰ است، مشغول باشد، error می دهد، که در این صورت می بایست دستور ng serve --port x را وارد کرده (x همان شماره پورت دلخواه است)، اینتر بزنیم و منتظر اجرای پروژه بمانیم.

بعد از نمایش پیام successful و اجرای موفقیت آمیز پروژه، در مرورگر آدرس localhost:4200 را وارد می کنیم، در مرورگر می توانیم نتیجه را مشاهده کنیم.

تغییر در فایل ها

اکنون در نرم افزار visual code با کلیک بر روی فایل app.component.html می توانید تغییرات دلخواه خود را روی ساختار صفحه وب ایجاد کنید. همان طور که مشاهده می کنید در تگ h1 عبارت !{{welcome to {{title نوشته شده است. این همان متنی است که در مرورگر مشاهده کردید. در اینجا بخش welcome to ثابت می باشد و بخش title متغیری است که می توانیم به آن هر مقداری بدهیم.

در فایل app.component.ts متن ‘title=’app را مشاهده می کنید. در اینجا می توانیم در title هر عبارتی که بخواهیم وارد کنیم، به عنوان مثال ‘title=’webtml.ir و مشاهده می کنیم که متن بالای صفحه مرورگر به صورت !welcome to webtml.ir در می آید.

در اینجا به پایان درس اول می رسیم، در ویدئوهای بعدی آموزش ما را دنبال کنید.