مطالب
VS Code برای توسعه دهندگان ASP.NET Core - قسمت سوم - گردش کاری‌های متداول
در قسمت قبل، دو عمل متداول نحوه‌ی ایجاد و اجرای یک پروژه‌ی جدید ASP.NET Core را بررسی کردیم. در ادامه می‌خواهیم معادل سایر اعمالی را که می‌توان با نگارش کامل ویژوال استودیو انجام داد، در VSCode نیز برشماریم.


کار با IDE و حرکت بین کدها

در ادامه‌، همان پروژه‌ای را که در قسمت قبل ایجاد کردیم، مجددا با وارد شدن به پوشه‌ی آن و اجرای دستور . code، توسط VSCode باز خواهیم کرد. سپس فایل Program.cs آن‌را باز کنید. فرض کنید در سطر ذیل آن:
 .UseStartup<Startup>()
می‌خواهیم به نحو ساده‌تری به کلاس Startup آن مراجعه کنیم. برای اینکار دو روش وجود دارد:
الف) اشاره‌گر ماوس را به آن نزدیک کنید و سپس دکمه‌ی Ctrl را نگه دارید. به این ترتیب واژه‌ی Startup تبدیل به یک لینک خواهد شد که با کلیک بر روی آن می‌توان به کلاس Startup رسید.
ب) روش دوم، قرار دادن اشاره‌گر متنی بر روی واژه Startup و سپس فشردن دکمه‌ی F12 است. این گزینه بر روی منوی کلیک راست بر روی این واژه نیز وجود دارد.

اگر دکمه‌ی F12 را بر روی کلاسی فشار دهید که کدهای آن در IDE وجود ندارند، یک صفحه‌ی جدید باز شده و کلاس تعریف آن‌را بر اساس ساختار و متادیتای این اسمبلی، به همراه مستندات کامل آن‌ها نمایش می‌دهد.

در این حالت اگر خواستید به مکان قبلی بازگردید فقط کافی است دکمه‌های alt + left cursor key را بفشارید.


در اینجا امکان یافتن ارجاعات به یک کلاس، مشاهده‌ی پیاده سازی‌ها و همچنین یک Refactoring به نام rename symbol نیز موجود است که با استفاده‌ی از آن، تمام ارجاعات به این کلاس در IDE نیز تغییرنام خواهند یافت.


یافتن سریع فایل‌ها در IDE

در یک پروژه‌ی بزرگ، برای یافتن سریع یک فایل، تنها کافی است دکمه‌های Ctrl+P را فشرده و در صفحه‌ی دیالوگ باز شده، قسمتی از نام آن‌را جستجو کنید:


همچنین اگر می‌خواهید محتوای فایل‌ها را جهت یافتن واژه‌ای خاص جستجو کنید، کلیدهای Ctrl+Shift+F (منوی Edit بالای صفحه و یا دومین آیکن در نوار ابزار عمودی سمت چپ صفحه) چنین امکانی را فراهم می‌کنند:



افزودن فایل‌های جدید به پروژه

فرض کنید می‌خواهیم یک کنترلر جدید را به پوشه‌ی Controllers اضافه کنیم:


برای اینکار ابتدا پوشه‌ی Controllers را انتخاب کنید. در همین حال، نوار ابزاری ظاهر می‌شود که توسط آن می‌توان در این پوشه، یک فایل جدید و یا یک پوشه‌ی جدید را ایجاد کرد.
اگر علاقمند به ایجاد فایل یا پوشه‌ای در ریشه‌ی پروژه باشید، باید تمام فایل‌ها و پوشه‌های موجود، در حالت انتخاب نشده قرار بگیرند. به همین جهت فقط کافی است در یک مکان خالی، در لیست فایل‌ها کلیک کنید تا فایل‌ها و پوشه‌ها از حالت انتخاب شده خارج شوند. اکنون نوار ابزار ظاهر شده‌ی افزودن فایل‌ها، به پوشه‌ی ریشه‌ی پروژه اشاره می‌کند.

در ادامه فایل جدید AboutController.cs را در پوشه‌ی Controllers ایجاد کنید. مشاهده خواهید کرد که یک فایل کاملا خالی ایجاد شده‌است. در VSCode به ازای پسوندهای مختلف فایل‌ها، قالب‌های از پیش آماده شده‌ای برای آن‌ها درنظر گرفته نمی‌شود و نمای ابتدایی تمام آن‌ها خالی است.
اما در اینجا اگر کلمه‌ی name را تایپ کنیم، دو پیشنهاد افزودن فضای نام را ارائه می‌دهد:


اولی صرفا نام namespace را در صفحه درج خواهد کرد. دومی به یک code snippet اشاره می‌کند و کار آن ایجاد قالب یک فضای نام جدید است. برای درج آن فقط کافی است دکمه‌ی tab را بفشارید.
همین کار را در مورد class نیز می‌توان تکرار کرد و در اینجا در intellisense ظاهر شده یا می‌توان واژه‌ی class را درج کرد و یا code snippet آن‌را انتخاب نمود که یک کلاس جدید را ایجاد می‌کند:


