مفهوم Workspace در Angular

اندازه‌ی قلم متن

تخمین مدت زمان مطالعه‌ی مطلب: سه دقیقه

Workspace، اولین بار در انگیولار 6 معرفی شد. Angular Workspace به شما اجازه می‌دهد کل web application خود را به چندین پروژه‌ی کوچکتر سازماندهی کنید. بیشتر پروژه‌های کوچک انگیولار تنها شامل یک یا دو پروژه، به ازای هر Workspace می‌باشند. برای مثال وقتی شما یک پروژه‌ی جدید انگیولار را با Angular CLI ایجاد می‌کنید، در این حالت Workspace شامل یک app واقعی و یک پروژه e2e tests می‌باشد.

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

A set of files that comprise a standalone app, a library, or a set of end-to-end (e2e) tests.

شما می‌توانید دو نوع پروژه را ایجاد کنید : Application یا Library

درست همانند مفهوم یک کتابخانه در توسعه نرم افزار، یک کتابخانه اشاره دارد به مجموعه‌ای از کد‌های با قابلیت استفاده‌ی مجدد که می‌توانند بین پروژه‌های مختلف به اشتراک گذاشته شوند؛ هم چنین Angular CLI این کار را برای شما آسان می‌کند تا کتابخانه خودتان را در یک مرکز ثبت مثل npm انتشار دهید تا توسط دیگر توسعه دهندگان استفاده شود.

نوع Application اشاره به یک Application مستقل انگیولار دارد.

Create Empty Workspaces

در انگیولار 7 یک CLI option جدید ( create-application-- ) معرفی شد که شما می‌توانید با اضافه کردن این option به دستور ng new، سبب ایجاد یک Workspace خالی شوید. این option با دستور ng new استفاده می‌شود و می‌تواند مقدار true یا false را دریافت کند که به صورت پیش فرض به true تنظیم شده است. بنابراین وقتی شما یک پروژه‌ی جدید را ایجاد می‌کنید، سبب ایجاد یک پروژه‌ی اولیه انگیولار در Workspace هستید؛ همچنین می‌توانید create-application-- را به false تنظیم کنید تا CLI یک پروژه اولیه انگیولار را در Workspace ایجاد نکند .

اکنون اجازه دهید آن را در عمل ببینیم:

مطمئن شوید که نگارش انگیولار شما، 7 یا بالاتر باشد:

ng --version

Command Prompt را باز کرده و سپس درستور زیر را در آن اجرا کنید:

ng new angular-apps --create-application=false

سپس Angular CLI این هشدار را به شما می‌دهد که آیا تمایل دارید، Angular routing را اضافه کنید و همچنین از کدام stylesheet format تمایل دارید که استفاده کنید؛ سپس فایل‌های زیر تولید خواهند شد:

angular-apps/README.md
angular-apps/angular.json
angular-apps/package.json
angular-apps/tsconfig.json
angular-apps/tslint.json
angular-apps/.editorconfig
angular-apps/.gitignore

و همچنین CLI تمام وابستگی‌های انگیولار را در یک پوشه به نام node_modules نصب خواهد کرد.

اکنون به Command Prompt برگردیم و وارد Angular Workspace خودمان شویم:

cd angular-apps

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

ng generate application admin

دستور بالا سبب ایجاد دو پروژه می‌شود ( admin و admin-e2e )، در پوشه Projects.

همچنین می‌توانید یک کتابخانه را در Workspace خود با استفاده از دستور زیر ایجاد کنید:

ng generate library ngx-qrcode

ngx-qrcode نام کتابخانه می‌باشد. این کتابخانه در پوشه projects، درست مثل مابقی Application ها اضافه خواهد شد.

بعد از ایجاد کردن چندین Application بدون Application پیش فرض برای Workspace خود، می‌توانید اقدام به ایجاد modules ، service ، components و ... در یک پروژه مشخص با استفاده از project option-- کنید.

برای نمونه یک سرویس را در پروژه admin ایجاد می‌کنیم:

ng generate service auth --project=admin

که سبب ایجاد دو فایل زیر می‌شود:

projects/admin/src/app/auth.service.spec.ts
projects/admin/src/app/auth.service.ts

Serving Specific Apps in Your Workspace

جهت به خدمت گرفتن یک Application مشخص در Workspace دستور زیر را اجرا کنید:

ng serve admin

admin نام Application شما می‌باشد که می‌خواهید آن را به خدمت بگیرید.

نکته

اگر در Command Prompt دستور زیر را وارد کنید:

ng new

سریعا هشدار زیر را به شما می‌دهد:

What name would you like to use for the new workspace and initial project?

از شما می‌خواهد که نام Workspace مورد نظرتان را وارد کنید و بعد از آن همان دو هشدار Routing و stylesheet format می‌باشد که سبب ایجاد یک پروژه اولیه انگیولار در Workspace می‌شود.

نتیجه گیری

در این مطلب متوجه مفهوم Angular Workspace و روش ایجاد کردن یک Workspace خالی شدیم و همچنین چگونه یک Application و یک Library را در یک Workspace ایجاد کنیم.

مطالعه بیشتر در رابطه با Application یا Library

مفهوم Workspace در Angular

مطالب مشابه

#

#