• چندین پروژه فعال در یک Angular Cli Template
چندین پروژه فعال در یک Angular Cli Template
1396/01/25 - 10:12:54 // Angular JS // 0 نظر // 8408 بازدید

آموزش پیاده سازی بیش از یک پروژه در یک Angular Cli Project محتوای این مقاله کوتاه خواهد بود.

بسمه تعالی

چندین پروژه فعال در یک Angular Cli Template

اگر دستان شما هم به برنامه نویسی سیستمهای تک صفحه ای یا همان SPA ها آلوده شده باشد، به احتمال زیاد یا در حال استفاده از Angular 2 هستید یا در برنامه کاری و علمی شما هم مهاجرت به این تکنولوژی و پلتفرم وجود دارد.

کسانی که در حال حاضر در حال استفاده از Ang2 باشند، Angular Cli را به خوبی میشناسند. یک بسته آماده حاوی یک Hello word ساده ، ولی دارای توانایی توسعه سریع و به زبان ساده تر یک پروژه و بستر از پیش آماده شده برای تسهیل پیاده سازی من و شما.

حال فرض کنید 4 پروژه مختلف و مجزا دارید که همه را مبتنی بر Angular Cli تولید و در حال توسعه آنها می باشید. یک راه داشتن 4 فولدر مجزا هر کدام دارای بدنه کامل Angular Cli می باشد. راه بدی هم نیست، ولی آیا نمیتوان آنچه به عنوان بخش Custom هر پروژه داریم را به شکلی در یک Cli Project قرار دهیم و مدیریت آنها را بدست گیریم ؟. من به شخصه نمیدانم اینکار برای یک برنامه نویس میتواند دلپذیر باشد یا خیر، ولی حداقل از نظر فنی امکان چنین کاری وجود دارد و در این مقاله کوتاه به بررسی آن خواهیم پرداخت.

خوب دیگر مقدمه و توضیح کافی است. به سراغ فایل .angular-cli.json برویم و به محتوای آن نگاهی بیندازیم.شما در این فایل به صورت معمول یک بخش به صورت زیر خواهید داشت. 

"apps": [

{ "name":"app1",

"root": "src",

"outDir": "dist",

"assets": [

"assets",

"favicon.ico"

],

 

خوب حالا برای داشتن بیش از یک پروژه در Cli به شکل زیر عمل کنید.

"apps": [

{ "name":"app1",

"root": "src",

"outDir": "dist",

"assets": [

"assets",

"favicon.ico"

],

"index": "index.html",

"main": "main-resolver.ts",

"polyfills": "polyfills.ts",

"test": "test.ts",

"tsconfig": "tsconfig.app.json",

"testTsconfig": "tsconfig.spec.json",

"prefix": "app",

"styles": [

"styles.css",

"../node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css"

],

"scripts": [],

"environmentSource": "environments/environment.ts",

"environments": {

"dev": "environments/environment.ts",

"prod": "environments/environment.prod.ts"

}

},

{ "name":"app2",

"root": "src",

"outDir": "dist2",

"assets": [

"assets",

"favicon.ico"

],

"index": "index.html",

"main": "main-luxury.ts",

"polyfills": "polyfills.ts",

"test": "test.ts",

"tsconfig": "tsconfig.app.json",

"testTsconfig": "tsconfig.spec.json",

"prefix": "app",

"styles": [

"styles.css",

"scripts": [],

"environmentSource": "environments/environment.ts",

"environments": {

"dev": "environments/environment.ts",

"prod": "environments/environment.prod.ts"

}

}

],

 
 
 

تمام شد. حالا ببینید چگونه میتوان پروژه ها را صدا زد.

 

ng serve --app app1

یا

ng serve --app app2

حتی میتوان بر اساس شماره Index پروژه ها آنها را صدا زد. در یک Array اصولن شمارنده از صفر شروع میشود. پس طریقه صدا زدن وقتی 2 پروژه بیشتر نداریم، به شکل زیر خواهد بود.

ng serve --app 0

ng serve --app 1


حال به شکل Folder بندی پروژه ها نیز دقت کنید.

 
 
 
 

همانطور که مشاهده میکنید ، همه چیز مجزا و قابل مدیریت میباشد. امیدوارم این مطلب برای شما مفید بوده باشد، هر چند اگر نباشد هم زیاد فرقی نمیکند!.

 
علی کلاهدوزان
معرفی نویسنده : علی کلاهدوزان

سلام بر دوستان ،
شاید رایج است به عنوان پروفایل کاربر ، چند خطی راجع به خودم بنویسم ، ولی وضعیت کاری و سوابق من با یک جستجوی ساده در گوگل مشخص خواهد شد ، لذا سرتان را با مطالب بی مورد به درد نیاورم بهتر است . اگر نکته خاصی لازم بود بدانید در قسمت "ایلیا سافت در یک نگاه" به احتمال زیاد یافت خواهد شد . جزئیات بیشتر را سوال کنید ، آدرس ایمیل Ali@Kolahdoozan.com همیشه جوابگوی شماست .امیدوارم از مطالب سایت استفاده کرده باشید . شاد و پیروز باشید .

امتیاز به مطلب
           
برچسب ها
Angular Cli  Angular 2 
نظرات کاربران
ارسال نظر