یک نکته: در VSCode نیازی نیست تا مدام دکمه‌های Ctrl+S را جهت ذخیره سازی فایل‌های تغییر کرده فشرد. می‌توان از منوی فایل، گزینه‌ی Auto Save را انتخاب کرد تا این‌کار را به صورت خودکار انجام دهد.


ایجاد Code Snippets جدید

هرچند تا اینجا با استفاده از code snippets پیش فرض فضاهای نام و کلاس‌ها، یک کلاس جدید را ایجاد کردیم، اما روش ساده‌تری نیز برای انجام این‌کارها و تکمیل کنترلر وجود دارد.
برای این منظور به منوی File -> Preferences -> User snippets مراجعه کنید و سپس از لیست ظاهر شده، زبان #C را انتخاب کنید:


به این ترتیب یک قالب جدید code snippet تولید خواهد شد. در اینجا می‌خواهیم برای تولید Actionهای یک کنترلر نیز یک code snippet جدید را تهیه کنیم:
{
    "MVC Action": {
        "prefix": "mvcAction",
        "body": [
            "public IActionResult ${1:ActionName}()",
            "{",
            " $0 ",
            " return View();",
            "}"
        ],
        "description": "Creates a simple MVC action method."
    }
}
- کدهای snippet، در داخل آرایه‌ی body درج می‌شوند. هر عضو این آرایه یک سطر از کدها را تشکیل خواهد داد.
- در این آرایه، 0$ جائی است که اشاره‌گر متنی پس از درج snippet قرار می‌گیرد و 1$ به نامی که قرار است توسط کاربر تکمیل شود، اشاره می‌کند که در اینجا یک نام پیش فرض مانند ActionName را هم می‌توان برای آن درنظر گرفت.
- در اینجا prefix نامی است که اگر در صفحه تایپ شود، منوی انتخاب این code snippet را ظاهر می‌کند:



استفاده از بسته‌های Code Snippets آماده

خوشبختانه پشتیبانی جامعه‌ی توسعه دهندگان از VSCode بسیار مطلوب است و علاوه بر افزونه‌های قابل توجهی که برای آن نوشته شده‌اند، بسته‌های Code Snippets آماده‌ای نیز جهت بالابردن سرعت کار با آن وجود دارند. برای دریافت آن‌ها، به نوار ابزار عمودی که در سمت چپ صفحه وجود دارد، مراجعه کنید و گزینه‌ی extensions آن‌را انتخاب نمائید:


در اینجا اگر aspnetcore را جستجو کنید، لیست بسته‌های code snippets برچسب گذاری شده‌ی با aspnetcore ظاهر می‌شود. در همینجا اگر یکی از آن‌ها را انتخاب کنید، در سمت راست صفحه می‌توانید توضیحات آن را نیز مشاهده و مطالعه نمائید (بدون نیاز به خروج از IDE).
برای مثال wilderminds-aspnetcore-snippets را نصب کنید. پس از آن تنها کافی است mvc6 را درون یک کلاس کنترلر تایپ نمائید تا امکانات آن ظاهر شوند:


برای نمونه پس از ایجاد یک فایل خالی کنترلر، انتخاب code snippet ایی به نام mvc6-controller، سبب ایجاد یک کنترلر کامل به همراه اکشن متدهایی پیش فرض می‌شود. بنابراین معادل قالب‌های new items در نگارش کامل ویژوال استودیو در اینجا می‌توان از Code Snippets استفاده کرد.

درکل برای یافتن مواردی مشابه، بهتر است واژه‌ی کلیدی snippets را در قسمت extensions جستجو نمائید و آن‌ها صرفا مختص به #C یا ASP.NET Core نیستند.


مدیریت ارجاعات و بسته‌های نیوگت در برنامه‌های ASP.NET Core

تا اینجا مدیریت فایل‌ها و نحوه‌ی تکمیل آن‌ها را توسط code snippets، بررسی کردیم. قدم بعدی و گردش کاری مهم مورد نیاز دیگر، نحوه‌ی افزودن ارجاعات به پروژه در VSCode است.
مدیریت ارجاعات در نگارش‌های جدید ASP.NET Core، در فایل csproj برنامه انجام می‌شوند. در اینجا است که بسته‌های نیوگت جدید، ارجاعات به پروژه‌های دیگر و حتی شماره فریم ورک مورد استفاده تعیین می‌شوند.
برای نمونه بسته‌ی نیوگت DNTPersianUtils.Core را به لیست ارجاعات آن اضافه کنید:
 <PackageReference Include="DNTPersianUtils.Core" Version="2.2.0" />
بلافاصله با انجام این تغییر و ذخیره‌ی فایل csproj، گزینه‌ی بازیابی و نصب آن نیز ظاهر می‌شود:


