https://www.nuget.org/api/v2/package/{packageID}/{packageVersion} https://az320820.vo.msecnd.net/packages/{name}.{version}.nupkg npm update -g
ng new MaterialAngularClient --routing
cd MaterialAngularClient ng serve -o
ng add @angular/material
npm install --save @angular/material @angular/cdk npm install --save @angular/animations npm install --save hammerjs
import "hammerjs";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule
]
})
export class AppModule { } 
import { CommonModule } from "@angular/common";
import { NgModule, Optional, SkipSelf } from "@angular/core";
import { RouterModule } from "@angular/router";
@NgModule({
imports: [CommonModule, RouterModule],
exports: [
// components that are used in app.component.ts will be listed here.
],
declarations: [
// components that are used in app.component.ts will be listed here.
],
providers: [
/* ``No`` global singleton services of the whole app should be listed here anymore!
Since they'll be already provided in AppModule using the `tree-shakable providers` of Angular 6.x+ (providedIn: 'root').
This new feature allows cleaning up the providers section from the CoreModule.
But if you want to provide something with an InjectionToken other that its class, you still have to use this section.
*/
]
})
export class CoreModule {
constructor(@Optional() @SkipSelf() core: CoreModule) {
if (core) {
throw new Error("CoreModule should be imported ONLY in AppModule.");
}
}
} import { CommonModule } from "@angular/common";
import { HttpClientModule } from "@angular/common/http";
import { ModuleWithProviders, NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
@NgModule({
imports: [
CommonModule,
FormsModule,
HttpClientModule
],
entryComponents: [
// All components about to be loaded "dynamically" need to be declared in the entryComponents section.
],
declarations: [
// common and shared components/directives/pipes between more than one module and components will be listed here.
],
exports: [
// common and shared components/directives/pipes between more than one module and components will be listed here.
CommonModule,
FormsModule,
HttpClientModule,
]
/* No providers here! Since they’ll be already provided in AppModule. */
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
// Forcing the whole app to use the returned providers from the AppModule only.
return {
ngModule: SharedModule,
providers: [ /* All of your services here. It will hold the services needed by `itself`. */]
};
}
} import { CoreModule } from "./core/core.module";
import { SharedModule } from "./shared/shared.module";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CoreModule,
SharedModule.forRoot(),
AppRoutingModule
]
})
export class AppModule { } import { CdkTableModule } from "@angular/cdk/table";
import { NgModule } from "@angular/core";
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
} from "@angular/material";
@NgModule({
imports: [
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatStepperModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
CdkTableModule
],
exports: [
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatStepperModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
CdkTableModule
]
})
export class MaterialModule {
} import { MaterialModule } from "./material.module";
@NgModule({
imports: [
CommonModule,
FormsModule,
HttpClientModule,
MaterialModule
],
exports: [
// common and shared components/directives/pipes between more than one module and components will be listed here.
CommonModule,
FormsModule,
HttpClientModule,
MaterialModule
]
})
export class SharedModule {
} 
<button mat-button>Click me!</button>
<mat-checkbox>Check me!</mat-checkbox>
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<button mat-button> <mat-icon>face</mat-icon> Click me! </button> <mat-checkbox>Check me!</mat-checkbox>
npm install material-design-icons --save
"styles": [ "node_modules/material-design-icons/iconfont/material-icons.css", "src/styles.css" ],
نسخه net core 2.2. Preview 3.، روز چهارشنبه 25 مهر، مطابق با 17 اکتبر منتشر شد. این نسخه شامل ویژگی‌های جدیدی از جمله موارد زیر می‌باشد:
مهمترین ویژگی مربوط به EF Core برای گروهی از برنامه نویسان، پشتیبانی از فیلدهای جغرافیایی یا همان Spatial Data می‌باشد.
نسخه‌ی net core 2.2 RTM.، قبل از انتهای سال میلادی جاری منتشر خواهد شد و پس از آن آغاز به کار بر روی net core 3. خواهد بود. برای نسخه‌ی net Core 3.، هدف بهبود برنامه‌های مبتنی بر Desktop و سازگاری آن با فرمت جدید csproj، اعلام شده‌است.
برای استفاده از ویژگی‌های net core 2.2. باید نسخه‌ی visual studio 2017 preview، یعنی ورژن Version 15.9.0 به بعد را نصب کنید. اگر صرفا dotnet core 2.2 را نصب کنید و از ویژوال استودیوی جاری قصد استفاده را داشته باشید، به شما پیغام میدهد که این نسخه قابلیت استفاده از دات نت 2.2 به بعد را ندارد.
برای تست و استفاده از net core 2.2 preview 3. مراحل زیر را طی کنید:
1- ابتدا آخرین انتشار ویژوال استودیو 2017، یعنی نسخه‌ی پیش‌نمایش preview را از اینجا دریافت و نصب کنید. نسخه Enterprise را انتخاب کنید تا installer دانلود شود وشروع به نصب کند. حجم این نسخه، از نسخه‌ی اصلی کمتر می‌باشد.
پس از نصب، این نسخه را میتوانید در کنار نسخه‌ی اصلی، همزمان بر روی سیستم داشته باشید.
Install-Package Microsoft.EntityFrameworkCore -Version 2.2.0-preview3-35497
3- پس از نصب، ویژوال استودیوی preview را از همان مسیر visual studio، اجرا کنید. یک پروژه‌ی جدید از نوع وب را ایجاد کنید و فریمورک را بر روی بالاترین مقدار آن قرار دهید؛ مثل تصویر زیر:
بعد از ایجاد پروژه، میتوانید در solution Explorer، ارجاعات جدید را مشاهده کنید:
services.AddMvc();
app.Run(async (context) =>
{
await context.Response.WriteAsync("Hello World!");
}); namespace Razor
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
//app.Run(async (context) =>
//{
// await context.Response.WriteAsync("Hello World!");
//});
}
}
} namespace Razor.Models
{
public class Product
{
public int ProductID { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public decimal Price { get; set; }
public string Category { set; get; }
}
} namespace Razor.Controllers
{
public class HomeController : Controller
{
// GET: /<controller>/
public ViewResult Index()
{
Product myProduct = new Product
{
ProductID = 1,
Name = "Kayak",
Description = "A boat for one person",
Category = "Watersports",
Price = 275M
};
return View(myProduct);
}
}
} @model Razor.Models.Product
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
Content will go here
</body>
</html> @model Razor.Models.Product
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
@Model.Name
</body>
</html>
@using Razor.Models
@model Product
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
@Model.Name
</body>
</html> @{
Layout = null;
} 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<style>
#mainDiv {
padding: 20px;
border: solid medium black;
font-size: 20pt
}
</style>
</head>
<body>
<h1>Product Information</h1>
<div id="mainDiv">
@RenderBody()
</div>
</body>
</html> @model Product
@{
Layout = "_BasicLayout";
ViewBag.Title = "Product";
} 
@{
Layout = "_Layout";
} @{
Layout = "_BasicLayout";
}
@model Product
@{
ViewBag.Title = "Product";
} | کامپوننت |
انجام میشود |
انجام نمیشود |
| Action Method |
یک شیء ViewModel را به View ارسال می‌کند. |
یک فرمت داده را به View ارسال می‌کند. |
| View |
از شیء ViewModel برای ارائه محتوا به کاربر استفاده می‌کند. |
هر جنبه‌ای از شیء View Model مشخصات را تغییر میدهد. |
*@
@model Product
@{
ViewBag.Title = "Product";
}
<p>Product Name: @Model.Name</p> <p>Product Price: @($"{Model.Price:C2}")</p> <p>Product Name: @Model.Name</p>
using Microsoft.AspNetCore.Mvc;
using Razor.Models;
namespace Razor.Controllers
{
public class HomeController : Controller
{
// GET: /<controller>/
public ViewResult Index()
{
Product myProduct = new Product
{
ProductID = 1,
Name = "Kayak",
Description = "A boat for one person",
Category = "Watersports",
Price = 275M
};
return View(myProduct);
}
}
} <p>Product Name: @Model.Name</p> <p>Product Price: @($"{Model.Price:C2}")</p> <p>Stock Level: @ViewBag.StockLevel</p> 
@model Product
@{
ViewBag.Title = "Product";
}
p>Product Name: @Model.Name</p> <p>Product Price: @($"{Model.Price:C2}")</p>
<p>Stock Level: @ViewBag.StockLevel</p>
<div data-productid="@Model.ProductID" data-stocklevel="@ViewBag.StockLevel">
<p>Product Name: @Model.Name</p>
<p>Product Price: @($"{Model.Price:C2}")</p>
<p>Stock Level: @ViewBag.StockLevel</p>
</div> <div data-productid="1" data-stocklevel="2"> <p>Product Name: Kayak</p> <p>Product Price: £275.00</p> <p>Stock Level: 2</p> </div>
@model Product
@{ ViewBag.Title = "Product Name"; }
<div data-productid="@Model.ProductID" data-stocklevel="@ViewBag.StockLevel">
<p>Product Name: @Model.Name</p>
<p>Product Price: @($"{Model.Price:C2}")</p>
<p>Stock Level:
@switch (ViewBag.StockLevel)
{
case 0:@:Out of Stock break;
case 1:
case 2:
case 3:
<b>Low Stock (@ViewBag.StockLevel)</b>
break;
default:
@: @ViewBag.StockLevel in Stock
break;
}
</p>
</div> 
<b>Low Stock (@ViewBag.StockLevel)</b>