import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
نمایش منتظر بمانید در حین بارگذاری اولیهی کامپوننت
کامپوننتهایی که قرار است اطلاعات را از یک Web API دریافت کنند، مدتی باید منتظر بمانند تا عملیات رفت و برگشت به سرور، تکمیل شود. در این بین میتوان یک loading را به کاربر نمایش داد:
@page "/hotel/rooms" @if (Rooms is not null && Rooms.Any()) { } else { <div style="position:fixed;top:50%;left:50%;margin-top:-50px;margin-left:-100px;"> <img src="images/loader.gif" /> </div> } @code { IEnumerable<HotelRoomDTO> Rooms = new List<HotelRoomDTO>(); // ... }
- هر زمانیکه کار روال رویدادگردان OnInitializedAsync به پایان برسد (که شامل اجرای متد LoadRooms نیز هست)، سبب فراخوانی خودکار StateHasChanged میشود. این فراخوانی، UI را مجددا رندر میکند. به همین جهت است که پس از پایان کار، محتوای if، رندر خواهد شد.
- از این loading سفارشی که در میانهی صفحه نمایش داده میشود، میتوان در فایل wwwroot\index.html نیز بجای loading پیشفرض آن استفاده کرد:
<body> <div id="app"> <div style=" position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; " > <img src="images/ajax-loader.gif" /> </div> </div>
افزودن خواصی جدید به HotelRoomDTO
میخواهیم به کاربر امکان تغییر تعداد روزهای اقامت را بدهیم. این انتخاب باید در لیست اتاقهای نمایش داده شده، با تغییر تعداد روزهای اقامت (TotalDays) و هزینهی جدید متناظر با آن (TotalAmount)، منعکس شود. به همین جهت این خواص را به HotelRoomDTO، اضافه میکنیم:
namespace BlazorServer.Models { public class HotelRoomDTO { // ... public int TotalDays { get; set; } public decimal TotalAmount { get; set; } } }
@code { HomeVM HomeModel = new HomeVM(); // ... private async Task LoadRoomsAsync() { Rooms = await HotelRoomService.GetHotelRoomsAsync(HomeModel.StartDate, HomeModel.EndDate); foreach (var room in Rooms) { room.TotalAmount = room.RegularRate * HomeModel.NoOfNights; room.TotalDays = HomeModel.NoOfNights; } } }
افزودن امکان تغییر تعداد روزهای اقامت در همان صفحهی نمایش لیست اتاقها
همانطور که در تصویر فوق هم مشاهده میکنید، میخواهیم در این صفحه نیز کاربر بتواند زمان شروع اقامت و مدت مدنظر را تغییر دهد. به همین جهت، HomeModel ای را که در قسمت قبل از Local Storage دریافت کردیم، به فرم زیر متصل میکنیم تا اجزای آن در این فرم، نمایش داده شده و قابل تغییر شوند:
@if (Rooms is not null && Rooms.Any()) { <EditForm Model="HomeModel" OnValidSubmit="SaveBookingInfo" class="bg-light"> <div class="pt-3 pb-2 px-5 mx-1 mx-md-0 bg-secondary"> <DataAnnotationsValidator /> <div class="row px-3 mx-3"> <div class="col-6 col-md-4"> <div class="form-group"> <label class="text-warning">Check in Date</label> <InputDate @bind-Value="HomeModel.StartDate" class="form-control" /> </div> </div> <div class="col-6 col-md-4"> <div class="form-group"> <label class="text-warning">Check Out Date</label> <input @bind="HomeModel.EndDate" disabled="disabled" readonly="readonly" type="date" class="form-control" /> </div> </div> <div class=" col-4 col-md-2"> <div class="form-group"> <label class="text-warning">No. of nights</label> <select class="form-control" @bind="HomeModel.NoOfNights"> <option value="Select" selected disabled="disabled">(Select No. Of Nights)</option> @for (var i = 1; i <= 10; i++) { <option value="@i">@i</option> } </select> </div> </div> <div class="col-8 col-md-2"> <div class="form-group" style="margin-top: 1.9rem !important;"> @if (IsProcessing) { <button class="btn btn-success btn-block form-control"> <i class="fa fa-spin fa-spinner"></i>Processing... </button> } else { <input type="submit" value="Update" class="btn btn-success btn-block form-control" /> } </div> </div> </div> </div> </EditForm>
@code { bool IsProcessing; // ... private async Task SaveBookingInfo() { IsProcessing = true; HomeModel.EndDate = HomeModel.StartDate.AddDays(HomeModel.NoOfNights); await LocalStorage.SetItemAsync(ConstantKeys.LocalInitialBooking, HomeModel); await LoadRoomsAsync(); IsProcessing = false; } }
سؤال: زمانیکه IsProcessing به true تنظیم میشود که هنوز کار متد رویدادگردان SaveBookingInfo به پایان نرسیدهاست و فراخوانی خودکار StateHasChanged در پایان متدهای رویدادگردان صورت میگیرد. پس چطور است که سبب رندر مجدد UI و تغییر برچسب دکمهی Update میشود؟
پاسخ به این سؤال را در قسمت 6 این سری با بررسی چرخهی حیات کامپوننتها، مشاهده کردیم:
«البته متدهای رویدادگردان async، دوبار سبب فراخوانی ضمنی StateHasChanged میشوند؛ یکبار زمانیکه قسمت sync متد به پایان میرسد (در این مثال یعنی تا قبل از اولین await نوشته شده) و یکبار هم زمانیکه کار فراخوانی کلی متد به پایان خواهد رسید»
نمایش لیست اتاقها
نمایش لیست اتاقها مطابق تصویر فوق، دو قسمت اصلی را دارد:
الف) نمایش لیست تصاویر منتسب به یک اتاق، توسط کامپوننت carousel بوت استرپ
@foreach (var room in Rooms) { <div class="row p-2 my-3 " style="border-radius:20px; border: 1px solid gray"> <div class="col-12 col-lg-3 col-md-4"> <div id="carouselExampleIndicators_@room.Id" class="carousel slide mb-4 m-md-3 m-0 pt-3 pt-md-0" data-ride="carousel"> <ol class="carousel-indicators"> @{ int imageIndex = 0; int innerImageIndex = 0; } @foreach (var image in room.HotelRoomImages) { if (imageIndex == 0) { <li data-target="#carouselExampleIndicators_@room.Id" data-slide-to="@imageIndex" class="active"></li> } else { <li data-target="#carouselExampleIndicators_@room.Id" data-slide-to="@imageIndex"></li> } imageIndex++; } </ol> <div class="carousel-inner"> @foreach (var image in room.HotelRoomImages) { var imageUrl = $"{ImagesBaseAddress}/{image.RoomImageUrl}"; if (innerImageIndex == 0) { <div class="carousel-item active"> <img class="d-block w-100" style="border-radius:20px;" src="@imageUrl" alt="First slide"> </div> } else { <div class="carousel-item"> <img class="d-block w-100" style="border-radius:20px;" src="@imageUrl" alt="First slide"> </div> } innerImageIndex++; } </div> <a class="carousel-control-prev" href="#carouselExampleIndicators_@room.Id" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators_@room.Id" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> }
- سپس در حلقهای که برای نمایش لیست اتاقها تهیه کردهایم، قسمتهای مختلف carousel را تکمیل میکنیم که در اینجا نیاز به ایندکس تصاویر، لیست تصاویر و یک Id منحصربفرد برای این carousel خاص را دارد تا بتوان چندین وهله از آنرا در صفحه قرار داد که این id را بر اساس Id اتاق مشخص کردهایم.
دو نکته:
- در این مثال برای تعریف لینک به تصاویر، کد زیر را مشاهده میکنید:
var imageUrl = $"{ImagesBaseAddress}/{image.RoomImageUrl}";
@code { string ImagesBaseAddress = "https://localhost:5006";
- کامپوننت carousel برای اجرا، نیاز به فایل lib/bootstrap/dist/js/bootstrap.bundle.min.js را نیز دارد. به همین جهت مدخل اسکریپت آنرا باید به فایل wwwroot\index.html اضافه کرد.
ب) نمایش جزئیات نام و هزینهی اتاق
قسمت دوم حلقهی foreach نمایش لیست اتاقها، جهت نمایش جزئیات هر اتاق تعریف شدهاست:
@foreach (var room in Rooms) { <div class="col-12 col-lg-9 col-md-8"> <div class="row pt-3"> <div class="col-12 col-lg-8"> <p class="card-title text-warning" style="font-size:xx-large">@room.Name</p> <p class="card-text"> @((MarkupString)room.Details) </p> </div> <div class="col-12 col-lg-4"> <div class="row pb-3 pt-2"> <div class="col-12 col-lg-11 offset-lg-1"> <a href="@($"hotel/room-details/{room.Id}")" class="btn btn-success btn-block">Book</a> </div> </div> <div class="row "> <div class="col-12 pb-5"> <span class="float-right"> <span class="float-right">Occupancy : @room.Occupancy adults </span><br /> <span class="float-right pt-1">Room Size : @room.SqFt sqft</span><br /> <h4 class="text-warning font-weight-bold pt-4"> <span style="border-bottom:1px solid #ff6a00"> @room.TotalAmount.ToString("#,#.00;(#,#.00#)") </span> </h4> <span class="float-right">Cost for @room.TotalDays nights</span> </span> </div> </div> </div> </div> </div> </div> }
- هر اتاق نمایش داده شده، لینکی را به صفحهی خاص خودش نیز دارد که آنرا در قسمت بعدی تکمیل میکنیم.
- در اینجا TotalAmount و TotalDays محاسباتی و قابل تغییر بر اساس انتخاب کاربر نیز درج شدهاند.
یک تمرین: در برنامهی Blazor Server، سرویسی را جهت درج مشخصات امکانات رفاهی هتل تهیه کردیم. این امکانات رفاهی را از طریق Web API برنامه دریافت و سپس در برنامهی سمت کلاینت نمایش دهید.
بنابراین تکمیل این تمرین شامل تهیهی موارد زیر است که کدنویسی آن، با دو قسمت اخیر این سری دقیقا یکی است و نکتهی جدیدی را به همراه ندارد (و کدهای کامل آن را از انتهای بحث میتوانید دریافت کنید):
- تهیهی HotelAmenityController در پروژهی Web API که به کمک IAmenityService، لیست امکانات رفاهی را بازگشت میدهد.
- تهیهی ClientHotelAmenityService در پروژهی WASM که همانند ClientHotelRoomService قسمت قبل ، از Web API، لیست HotelAmenityDTOها را دریافت میکند.
- ثبت سرویس جدید ClientHotelAmenityService در Program.cs.
- در آخر حلقهای را بر روی لیست HotelAmenityDTO دریافتی از ClientHotelRoomService در کامپوننت Index.razor تشکیل داده و آنها را نمایش میدهیم.
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید: Blazor-5x-Part-28.zip
ASP.NET MVC #1
یعنی با از بین رفتن سشن کاربر و ورود دوباره این تاخیر در بارگذاری را داریم ؟
RequireJs
یک پروژه دارای فایلهای زیر خواهد بود:
purchase.js
function purchaseProduct(){ console.log("Function : purchaseProduct"); var credits = getCredits(); if(credits > 0){ reserveProduct(); return true; } return false; }
function reserveProduct(){ console.log("Function : reserveProduct"); return true; }
function getCredits(){ console.log("Function : getCredits"); var credits = "100"; return credits; }
main.js
var result = purchaseProduct();
<script src="products.js"></script> <script src="purchase.js"></script> <script src="main.js"></script> <script src="credits.js"></script>
فقط کافیست تصور کنید که تعداد و حجم کدهای این فایلها در یک پروژه زیاد باشد یا حتی این فایلها توسط یک برنامه نویس دیگر تهیه و تدوین شده باشد؛ در نتیجه به خاطر سپردن این وابستگیها به طور قطع کار سخت خواهد بود و در خیلی موارد طافت فرسا.
RequireJs چگونه برای حل این مشکل به ما کمک میکند؟
با استفاده از فریم ورک RequireJs کدهای ما به ماژولهای کوچکتر شکسته میشود و وابستگی ماژولها در تنظیمات لود فایل ثبت میشود. در ضمن این فریم ورک با مرورگرها جدید و محبوب کاملا سازگار است. برای شروع فایلهای مورد نیاز را از اینجا دانلود نمایید. البته میتوانید از nuget هم استفاده کنید:
PM> Install-Package RequireJS
purchase.js
define(["credits","products"], function(credits,products) { console.log("Function : purchaseProduct"); return { purchaseProduct: function() { var credit = credits.getCredits(); if(credit > 0){ products.reserveProduct(); return true; } return false; } } });
products.js
define(function(products) { return { reserveProduct: function() { console.log("Function : reserveProduct"); return true; } } });
define(function() { console.log("Function : getCredits"); return { getCredits: function() { var credits = "100"; return credits; } } });
کافیست در فایل main.js، برای استفاده از فایل purchase.js از دستور require استفاده کنید.
require(['purchase'], function( purchase ) { var result = purchase.purchaseProduct(); });
تفاوت بین دستور require و define
دستور define صرفا برای تعیین وابستگی ماژول استفاده میشود در حالی که دستور require برای فراخوانی و لود ماژول کاربرد دارد و به نوعی به عنوان نقطه شروع اجرای برنامه خواهد بود.
در پست بعدی به پیاده سازی مثال بالا به کمک RequireJs در قالب یک پروژه Asp.Net MVC خواهم پرداخت.
بررسی آیندهی Blazor در دات نت 8
- سرعت بالاتر بارگذاری و اجرای کدها
- استفاده از آخرین فناوریهای وب مانند ES 6 و وب کامپوننتها با پشتیبانی تا IE 9.
- سطح API آن با طراحی جدید آن، به شدت کاهش یافته و خلاصه شدهاست. همین امر یادگیری آنرا نیز سادهتر میکند.
برای یادگیری Angular 2 نیازی به فراگیری Angular 1 نیست. در اینجا با آشنایی با TypeScript، به این نتیجه خواهید رسید که برنامههای Angular 2 چیزی بیشتر از یک مثال عملی TypeScript نیستند. زبان TypeScript، زبان اول و توصیه شدهی کار با Angular 2 است و مزیت آن دسترسی به تمام قابلیتهای ES 6 است؛ با این تفاوت که کامپایلر TypeScript قادر است آنها را به ES 5 یا نگارش فعلی جاوا اسکریپت که توسط تمام مرورگرها پشتیبانی میشود، ترجمه و تبدیل کند. به این نحو به یک طراحی شیءگرا، مدرن و با قابلیت نگهداری بالا خواهید رسید که با تمام مرورگرهای جدید نیز سازگار است.
بنابراین پیشنیازهای اصلی کار با Angular 2، فراگیری ES 6 و TypeScript هستند که دو سری ویژه و مختص به آنها در سایت جاری تهیه شدهاند:
«مبانی ES 6»
«مبانی TypeScript»
در این قسمت قصد داریم پیشنیازهای دریافت و نصب اجزاء و وابستگیهای AngularJS 2 را به همراه TypeScript، در ویژوال استودیو 2015 بررسی کنیم. البته استفاده از ویژوال استودیو در اینجا ضروری نیست و اساسا AngularJS وابستگی به ویژوال استودیو ندارد. اگر به دنبال پشتیبانی بهتری از TypeScript هستید، VSCode رایگان، سورس باز و چند سکویی، گزینهی بسیار بهتری است نسبت به ویژوال استودیوی کامل. البته این مورد تعجبی هم ندارد؛ از این جهت که VSCode با TypeScript نوشته شدهاست.
اهمیت آشنایی با npm
اگر در طی سالهای اخیر با ویژوال استودیو کار کرده باشید، به طور قطع با NuGet نیز آشنا هستید. NuGet به عنوان یک package manager دات نتی شناخته میشود و کار آن دریافت وابستگیهای یک پروژه، از مخزنی مشخص و نصب و به روز رسانی خودکار آنها است. اما این روزها خارج از محیط توسعهی مایکروسافت، مدیرهای بستههای دیگری مانند Bower نیز برای نصب و به روز رسانی بستههای front end مانند کتابخانههای CSS ایی و جاوا اسکریپتی، بسیار رواج پیدا کردهاند. Bower یکی از ابزارهای NodeJS است که توسط NPM یا NodeJS Package Manager نصب میشود. به این معنا که استفاده از Bower به معنای استفاده از NPM است. پیش از این از NPM صرفا جهت نصب بستههای مرتبط با NodeJS استفاده میشد، اما در طی یکسال اخیر، استفاده از NPM نیز برای مدیریت بستههای front end رواج پیدا کردهاست و در صدر مدیر بستههای نصب کتابخانههای front end قرار دارد. همچنین در این حالت شما تنها نیاز به یک ابزار و یک فایل تنظیمات آن خواهید داشت، بجای استفاده از چندین ابزار و چندین فایل تنظیمات جداگانه. به علاوه این روزها انجام کارهای جدی جاوا اسکریپتی بدون دانش NPM دیگر میسر نیست. بهترین ابزارها، کامپایلرها، فشرده کنندههای front end و امثال آنها، تحت NodeJS اجرا میشوند. برای کار با AngularJS 2.0 و دریافت وابستگیهای آن نیز استفاده از npm، روش پیش فرض و توصیه شدهاست.
کار با npm جهت دریافت وابستگیهای کتابخانههای front end
برای کار با npm یا میتوان از دستورات خط فرمان آن به صورت مستقیم استفاده کرد و یا از امکانات یکپارچگی آن با ویژوال استودیو نیز بهره گرفت که ما در ادامه از این روش استفاده خواهیم کرد. البته توانمندیهای خط فرمان npm فراتر است از امکانات توکار VS.NET، اما در اینجا نیازی به آنها نیست و هدف صرفا دریافت و به روز رسانی وابستگیهای مرتبط است.
ویژوال استودیوی 2015 به همراه ابزارهای NodeJS ارائه میشود. اما مشکل اینجا است که این ابزارها هم اکنون قدیمی شدهاند و تطابقی با آخرین نگارش ابزارهای NodeJS ندارند. برای نمونه حین نصب وابستگیهای AngularJS 2.0 که یکی از آنها RxJS است، یک چنین خروجی را در پنجرهی output ویژوال استودیو مشاهده میکنید:
npm WARN engine rxjs@5.0.0-beta.6: wanted: {"npm":">=2.0.0"} (current: {"node":"v0.10.31","npm":"1.4.9"})
همانطور که در تصویر نیز ملاحظه میکنید، به مسیر Tools->Options->Projects and Solutions->External Web Tools مراجعه کرده و متغیر محیطی PATH ویندوز را به ابتدای لیست منتقل کنید. به این صورت ابزارهای به روز شدهی خط فرمان، مقدم خواهند شد بر ابزارهای قدیمی به همراه نگارش فعلی ویژوال استودیو.
البته فرض بر این است که آخرین نگارش nodejs را از آدرس https://nodejs.org/en دریافت و نصب کردهاید. با نصب آن، برنامه npm، در خط فرمان ویندوز به صورت مستقیم قابل استفاده خواهد بود؛ از این جهت که مسیر آن به PATH ویندوز اضافه شدهاست:
افزودن فایل project.json به پروژه
تا اینجا فرض بر این است که nodejs را از سایت آن دریافت و نصب کردهاید. همچنین متغیر PATH را در External Web Tools ویژوال استودیو به ابتدای لیست آن منتقل کردهاید تا همواره از آخرین نگارش npm نصب شدهی در سیستم، استفاده شود.
پس از آن همانند نیوگت که از فایل xml ایی به نام packages.config برای ثبت آخرین تغییرات خودش استفاده میکند، npm نیز از فایلی به نام package.json برای ذکر وابستگیهای مورد نیاز پروژه بهره میبرد. برای افزودن آن، از منوی Project گزینهی Add new item را انتخاب کرده و سپس npm را در آن جستجو کنید:
در اینجا نام پیش فرض package.json را پذیرفته و این فایل را به پروژه و ریشهی آن اضافه کنید.
اگر گزینهی فوق را در لیست Add new item مشاهده نمیکنید، مهم نیست. یک فایل متنی را به نام package.json به ریشهی پروژهی جاری اضافه کنید.
در ادامه محتوای این فایل را به نحو ذیل تغییر دهید:
{ "name": "asp-net-mvc5x-angular2x", "version": "1.0.0", "author": "DNT", "description": "", "scripts": {}, "license": "Apache-2.0", "dependencies": { "jquery": "2.2.3", "angular2": "2.0.0-beta.15", "systemjs": "^0.19.26", "es6-promise": "^3.1.2", "es6-shim": "^0.35.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "zone.js": "^0.6.12", "bootstrap": "^3.3.6" }, "devDependencies": { "typescript": "^1.8.9", "typings": "^0.8.1" }, "repository": { } }
چند نکته:
- هر زمانیکه این فایل را ذخیره کنید، بلافاصله کار دریافت این بستهها از اینترنت آغاز خواهد شد. جزئیات آنرا میتوان در پنجرهی output ویژوال استودیو مشاهده کرد (و حتما اینکار را جهت دیباگ کار انجام دهید. بسیاری از مشکلات و خطاها، در اینجا لاگ میشوند). بنابراین اگر قصد دارید کار همگام سازی تغییرات را انجام دهید، فقط کافی است دکمههای ctrl+s یا save را بر روی این فایل اعمال کنید.
- کاری که دکمهی ctrl+s در این فایل انجام میدهد، اعمال خودکار دستور npm install بر روی پوشهای است که package.json در آن قرار دارد. بنابراین برای دریافت این بستهها، روش خط فرمان آن، ابتدا وارد شدن به ریشهی پروژهی جاری و سپس صدور دستور npm install است (که نیازی به آن نیست و ویژوال استودیو اینکار را به صورت خودکار انجام میدهد).
- بستههای دریافت شده، در پوشهای به نام node_modules در ریشهی پروژه ذخیره میشوند:
برای مشاهدهی آنها میتوان بر روی دکمهی show all files در solution explorer کلیک نمائید.
- درون فایل package.json، پشتیبانی کاملی از intellisense وجود دارد. برای مثال اگر علاقمند بودید تا آخرین نگارش AngularJS را مشاهده کنید، پس از خاصیت angular2 در تنظیمات فوق، " را تایپ کنید تا منوی تکمیل کنندهای ظاهر شود:
بدیهی است این منو جهت دریافت آخرین اطلاعات، نیاز به اتصال به اینترنت را دارد.
البته همیشه آخرین شماره نگارش AngularJS 2.0 را در این آدرس نیز میتوانید مشاهده کنید: CHANGELOG.md
- در این فایل شماره نگارش آغاز شدهای با ^ مانند "3.1.2^" به این معنا است که اجازهی نصب نگارشهای جدیدتری از 3.1.2 نیز داده شدهاست.
به روز رسانی کامپایلر TypeScript
نیاز است یکبار مطلب «مبانی TypeScript؛ تنظیمات TypeScript در ویژوال استودیو» را جهت آشنایی با نحوهی به روز رسانی اجزای مرتبط با TypeScript مطالعه کنید.
افزودن فایل tsconfig.json به پروژه
مرحلهی بعد شروع به کار با AngularJS و TypeScript، انجام تنظیمات کامپایلر TypeScript است. برای این منظور از منوی پروژه، گزینهی Add new item، عبارت typescript را جستجو کرده و در لیست ظاهر شده، گزینهی TypeScript JSON Configuration File را با نام پیش فرض آن انتخاب کنید:
اگر این گزینهی ویژه را در لیست add new items ندارید، مهم نیست. یک فایل متنی را به نام tsconfig.json به ریشهی پروژهی جاری اضافه کنید.
پس از افزودن فایل tsconfig.json به ریشهی سایت، تنظیمات آنرا به نحو ذیل تغییر دهید:
{ "compileOnSave": true, "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "noImplicitAny": false, "noEmitOnError": true, "removeComments": false, "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true }, "exclude": [ "node_modules", "wwwroot", "typings/main", "typings/main.d.ts" ] }
برای نمونه خاصیت compileOnSave سبب خواهد شد تا پس از ذخیره سازی یک فایل ts، بلافاصله فایل js معادل آْن تولید شود. نوع ماژولها در اینجا به system.js تنظیم شدهاست و خروجی کدهای js آن از نوع ES 5 درنظر گرفته شدهاست. همچنین فعال سازی decorators نیز در اینجا صورت گرفتهاست. از این جهت که AngularJS2 استفادهی گستردهای را از این مفهوم، انجام میدهد.
در قسمت excludes به کامپایلر TypeScript اعلام شدهاست تا از یک سری از مسیرها مانند پوشهی node_modules که پیشتر آنرا تنظیم و دریافت کردیم، صرفنظر کند.
خلاصهی بحث
تا اینجا با نحوهی نصب پیشنیازهای AngularJS 2 و همچنین TypeScript آشنا شدیم. به صورت خلاصه:
- nmp اصلی را از سایت nodejs دریافت و نصب کنید.
- متغیر PATH را در ویژوال استودیو، به ابتدای لیست ابزارهای خارجی وب آن منتقل کنید تا از npm اصلی استفاده کند.
- فایل project.json را با محتوای ذکر شده، به ریشهی پروژه اضافه کنید. سپس یکبار آنرا save کنید تا وابستگیها را از اینترنت دریافت کند.
- اطمینان حاصل کنید که آخرین کامپایلر TypeScript را نصب کردهاید.
- فایل tsconfig.json را با محتوای ذکر شده، به ریشهی پروژه اضافه کنید.
روش جدید import اجزای RxJS در نگارش 5.5 آن
تغییرات تعاریف عملگرها:
تا پیش از Angular 5 و RxJS 5.5 (و یا Angular CLI versions <1.5.0)، اگر نیاز به عملگری (operator/function) مانند map وجود داشت، روش import آن به صورت زیر بود:
import 'rxjs/add/operator/map';
import { map } from 'rxjs/operators';
import { map, catchError, tap } from 'rxjs/operators';
همچنین در این نگارش، Observable بجای rxjs/Rx :
import { Observable } from 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
تغییرات تعاریف statics:
برای صدور خطاها بجای throw قبلی:
import 'rxjs/add/observable/throw'; Observable.throw('error');
import { ErrorObservable } from 'rxjs/observable/ErrorObservable'; ErrorObservable.create('error');
و برای ایجاد تایمر، بجای timer پیشین:
import "rxjs/add/observable/timer"; const timerSource$ = Observable.timer(initialDelay);
import { timer } from 'rxjs/observable/timer'; const timerSource$ = timer(initialDelay);
معرفی lettable operators
Lettable Operators توابعی هستند که یک observable را دریافت و یک observable را بازگشت میدهند؛ به آنها pipeable operators هم میگویند. از این جهت که در اینجا متد جدید pipe، برای ترکیب چندین تابع عملگر بر روی مقادیر observable توسط آن، ارائه شدهاست.
مزیت این روش این است که pipeable/lettable operators، یک سری تابع محض هستند و اگر مورد استفاده قرار نگیرند، به سادگی توسط سیستم و ابزار ساخت برنامه، از فایل نهایی حذف خواهند شد؛ یا اصطلاحا tree-shakable هست. اما روش پیشین تعریف این عملگرها، tree-shakable نبوده و حتی اگر توسط برنامه مورد استفاده قرار نگیرند، در بستهی نهایی تولید شده، حضور خواهند داشت. Tree-shaking به معنای پروسهی حذف کدهای مرده است. روش جدید استفادهی از importهای ES 6، امکان تشخیص عملگرهای استفاده نشده را توسط ابزارهایی مانند TS-Lint و تنظیمات کامپایلر TypeScript به سادگی میسر میکنند و به این ترتیب با حذف متدها و ماژولهای استفاده نشده، میتوان به حجم نهایی بسیار کمتری رسید.
روش قبلی تعریف عملگرهای Observable، اصطلاحا Patching نامیده میشود. به این معنا که هر متد جدید import شدهی در برنامه، به Observable.prototype اصلی اضافه و وصله میشود. اما در این روش جدید، تنها متد وصله شدهی از پیش موجود، Observable.prototype.pipe است و تمام متدهای دیگر import شده، توابع محض هستند و نه وصلهای به Observable.prototype اصلی. زمانیکه وصلهای به Observable.prototype متصل میشود، دیگر امکان حذف آن توسط ابزارهای ساخت برنامه وجود ندارد (حتی اگر استفاده نشده باشند)؛ اما اگر این متدها به صورت خالص و مجزای از Observable.prototype ارائه شوند، امکان حذف کدهای مرده و استفاده نشده، به سادگی میسر خواهد شد؛ چون توابعی خالص و متکی به خود هستند.
یک نمونه مثال استفادهی از pipeable/lettable operators را در کد زیر مشاهده میکنید:
import { from} from 'rxjs/observable/from'; import { map, scan, filter } from 'rxjs/operators'; const source$ = range(1,10); const sumOfSquaredOddNumbers$ = source$.pipe( filter(n => n % 2 !== 0), map(n => n * n), scan((acc,s) => acc + s, 0) ); sumOfSquaredOddNumbers$.subscribe(v => console.log(v)); /*** Output ****/ 1 10 35 84 165
در اینجا روش تعریف Observableها نیز تغییر کردهاست و از متد of جهت کار با تعدادی ورودی مشخص و یا متد range برای کار با بازهای از اعداد، استفاده میشود:
import { of } from 'rxjs/observable/of'; import { from } from 'rxjs/observable/from'; import { range } from 'rxjs/observable/range'; const source$ = of(1,2,3); const rangeSource$ = range(0,5);
متد filter، اعداد فرد بازه را انتخاب میکند. متد map این اعداد انتخابی را به توان 2 میرساند و سپس متد scan آنها را با هم جمع میزند و نتیجه توسط متد pipe به صورت یک Observable دیگر بازگشت داده میشود که میتوان مشترک آن شد و برای مثال خروجی فوق را در console درج کرد.
تغییر نام عملگرهای قبلی RxJS
تا اینجا دریافتیم که هدف اصلی pipeable/lettable operators، عدم معرفی آنها به صورت یک وصلهی جدید جدانشدنی از Observable.prototype، به صورت توابع خالص است. اکنون که این عملگرها، تبدیل به متدهای خالص و متکی به خود شدهاند، نباید با متدهای اصلی جاوا اسکریپت تداخل نام پیدا کنند؛ به همین جهت برای ارتقاء کدهای قدیمی خود، به این تغییر نامها نیاز خواهید داشت: متد do به tap تغییر نام یافتهاست. متد switch شدهاست switchAll. بجای catch اینبار catchError داریم و finally شدهاست finalize.
مثالی از ارتقاء کدهای قدیمی به روش جدید RxJS 5.5
اگر مثال روش قدیمی مبتنی بر وصله کردن Observable.prototype، به صورت زیر باشد:
import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/filter'; names = allUserData. map(user => user.name). filter(name => name);
import { Observable } from 'rxjs/Observable'; import { map, filter } from 'rxjs/operators'; names = allUserData.pipe( map(user => user.name), filter(name => name), );
به عنوان یک مثال تکمیلی، کدهای سری «احراز هویت و اعتبارسنجی کاربران در برنامههای Angular» جهت استفادهی از pipeable/lettable operators به روز رسانی شدهاند. لیست تغییرات آنها را در اینجا میتوانید مشاهده کنید.
آشنایی با Leaflet
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
#map { height: 600px; }
var map = L.map('map').setView([29.6760859,52.4950737], 13);
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'; var osm = new L.TileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib}).addTo(map);
Marker، دایره و چندضلعی
در کنار نمایش Tileها میتوان اشکال گرافیکی نیز به نقشه اضافه کرد؛ مثل مارکر(نقطه)، مستطیل، دایره و یا یک Popup. اضافه کردن یک Marker به سادگی، با کد زیر صورت میپذیرد:
var marker = L.marker([29.623116,52.497856]).addTo(map);
محل مورد نظر به شیء مارکر پاس داده شده و مقدار بازگشتی به map اضافه شده است.
نمایش چند ضلعی و دایره هم کار ساده ای است. برای دایره باید ابتدا مختصات مرکز دایره و شعاع به متر را به L.circle پاس داد:
var circle = L.circle([29.6308217,52.5048021], 500, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map);
در کد بالا علاوه بر محل و اندازه دایره، رنگ محیط، رنگ داخل و شفافیت (opacity) نیز مشخص شدهاند.
برای چند ضلعیها میتوان به این صورت عمل کرد:
var polygon = L.polygon([ [29.628453, 52.488838], [29.637368, 52.493987], [29.637168, 52.503987] ]).addTo(map);
کار کردن با Popup ها
از Popup میتوان برای نمایش اطلاعات اضافهای بر روی یک محل خاص یا یک عنوان به مانند Marker استفاده کرد. برای مثال میتوان اطلاعاتی دربارهی محل یک Marker یا دایره نمایش داد. در هنگام ایجاد marker، دایره و چندضلعی مقادیر بازگشتی در متغیرهای جدایی ذخیره شدند. اکنون میتوان به آن اشیاء یک popup اضافه کرد:
marker.bindPopup("باغ عفیف آباد").openPopup(); circle.bindPopup("I am a circle."); polygon.bindPopup("I am a polygon.");
به علت اینکه openPopup برای Marker صدا زده شده، به صورت پیشفرض popup را نمایش میدهد. اما برای بقیه، نمایش با کلیک خواهد بود. البته الزاما نیازی نیست که popup روی یک شیء نمایش داده شود، میتوان popupهای مستقلی نیز ایجاد کرد:
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("I am a standalone popup.") .openOn(map);