در اینجا با کلیک بر روی لینک و یا دکمه‌ی restore ، کار دریافت این بسته و نصب آن انجام خواهد شد.
اگر علاقمند بودید تا اینکار را در خط فرمان به صورت دستی انجام دهید، دکمه‌های Ctrl+ back-tick را فشرده، تا امکانات خط فرمان درون VSCode ظاهر شوند و سپس دستور dotnet restore را صادر کنید.

روش دوم ثبت بسته‌های نیوگت در فایل csproj، مراجعه به خط فرمان (فشردن دکمه‌های دکمه‌های Ctrl+ back-tick) و صدور دستور ذیل است:
 > dotnet add package DNTPersianUtils.Core
به این ترتیب با استفاده از امکانات dotnet-cli نیز می‌توان آخرین نگارش یک بسته‌ی نیوگت را دریافت و به صورت خودکار به پروژه اضافه نمود. اگر نگارش خاصی مدنظر است، باید توسط پرچم version-- آن‌را در انتهای دستور مشخص کرد.


دیباگ برنامه‌های ASP.NET Core در VSCode

در قسمت قبل با فرامین dotnet run و dotnet build و همچنین نحوه‌ی اجرای سریع آن‌ها آشنا شدیم. در ادامه اگر به نوار ابزار عمودی کنار صفحه‌ی آن دقت کنید، گزینه‌ی دیباگ نیز وجود دارد:


در اینجا دو نوع نحوه‌ی برپایی و اجرای برنامه را مشاهده می‌کنید که هر دو مورد در فایل vscode\launch.json. زمانیکه دیباگ پروژه را در ابتدای باز کردن آن در VSCode فعال می‌کنیم، تعریف شده‌اند.
برای بررسی آن فایل HomeController.cs را گشوده و در ابتدای متد About آن یک break point را قرار دهید (با حرکت دادن اشاره‌گر ماوس، جائیکه شماره سطرها قرار دارند، علامت درج break point ظاهر می‌شود که با کلیک بعدی، دائمی خواهد شد و برعکس):


پس از آن تنها کاری که باید انجام داد، فشردن دکمه‌ی F5 است که به معنای اجرای برنامه به همراه اتصال دیباگر به آن می‌باشد (در قسمت قبل، Ctrl+F5 را بررسی کردیم که به معنای اجرای برنامه، بدون اتصال دیباگر به آن است).
در ادامه پس از اجرای برنامه، بر روی لینک About کلیک کنید تا اکشن متد آن اجرا شود. بلافاصله کنترل کار به VSCode بازگشته و سطری که بر روی آن break-point قرار داده بودیم، ظاهر می‌شود:


اطلاعات بیشتر آن در برگه‌ی دیباگ ظاهر می‌شوند و در کل تجربه‌ی کاربری آن همانند سایر IDEهایی است که تاکنون با آن‌ها کار کرده‌اید.

یک نکته: در اینجا در داخل فایل‌های View (فایل‌های razor) نیز می‌توان break point قرار داد.


برپایی یک Watcher Build

ابزار ویژه‌ای به همراه ابزارهای Build مخصوص پروژه‌های NET Core. وجود دارد به نام watcher که تغییرات پوشه‌های برنامه را تحت نظر قرار داده و با هر تغییری، پروژه را کامپایل می‌کند. به این ترتیب به سرعت می‌توان آخرین تغییرات برنامه را در مرورگر بررسی کرد. برای نصب آن، تنظیم ذیل را به فایل csproj برنامه اضافه کنید:
  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.0" />
  </ItemGroup>
پس از آن دکمه‌های Ctrl+ back-tick را فشرده تا امکانات خط فرمان، درون VSCode ظاهر شود و سپس دستور dotnet restore را صادر کنید.

اکنون برای استفاده‌ی از آن تنها کافی است دستور ذیل را صادر کنید:
 >dotnet watch run
