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

سه شنبه ۲۵ دی ۱۳۹۷
بازدید ۲,۱۱۴ نفر
سعید سیفی زاده
(14 امتیاز از 3 رای)
Loading...

تصویر angular-6-project-setup_5582 ایجاد پروژه در انگولار 6 - آموزش Angular 6

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

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

انگولار 6 از نسخه 2.9 زبان برنامه نویسی TypeScript استفاده می کند، در حالی در انگولار 4 از نسخه 2.2 استفاده شده است. در بخش قبلی گفتیم که می توانید با استفاده از دستورات گفته شده در سایت انگولار آن را نصب و پروژه مورد نظرتان را ایجاد کنید. حال به بررسی این دستورات می پردازیم.

تصویر angular-6-project-setup_5582_1 ایجاد پروژه در انگولار 6 - آموزش Angular 6

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

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

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

ng -v
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.3
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.3
@angular-devkit/core         0.7.3
@angular-devkit/schematics   0.7.3
@schematics/angular          0.7.3
@schematics/update           0.7.3
rxjs                         6.2.2
typescript                   2.9.2

ng -v

_ _ ____ _ ___

/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|

/ ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |

/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |

/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|

|___/

Angular CLI: 6.1.3

Node: 8.11.3

OS: win32 x64

Angular:

...

Package Version

------------------------------------------------------

@angular-devkit/architect 0.7.3

@angular-devkit/core 0.7.3

@angular-devkit/schematics 0.7.3

@schematics/angular 0.7.3

@schematics/update 0.7.3

rxjs 6.2.2

typescript 2.9.2

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

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

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
...
Date: 2018-08-18T11:17:54.745Z
Hash: 0ace6c8a055c58d1734c
Time: 20490ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.27 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

...

Date: 2018-08-18T11:17:54.745Z

Hash: 0ace6c8a055c58d1734c

Time: 20490ms

chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]

chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]

chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]

chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]

chunk {vendor} vendor.js, vendor.js.map (vendor) 3.27 MB [initial] [rendered]

i ?wdm?: Compiled successfully.

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

تصویر angular-6-project-setup_5582_2 ایجاد پروژه در انگولار 6 - آموزش Angular 6

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

ng serve --host 0.0.0.0 -port 4205

1	ng serve --host 0.0.0.0 -port 4205

نصب IDE

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

تصویر angular-6-project-setup_5582_6 ایجاد پروژه در انگولار 6 - آموزش Angular 6

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

1- نرم افزار Atom

تصویر angular-6-project-setup_5582_4 ایجاد پروژه در انگولار 6 - آموزش Angular 6

2- نرم افزار WebStorm

تصویر angular-6-project-setup_5582_5 ایجاد پروژه در انگولار 6 - آموزش Angular 6

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

تصویر angular-6-project-setup_5582_3 ایجاد پروژه در انگولار 6 - آموزش Angular 6

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

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

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

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

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

.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 : این فایلی است که در مرورگر نمایش داده می شود. و به طور پیش فرض شامل محتوای زیر است:

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>HTTP Search Param</title>
      <base href = "/">
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
      <link href = "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel = "stylesheet">
      <link href = "styles.c7c7b8bf22964ff954d3.bundle.css" rel = "stylesheet">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

<!doctype html>

<head>

<title>HTTP Search Param</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

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