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.
درست همانند مفهوم یک کتابخانه در توسعه نرم افزار، یک کتابخانه اشاره دارد به مجموعهای از کدهای با قابلیت استفادهی مجدد که میتوانند بین پروژههای مختلف به اشتراک گذاشته شوند؛ هم چنین 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 یا بالاتر باشد:
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 خودمان شویم:
در ادامه یک پروژه جدید را با دستور زیر ایجاد میکنیم:
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 دستور زیر را اجرا کنید:
admin نام Application شما میباشد که میخواهید آن را به خدمت بگیرید.
نکته
اگر در Command Prompt دستور زیر را وارد کنید:
سریعا هشدار زیر را به شما میدهد:
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 ایجاد کنیم.