?[90mwatch : ?[39mStarted
Hosting environment: Production
Content root path: D:\vs-code-examples\FirstAspNetCoreProject
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.
همانطور که مشاهده می‌کنید، پروژه را کامپایل کرده و بر روی پورت 5000 ارائه می‌دهد. به علاوه از این پس با هر تغییری در فایل‌های #C پروژه، این کامپایل خودکار بوده و نیازی به تکرار این عملیات نیست.

یک نکته: اینبار برای دیباگ برنامه، باید گزینه‌ی attach را انتخاب کرد:


اگر بر روی دکمه‌ی سبز رنگ کنار آن کلیک کنید، لیست پروسه‌های دات نتی ظاهر شده و در این حالت می‌توانید دیباگر را به پروسه‌ی dotnet exec ایی که به dll برنامه اشاره می‌کند، متصل کنید (و نه پروسه‌ی dotnet watch run که در حقیقت پروسه‌ی dotnet exec را مدیریت می‌کند).
مطالب دوره‌ها
اضافه نمودن Add-Ins برای Excel جهت استفاده در داده کاوی
نرم افزار Excel حاوی مجموعه ای از ابزارهای تحلیلی با ماهیت پیش بینی می‌باشد. در این صورت قادر هستید با افزودن این مجموعه Add-Ins‌ها یکسری کارهای معمول در داده کاوی را انجام دهید. برای بررسی بیشتر به لینک‌های زیر مراجعه کنید.
اشتراک‌ها
CleanArchitecture-Template
پیاده سازی معماری تمیز در asp.net core با استفاده از تاپ‌ترین تکنولوژی‌ها و رعایت اصول کدنویسی و معماری نرم افزار


: Technologies used
 ASP.NET Core
 Entity Framework Core
 CQRS
MediatR
 Swagger
 Api Versioning
 FluentValidation
 Serilog
 Elasticsearch(for writing Logs)
 AutoMapper

: Software Development Best Practices used
 Clean Architecture
 Clean Code
 Solid Principles
 REST API Naming Conventions
 Use multiple environments in ASP.NET Core(Development,Production,Staging,etc)
 Modular Design
 Custom Exceptions
 Custom Exception Handling
 PipelineBehavior for Validation and Performance tracking
CleanArchitecture-Template
اشتراک‌ها
GrandNode - موتور جدید nopCommerce

GrandNode  یک نرم افزار open source بر ASP. NET Core و بانک اطلاعاتی MongoDB است که توسط nopCommerce ساخته شده است که می‌خواهد نیازهای مشتریان را برای stability و سرعت فروشگاه آنلاین برآورده کند.

با توجه به نیاز بسیاری از مشتریان این تصمیم گرفته شده است که موتور nopCommerce را تغییر دهند تا به حداکثر کارایی، قابلیت استفاده و امنیت دست یابد.
 

Free and Open Source Ecommerce Shopping Cart solution based on ASP. NET CORE and MongoDB

grandnode resources

GrandNode Site: https://grandnode.com

Demo store: https://grandnode.com/demo

Features https://grandnode.com/benefits

Requirements: https://grandnode.com/system-requirements

Forums: https://grandnode.com/boards

Facebook: https://www.facebook.com/grandnodecom

GrandNode - موتور جدید nopCommerce
اشتراک‌ها
نرم افزاری جهت مدیریت زمان پروژه ها

برخی مواقع مدت زمانی که روی یک پروژه کار کردید را به طور دقیق نمی‌توانید اندازی گیری کنید تا بر اساس آن سود و هزینه‌های خود را محاسبه نمایید این نرم افزار که به صورت رایگان می‌باشد و تمامی این موارد را در اختیار شما قرار می‌دهد.

HourGuard Timesheet Software

Time tracking software to log time on customer projects

HourGuard makes it easy to track work hours with its simple-to-use interface. Click Start when you begin work, and Stop when you finish—the time tracking software does the rest for you, generating time sheets and even creating invoices for you.  

نرم افزاری جهت مدیریت زمان پروژه ها
نظرات مطالب
MVC vs 3-Tier Pattern
به نظر من این درست نیست که بگیم mvc کلا در لایه UI می‌باشد، ببینید شما وقتی می‌خواهید یک application را توسعه بدید علاوه بر اهداف بیزینسی application که قصد توسعه ان را دارید یکسری اهداف تکنولوژیکی هم مد نظر دارید، حالا بعضی از این اهداف می‌تواند بسیار پایه ای باشد مانند اینکه شما این application  را بصورت win app , web app یا mobile app یا ترکیبی پیاده سازی کنید، وبعضی تصمیمات هم بعد از این تصمیم گیری انجام میشوند، برای مثال شما در نظر می‌گیرید که می‌خواهید این application را به صورت یک web app پیاده سازی کنید، حال شما ممکن است به عنوان طراح نرم افزار یا یک معمار یکسری concern ریز و درشت دیگر برایتان ایجاد شود، باز هم برای مثال: این application باید SOC را در تمامی سطوح درنظر بگیرد و decoupling به یک سطح مناسب برساند، ویا اینکه هدف این که لایه business را طوری طراحی کنیم که به یک repository خاص یا یک ui framework وابسته نباشد، اما هدف من از این همه اسمان ریسمان‌ها این بود که بگم که مثلا نمی‌توان گفت که فلان تکنولوژی باید در فلان موقعیت و به فلان روش استفاده شود بلکه این شما هستید که بر حسب concern‌های خود چگونه تصمیم بگیرید.
نظرات نظرسنجی‌ها
چه عواملی باعث میشود که شما از ادامه یا تکمیل پروژه دلسرد شوید؟
شاید یکی از متداولترین مسائل در اکثر پروژه‌ها عدم شناخت نیازمندی‌ها توسط پیمانکار باشه که منشا سایر مشکلات مانند تغییر زیاد خصوصیات و قابلیت‌های نرم افزار و در نتیجه تغییر زیاد کدهای نوشته شده و طولانی شدن زمان تحویل و دلسردی بابت میزان و به موقع بودن پرداخت‌ها بشه. بنابر این به همه دوستان پیشنهاد میکنم این دو نکته حتما کمکتون میکنه هنگام بستن قرارداد و انجام پروژه:
1- از کارفرما بخواهید نیازمندیهای پروژه رو بصورت مستند به شما تحویل بدن که ضمیمه قرارداد کنید.
2- مورد دوم اینکه در قرارداد حتما ذکر کنید که هر گونه تغییری که در لیست نیازمندی‌ها بصراحت ذکر نشده باشه به هزینه انجام پروژه و زمان پروژه اضافه خواهد کرد.
فکر کنم با این دو بند خیلی از مشکلات کمتر پیش بیاد و همینطور پیمانکار بیشتر تلاش میکنه که تعریف و تحقیق دقیقتری در مورد پروژه انجام بده.
مطالب
نمایش Breadcrumbs در برنامه‌های Angular
داشتن Breadcrumbs یکی از گزینه‌های مفید بهبود کاربری هر سایتی است و در برنامه‌های Angular با کوئری گرفتن از سیستم مسیریابی آن می‌توان به سادگی آن‌ها را تولید کرد.



ایجاد ساختاری برای نگهداری آرایه‌ی breadcrumbs

کامپوننت نمایش breadcrumbs را در مسیر src\app\core\bread-crumb ایجاد می‌کنیم. یعنی قصد داریم آن‌را به CoreModule برنامه اضافه کنیم؛ از این جهت که کامپوننت آن، تکمیل کننده‌ی app.component است و هر کامپوننتی که تنها در این کامپوننت ویژه بکار رود، محل تعریف آن در CoreModule خواهد بود.
به همین جهت کامپوننت bread-crumb را به صورت ذیل ایجاد می‌کنیم:
 ng g c core/bread-crumb
که تعاریف آن در فایل src\app\core\core.module.ts در قسمت exports و declarations درج خواهد شد:
import { BreadCrumbComponent } from "./bread-crumb/bread-crumb.component";

@NgModule({
  imports: [CommonModule, RouterModule],
  exports: [
    // components that are used in app.component.ts will be listed here.
    BreadCrumbComponent
  ],
  declarations: [
    // components that are used in app.component.ts will be listed here.
    BreadCrumbComponent
  ]
})
export class CoreModule {}
و سپس اینترفیس bread-crumb.ts را در مسیر src\app\core\bread-crumb\bread-crumb.ts به نحو زیر تعریف می‌کنیم:
export interface BreadCrumb {
  label: string;
  url: string;
};
برچسب و url، دو حداقل پیش‌فرض نمایش قطعات منوی breadcrumbs هستند.


تکمیل کامپوننت Breadcrumb

کدهای کامل کامپوننت Breadcrumb را در ذیل مشاهده می‌کنید:
import { Component, OnInit, ViewEncapsulation } from "@angular/core";
import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
import { BreadCrumb } from "./bread-crumb";
import { Observable } from "rxjs/Observable";

@Component({
  selector: "app-bread-crumb",
  templateUrl: "./bread-crumb.component.html",
  styleUrls: ["./bread-crumb.component.css"],
  encapsulation: ViewEncapsulation.None
})
export class BreadCrumbComponent implements OnInit {

  breadcrumbs$: Observable<BreadCrumb[]>;

  constructor(private activatedRoute: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    this.breadcrumbs$ = this.router.events
      .filter(event => event instanceof NavigationEnd)
      .distinctUntilChanged()
      .map(event => event ? this.buildBreadCrumbs(this.activatedRoute.root) : []);
  }

  buildBreadCrumbs(route: ActivatedRoute, url: string = "", breadcrumbs: Array<BreadCrumb> = []): Array<BreadCrumb> {
    const routeDataBreadCrumbKey = "breadcrumb";
    const routeConfig = route.routeConfig;
    const path = routeConfig && routeConfig.path !== undefined ? routeConfig.path : "";

    let label = path;
    if (url === "") {
      label = "Home";
    } else if (routeConfig && routeConfig.data !== undefined) {
      label = routeConfig.data[routeDataBreadCrumbKey];
    }

    const nextUrl = `${url}${path}/`;
    const breadcrumb: BreadCrumb = {
      label: label,
      url: nextUrl
    };
    console.log("breadcrumb", { path: path, label: label, url: nextUrl, route: route });
    const newBreadcrumbs = [...breadcrumbs, breadcrumb];
    if (route.firstChild) {
      return this.buildBreadCrumbs(route.firstChild, nextUrl, newBreadcrumbs);
    }
    return newBreadcrumbs;
  }

}
توضیحات:
در اینجا در ابتدای کار، مشترک رخ‌داد NavigationEnd سیستم مسیریابی خواهیم شد:
  ngOnInit() {
    this.breadcrumbs$ = this.router.events
      .filter(event => event instanceof NavigationEnd)
      .distinctUntilChanged()
      .map(event => event ? this.buildBreadCrumbs(this.activatedRoute.root) : []);
  }
هر زمانیکه رخ‌داد مرور صفحه‌ی جاری به پایان رسید، بر اساس مسیر ریشه‌ی آن، متد buildBreadCrumbs فراخوانی می‌شود. این متد، یک متد بازگشتی است. از این جهت که مسیر جاری می‌تواند حاصل مرور یک مسیر والد و سپس چندین مسیر تو در توی فرزند و والد آن باشد. برای نمونه ممکن است مانند تصویر ابتدای بحث، مسیریابی شما به صورت ذیل تعریف شده باشد:
const routes: Routes = [
  {
    path: "breadCrumbTest",
    data: { breadcrumb: "Parent1" },
    children: [
      {
        path: "", component: Parent1Component
      },
      {
        path: "Parent1Child1",
        data: { breadcrumb: "Parent1-Child1" },
        children: [
          {
            path: "", component: Parent1Child1Component
          },
          {
            path: "Parent1Child1Child1", component: Parent1Child1Child1Component,
            data: { breadcrumb: "Parent1-Child1 Child1" }
          }
        ]
      }
    ]
  }
];
در اینجا چندین مسیر والد و فرزند تو در تو را مشاهده می‌کنید.
بر اساس قراردادی که در کامپوننت نمایش bread-crumbs درنظر گرفته‌ایم، عنوان هر مسیر در خاصیت data آن با کلید breadcrumb درج می‌شود:
 data: { breadcrumb: "Parent1-Child1 Child1" }
مقدار این خاصیت را به صورت ذیل در متد buildBreadCrumbs می‌خوانیم:
  buildBreadCrumbs(route: ActivatedRoute, url: string = "", breadcrumbs: Array<BreadCrumb> = []): Array<BreadCrumb> {
    const routeDataBreadCrumbKey = "breadcrumb";
    const routeConfig = route.routeConfig;
    const path = routeConfig && routeConfig.path !== undefined ? routeConfig.path : "";

    let label = path;
    if (url === "") {
      label = "Home";
    } else if (routeConfig && routeConfig.data !== undefined) {
      label = routeConfig.data[routeDataBreadCrumbKey];
    }
برای بار اول فراخوانی متد بازگشتی buildBreadCrumbs، مقدار url خالی است. به همین جهت برچسب home را به آن نسبت خواهیم داد. در بار بعدی، اطلاعات path و data مسیر فعال شده را از شیء route.routeConfig استخراج کرده و توسط آن یک bread-crumb جدید را ایجاد می‌کنیم:
    const nextUrl = `${url}${path}/`;
    const breadcrumb: BreadCrumb = {
      label: label,
      url: nextUrl
    };
سپس اگر این مسیر فرزندی را داشته باشد، مقدار خاصیت route.firstChild آن نال نبوده و می‌توان متد بازگشتی را در همینجا با فراخوانی متد جاری تشکیل داد:
    const newBreadcrumbs = [...breadcrumbs, breadcrumb];
    if (route.firstChild) {
      return this.buildBreadCrumbs(route.firstChild, nextUrl, newBreadcrumbs);
    }
    return newBreadcrumbs;
علت استفاده‌ی از روش [breadcrumb, breadcrumbs...] بجای استفاده از متد push آرایه، مربوط است به
 encapsulation: ViewEncapsulation.None
در مورد ViewEncapsulation در مطلب «بررسی استراتژی‌های تشخیص تغییرات در برنامه‌های Angular» بیشتر بحث کرده‌ایم و تنظیم آن به None، کارآیی برنامه را با کاهش کار سیستم ردیابی تغییرات Angular، بهبود می‌بخشد.


تکمیل قالب نمایش Breadcrumbs

پس از تکمیل BreadCrumbComponent، اکنون قالب آن به صورت ذیل تعریف می‌شود:
<ol class="breadcrumb">
  <li *ngFor="let breadcrumb of breadcrumbs$ | async" class="breadcrumb-item">
    <a [routerLink]="[breadcrumb.url]">{{ breadcrumb.label }}</a>
  </li>
</ol>
در اینجا بر روی آرایه‌ی تشکیل شده‌ی توسط متد buildBreadCrumbs، یک حلقه ایجاد شده و عناصر آن نمایش داده می‌شوند. چون خاصیت عمومی breadcrumbs به صورت یک Observable تعریف شده‌است، در اینجا استفاده از async pipe را نیز در این حلقه مشاهده می‌کنید:
   breadcrumbs$: Observable<BreadCrumb[]>;


نمایش نهایی BreadCrumbs

در پایان کافی است به فایل app.component.html مراجعه کرده و selector کامپوننت نمایش bread crumbs را در آن درج کنیم:
<div class="container">
  <app-bread-crumb></app-bread-crumb>
  <router-outlet></router-outlet>
</div>


کدهای کامل این مطلب را از اینجا می‌توانید دریافت کنید.
مطالب
بررسی روش ارتقاء به NET Core 1.1.
نگارش پایدار NET Core 1.1. روز قبل منتشر شد. در ادامه نحوه‌ی ارتقاء پروژه‌‌های نگارش 1.0 RTM را به این نگارش بررسی خواهیم کرد.


دریافت نصاب NET Core 1.1.

برای این منظور به آدرس https://www.microsoft.com/net/download/core مراجعه کرده و فایل NET Core 1.1 SDK - Installer. را دریافت و نصب کنید. برای ظاهر شدن این گزینه باید حالت Current را بجای LTS (Long Term Support) انتخاب کرد:


همچنین در اینجا بسته NET Core 1.1 runtime - Installer. را هم جداگانه می‌توان دریافت و نصب کرد.


به روز رسانی فایل‌های global.json پروژه‌ها

اولین کاری را که باید پس از نصب نگارش‌های جدید NET Core. انجام داد، به روز رسانی شماره نگارش SDK درج شده‌ی در فایل‌های global.json تمام پروژه‌های موجود است. در غیراینصورت NuGet بسته‌های جدید مرتبط با آن‌ها را دریافت نخواهد کرد و آن‌ها را در لیست به روز شده‌ها نخواهید یافت.
برای این منظور خط فرمان را گشوده و دستور ذیل را صادر کنید:
 C:\>dotnet --version
1.0.0-preview2-1-003177
خروجی آن عبارتی است که باید قسمت نگارش SDK درج شود:
{
  "projects": [ "src", "test" ],
  "sdk": {
    "version": "1.0.0-preview2-1-003177"
  }
}


اصلاح فایل project.json پس از به روز رسانی فایل global.json

در ادامه باید فایل project.json نیز اندکی ویرایش شود تا شماره platform جدید را نیز درج کند. همچنین محل قرارگیری یکسری از بسته‌ها نیز باید تغییر کنند. در غیر اینصورت با اولین کامپایل Solution چنین خطاهایی را دریافت خواهید کرد:
 Can not find runtime target for framework '.NETCoreApp,Version=v1.0' compatible with one of the target runtimes: 'win10-x64, win81-x64, win8-x64, win7-x64'.
The project does not list one of 'win10-x64, win81-x64, win8-x64, win7-x64' in the 'runtimes' section.
برای رفع این مشکل، عبارت netcoreapp را در Solution جاری جستجو کرده و آن‌ها را به نحو ذیل تغییر دهید:
"frameworks": {
    "netcoreapp1.1": {
        "dependencies": {
            "Microsoft.NETCore.App": {
                "type": "platform",
                "version": "1.1.0"
            }
        },
        "imports": [
            "dnxcore50",
            "portable-net45+win8"
        ]
    }
},

یک نکته: اگر هنوز Microsoft.NETCore.App را در لیست dependencies ابتدای فایل project.json دارید، آن‌را حذف کنید؛ چون در قسمت frameworks فوق درج شده‌است. در غیراینصورت پیام تکراری بودن این کلید را دریافت خواهید کرد.

پس از طی دو مرحله‌ی فوق، یکبار پروژه را بسته و مجددا باز کنید.


به روز رسانی بسته‌های نیوگت پایدار

قبل از هر کاری مطمئن شوید که آخرین بسته‌ی خود NuGet را نیز نصب کرده‌اید (مهم). به روز رسانی‌های اخیر آن بیشتر در جهت سازگاری با پروژه‌های NET Core. است.
https://dist.nuget.org/index.html

در ادامه برای به روز رسانی بسته‌های نیوگت، می‌توان بر روی گره References کلیک راست کرد و سپس انتخاب گزینه‌ی Manage NuGet Packages و در آخر انتخاب برگه‌ی Updates و انتخاب کتابخانه‌های به روز شده. این روش برای حالت داشتن چندین پروژه در یک Solution اندکی کند است.


روش سریعتر که تمام پروژه‌ها را نیز به صورت خودکار بررسی و به روز می‌کند، مراجعه به کنسول پاورشل نیوگت و سپس صدور دستور ذیل است:
 PM> Update-Package
اگر در میان کار خطایی را دریافت کردید، این دستور را مجددا اجرا کنید (جهت اطمینان حداقل دوبار این دستور را صادر کنید).
به علاوه پس از پایان کار، یکبار به طور کامل ویژوال استودیو را بسته و مجددا باز کنید. سپس این دستور را یکبار دیگر هم صادر کنید.


به روز رسانی بسته‌های نیوگت آزمایشی

یکسری از بسته‌ها مانند Microsoft.AspNetCore.Razor.Tools تنها با انتخاب حالت include prereleases ظاهر می‌شوند که آن‌ها را نیز باید به روز کرد:



تغییر مهم ابزارهای EF Core

در کل Solution عبارت Microsoft.EntityFrameworkCore.Tools را جستجو کرده و با نام جدید Microsoft.EntityFrameworkCore.Tools.DotNet جایگزین کنید.


در آخر یک نمونه فایل project.json به روز شده‌ی یک برنامه‌ی ASP.NET Core 1.1 را در ذیل مشاهده می‌کنید:
{
    "dependencies": {
        "Microsoft.AspNetCore.Diagnostics": "1.1.0",
        "Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore": "1.1.0",
        "Microsoft.AspNetCore.Http.Extensions": "1.1.0",
        "Microsoft.AspNetCore.Mvc": "1.1.0",
        "Microsoft.AspNetCore.Mvc.Core": "1.1.0",
        "Microsoft.AspNetCore.Mvc.TagHelpers": "1.1.0",
        "Microsoft.AspNetCore.Razor.Runtime": "1.1.0",
        "Microsoft.AspNetCore.Razor.Tools": {
            "version": "1.1.0-preview4-final",
            "type": "build"
        },
        "Microsoft.AspNetCore.Server.IISIntegration": "1.1.0",
        "Microsoft.AspNetCore.Server.Kestrel": "1.1.0",
        "Microsoft.AspNetCore.Session": "1.1.0",
        "Microsoft.AspNetCore.SpaServices": "1.0.0-beta-000019",
        "Microsoft.AspNetCore.StaticFiles": "1.1.0",
        "Microsoft.EntityFrameworkCore": "1.1.0",
        "Microsoft.EntityFrameworkCore.InMemory": "1.1.0",
        "Microsoft.EntityFrameworkCore.Tools.DotNet": {
            "version": "1.1.0-preview4-final",
            "type": "build"
        },
        "Microsoft.Extensions.Configuration.Binder": "1.1.0",
        "Microsoft.Extensions.Configuration.Json": "1.1.0",
        "Microsoft.Extensions.Logging.Console": "1.1.0",
        "Microsoft.Extensions.Logging.Debug": "1.1.0",
        "Microsoft.VisualStudio.Web.CodeGeneration.Tools": {
            "version": "1.1.0-preview4-final",
            "type": "build"
        },
        "Microsoft.VisualStudio.Web.CodeGenerators.Mvc": {
            "version": "1.1.0-preview4-final",
            "type": "build"
        }
    },
 
    "tools": {
        "BundlerMinifier.Core": "2.2.301",
        "Microsoft.AspNetCore.Razor.Tools": "1.1.0-preview4-final",
        "Microsoft.VisualStudio.Web.CodeGeneration.Tools": {
            "version": "1.1.0-preview4-final",
            "imports": [
                "portable-net45+win8"
            ]
        },
        "Microsoft.EntityFrameworkCore.Tools.DotNet": {
            "version": "1.1.0-preview4-final",
            "imports": [
                "portable-net45+win8"
            ]
        },
        "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.1.0-preview4-final"
    },
 
    "frameworks": {
        "netcoreapp1.1": {
            "dependencies": {
                "Microsoft.NETCore.App": {
                    "type": "platform",
                    "version": "1.1.0"
                }
            },
            "imports": [
                "dnxcore50",
                "portable-net45+win8"
            ]
        }
    },
 
    "buildOptions": {
        "emitEntryPoint": true,
        "preserveCompilationContext": true
    },
 
    "runtimeOptions": {
        "configProperties": {
            "System.GC.Server": true
        }
    },
 
    "publishOptions": {
        "include": [
            "wwwroot",
            "Features",
            "appsettings.json",
            "web.config"
        ]
    },
 
    "configurations": {
        "Release": {
            "buildOptions": {
                "optimize": true,
                "platform": "anycpu"
            }
        }
    },
 
    "scripts": {
        "precompile": [
            "dotnet bundle"
        ],
        "prepublish": [
            //"bower install"
        ],
        "postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
    }
}


به روز رسانی پروژه‌ی Test

اگر از MSTest برای انجام آزمون‌های واحد استفاده می‌کنید، تغییرات فایل project.json آن نیز شامل تغییر شماره نگارش NETStandard.Library به 1.6.1 است و همچنین خود بسته‌های mstest نیز به روز شده‌اند. به علاوه قسمت frameworks آن نیز باید همانند مطالبی که عنوان شد، به روز شود:
{
    "version": "1.0.0-*",
 
    "testRunner": "mstest",
    "dependencies": {
        "Microsoft.EntityFrameworkCore": "1.1.0",
        "Microsoft.EntityFrameworkCore.InMemory": "1.1.0",
        "NETStandard.Library": "1.6.1",
        "dotnet-test-mstest": "1.1.2-preview",
        "MSTest.TestFramework": "1.0.6-preview"
    },
 
    "frameworks": {
        "netcoreapp1.1": {
            "dependencies": {
                "Microsoft.NETCore.App": {
                    "type": "platform",
                    "version": "1.1.0"
                }
            },
            "imports": [
                "dnxcore50",
                "portable-net45+win8"
            ]
        }
    }
}