ایجاد پروژه در انگولار ۶ – آموزش Angular 6

  • سه شنبه ۲۵ دی ۱۳۹۷
  • بازدید ۳۸۶ نفر

angular 6 project setup 5582 تصویر

ایجاد پروژه در انگولار ۶

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

انگولار ۶ از نسخه ۲٫۹ زبان برنامه نویسی TypeScript استفاده می کند، در حالی در انگولار ۴ از نسخه ۲٫۲ استفاده شده است. در بخش قبلی گفتیم که می توانید با استفاده از دستورات گفته شده در سایت انگولار آن را نصب و پروژه مورد نظرتان را ایجاد کنید. حال به بررسی این دستورات می پردازیم.

angular 6 project setup 5582 1 تصویر

دستور npm install -g @angular/cli انگولار ۶ را به صورت سراسری (منظور از –g همان global است) در سیستم شما نصب می کند.

توجه! برای تست این که انگولار نصب شده است یا نه، می توانید از دستور ng –v استفاده کنید.

مانند نمونه زیر:

دستور ng new my-dream-app یک پروژه جدید با نام my-dream-app ایجاد کرده و هر آنچه که لازم باشد به آن اضافه می کند. توجه داشته باشید که این پروژه جدید در دایرکتوری که در آن قرار دارید ایجاد خواهد شد.

دستور cd my-dream-app دایرکتوری فعلی را به دایرکتوری پروژه (فضای کاری) تغییر می دهد. دستور ng serve سرور محلی خود انگولار اجرا کرده و پروژه شما را برای اجرا شدن آماده سازی می کند.

بعد از اجرا شدن سرور محلی، پروت شماره ۴۲۰۰  باز می شود و شما می توانید با رفتن به آدرس localhost:4200 در مرورگر خود، خروجی پروژه تان را مشاهده کنید. مانند نمونه زیر:

angular 6 project setup 5582 2 تصویر

نکته! برای تغییر پورت پیش فرض انگولار (۴۲۰۰) می توانید از دستور زیر استفاده کنید:

 

نصب IDE

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

angular 6 project setup 5582 6 تصویر

توجه! همچنین می توانید از محیط های توسعه زیر نیز استفاده کنید:

۱- نرم افزار Atom

angular 6 project setup 5582 4 تصویر

۲- نرم افزار WebStorm

angular 6 project setup 5582 5 تصویر

۳- نرم افزار Visual Studio Code

angular 6 project setup 5582 3 تصویر

بررسی پروژه ایجاد شده

در ادامه فایل های app.component.html و app.component.ts مربوط به پروژه فعلی را که خود انگولار برای ما ایجاد کرده است را ویرایش خواهیم کرد. قبل از ویرایش پروژه، بهتر است در مورد فایل ها و دایرکتوری های مختلف موجود در داخل فضای کاری اطلاعاتی را ارائه کنیم.

مواردی که در داخل دایرکتوری پروژه به صورت خودکار ایجاد می شوند (ساختار دایرکتوری های یک پروژه انگولار ۶):

  • e2e : این دایرکتوری برای تست پروژه به صورت end to end است.
  • node_modules : مربوط به بسته هایی است که توسط npm نصب شده است.
  • src : این دایرکتوری شامل فایل مختلف پروژه شما (همان سورس پروژه) است.

ساختار مربوط به فایل ها در انگولار ۶ :

  • .angular-cli.json : به طور کلی مواردی مانند نام پروژه، نسخه CLI و غیره را در خود نگه می دارد.
  • .editorconfig : فایل پیکربندی مربوط به ویرایشگر است.
  • .gitignore : این فایل در هنگام استفاده از git استفاده می شود و فایل هایی که نباید کامیت (commit) شوند را مشخص می کند.
  • conf.js: به منظور انجام unit testing بر روی پروژه استفاده می شود.
  • json : این فایل شامل اطلاعات تمامی بسته هایی است که در هنگام استفاده از دستور npm install در دایرکتوری node_modules نصب شده اند.
  • conf.js : این فایل حاوی پیکربندی مورد نیاز برای تست برنامه است.
  • json : به طور کلی شامل پیکربندی مورد نیاز برای کامپایل برنامه است.
  • json : این فایل پیکر بندی شامل مواردی است که در هنگام کامپایل باید در نظر گرفته شوند.

دایرکتوری src در داخل خود یک ساختار متفاوت دارد که در ادامه بررسی می کنیم.

دایرکتوری app

این دایرکتوری به طور پیشفرض شامل فایل زیر است که توسط CLI تولید می شوند.

  • module.ts : اگر این فایل را باز کنید، کتابخانه هایی را مشاهده خواهید کرد که قبلا import شده اند. این فایل به منظور مشخص کردن ماژول های مورد نیاز برنامه استفاده می شود.
  • component.css : ای فایل برای تنظیم استایل (CSS) اختصاصی برای این کامپوننت است. منظور از اختصاصی بودن این است که اگر شما کامپوننت دیگری ایجاد کنید، استایل این کامپوننت بر روی آن اعمال نخواهد شد.
  • component.html : این فایل حاوی کدهای HTML است که به منظور ایجاد قالب و اسکلت بندی کامپوننت استفاده می شود.
  • component.spec.ts: این فایل های به صورت خودکار و برای unit testing کامپوننت منبع تولید می شوند.
  • component.ts : این فایل کلاس مربوط به کامپوننت است.

دایرکتوری Assets

این دایرکتوری به منظور نگه داری فایل image و js استفاده می شود.

دایرکتوری Environment

این دایرکتوری شامل دو فایل زیر است که جزئیات مربوط به تولید یا محیط توسعه برنامه را در خود نگه می دارند.

  • prod.ts
  • ts

سایر فایل

  • ico : این فایل مربوط به آیکون برنامه است که معمولا در دایرکتوری ریشه یک وب سایت یافت می شود.
  • html : این فایلی است که در مرورگر نمایش داده می شود. و به طور پیش فرض شامل محتوای زیر است:

  • ts : این فایل به عنوان فایل اصلی توسعه پروژه به حساب می آید.
  • ts : به طور کلی برای backward compatibility استفاده می شود.
  • css : استایل (CSS) مربوط به پروژه انگولار در این فایل نوشته می شود.
  • ts : این فایل مربوط به unit testing است.
  • app.json : این فایل حاوی اطلاعات مورد نیاز در مورد کامپایل برنامه است که در زمان کامپایل از آن ها استفاده می شود.
  • spec.json : این فایل جزئیات مربوط به تست پروژه را در خود نگه می دارد.
  • d.ts : این فایل برای مدیریت تعریفات TypeScript استفاده می شود.
ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است