The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. Unfortunately different browsers understand differnt font types. This service allows you to generate css rule and font files that makes your font work in all the browsers that support font-face or webfonts.
ng new MaterialAngularClient --routing
ng g m ContactManager -m app.module --routing
import { ContactManagerModule } from "./contact-manager/contact-manager.module";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CoreModule,
SharedModule.forRoot(),
ContactManagerModule,
AppRoutingModule
],
})
export class AppModule { } ng g c contact-manager/ContactManagerApp --no-spec
CREATE src/app/contact-manager/contact-manager-app/contact-manager-app.component.html (38 bytes) CREATE src/app/contact-manager/contact-manager-app/contact-manager-app.component.ts (319 bytes) CREATE src/app/contact-manager/contact-manager-app/contact-manager-app.component.css (0 bytes) UPDATE src/app/contact-manager/contact-manager.module.ts (436 bytes)
ng g c contact-manager/components/toolbar --no-spec ng g c contact-manager/components/main-content --no-spec ng g c contact-manager/components/sidenav --no-spec
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
const routes: Routes = [
{ path: "contactmanager", loadChildren: "./contact-manager/contact-manager.module#ContactManagerModule" },
{ path: "", redirectTo: "contactmanager", pathMatch: "full" },
{ path: "**", redirectTo: "contactmanager" }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { } import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { MainContentComponent } from "./components/main-content/main-content.component";
import { ContactManagerAppComponent } from "./contact-manager-app/contact-manager-app.component";
const routes: Routes = [
{
path: "", component: ContactManagerAppComponent,
children: [
{ path: "", component: MainContentComponent }
]
},
{ path: "**", redirectTo: "" }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ContactManagerRoutingModule { } <app-sidenav></app-sidenav>
<app-toolbar></app-toolbar> <router-outlet></router-outlet>
import { SharedModule } from "../shared/shared.module";
@NgModule({
imports: [
CommonModule,
SharedModule,
ContactManagerRoutingModule
]
})
export class ContactManagerModule { } 
<mat-sidenav-container *ngIf="shouldRun">
<mat-sidenav mode="side" opened>
Sidenav content
</mat-sidenav>
Primary content
</mat-sidenav-container> 
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
body {
margin: 0;
} <mat-card> <h1>Main content</h1> </mat-card>
|
sidenav\sidenav.component.css | sidenav\sidenav.component.html |
.app-sidenav-container {
position: fixed;
}
.app-sidenav {
width: 240px;
}
.wrapper {
margin: 50px;
} | <mat-sidenav-container fxLayout="row"
fxFill>
<mat-sidenav #sidenav
fxFlex="1 1 100%" [opened]="!isScreenSmall"
[mode]="isScreenSmall ? 'over' : 'side'">
<mat-toolbar color="primary">
Contacts
</mat-toolbar>
<mat-list>
<mat-list-item>Item 1</mat-list-item>
<mat-list-item>Item 2</mat-list-item>
<mat-list-item>Item 3</mat-list-item>
</mat-list>
</mat-sidenav>
<mat-sidenav-content fxLayout="column" fxFlex="1 1 100%" fxFill>
<app-toolbar (toggleSidenav)="sidenav.toggle()"></app-toolbar>
<div>
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container> |
<app-toolbar (toggleSidenav)="sidenav.toggle()"></app-toolbar>
<mat-sidenav [opened]="!isScreenSmall" [mode]="isScreenSmall ? 'over' : 'side'">
import { Component, OnDestroy, OnInit } from "@angular/core";
import { MediaChange, ObservableMedia } from "@angular/flex-layout";
import { Subscription } from "rxjs";
@Component({
selector: "app-sidenav",
templateUrl: "./sidenav.component.html",
styleUrls: ["./sidenav.component.css"]
})
export class SidenavComponent implements OnInit, OnDestroy {
isScreenSmall = false;
watcher: Subscription;
constructor(private media: ObservableMedia) {
this.watcher = media.subscribe((change: MediaChange) => {
this.isScreenSmall = change.mqAlias === "xs";
});
}
ngOnInit() {
}
ngOnDestroy() {
this.watcher.unsubscribe();
}
} 
| toolbar\toolbar.component.css | toolbar\toolbar.component.html |
.sidenav-toggle {
padding: 0;
margin: 8px;
min-width:56px;
} | <mat-toolbar color="primary">
<button mat-button fxHide fxHide.xs="false"
class="sidenav-toggle" (click)="toggleSidenav.emit()">
<mat-icon>menu</mat-icon>
</button>
<span>Contact Manager</span>
</mat-toolbar> |
<app-toolbar (toggleSidenav)="sidenav.toggle()"></app-toolbar>
import { Component, EventEmitter, OnInit, Output } from "@angular/core";
@Component({
selector: "app-toolbar",
templateUrl: "./toolbar.component.html",
styleUrls: ["./toolbar.component.css"]
})
export class ToolbarComponent implements OnInit {
@Output() toggleSidenav = new EventEmitter<void>();
constructor() { }
ngOnInit() {
}
} CSS Values is a simple single page web app (SPA) that lets you search for almost any CSS property and get a simple list of possible values.
Opinionated reset stylesheet that provides a clean styling slate for your project
CSS Dig دارای محیطی بسیار ساده است و برخلاف DevTools، دارای امکاناتی مشخص و یکپارچه می‌باشد.
دریافت رایگان تصاویر و وکتورهای مورد نیاز برای طراحی صفحات
هدف ارائه راه حلی برای مدیریت Transactionها به عنوان یک Cross Cutting Concern، توسط ApplicationServiceها می‌باشد.
پیش فرض ما این است که شما از EF به عنوان OR-Mapper استفاده می‌کنید و الگوی Context Per Request را پیاده سازی کرده اید یا از طریق پیاده سازی الگوی Container Per Request به داشتن Context یکتا برای هر درخواست رسیده اید.
کتابخانه StructureMap.Mvc5 پیاده سازی از الگوی Container Per Request را با استفاده از امکانات Nested Container مربوط به StructureMap ارائه می‌دهد. اشیاء موجود در Nested Container طول عمر Singleton دارند.
واسط ITransaction
public interface ITransaction : IDisposable
{
void Commit();
void Rollback();
} واسط بالا 3 متد را که برای مدیریت تراکنش لازم می‌باشد، در اختیار استفاده کننده قرار می‌دهد.
واسط IUnitOfWork
public interface IUnitOfWork : IDisposable
{
...
ITransaction BeginTransaction(IsolationLevel isolationLevel = IsolationLevel.Snapshot);
ITransaction Transaction { get; }
IDbConnection Connection { get; }
bool HasTransaction { get; }
} اعضای جدید واسط IUnitOfWork کاملا مشخص هستند.
پیاده سازی واسط ITransaction، توسط یک Nested Type در دل کلاس DbContextBase انجام می‌گیرد.
public abstract class DbContextBase : DbContext
{
...
#region Fields
private ITransaction _currenTransaction;
#endregion
#region NestedTypes
private class DbContextTransactionAdapter : ITransaction
{
private DbContextTransaction _transaction;
public DbContextTransactionAdapter(DbContextTransaction transaction)
{
Guard.NotNull(transaction, nameof(transaction));
_transaction = transaction;
}
public void Commit()
{
_transaction?.Commit();
}
public void Rollback()
{
if (_transaction?.UnderlyingTransaction.Connection != null)
_transaction.Rollback();
}
public void Dispose()
{
_transaction?.Dispose();
_transaction = null;
}
}
#endregion
#region Public Methods
...
public ITransaction BeginTransaction(IsolationLevel isolationLevel = IsolationLevel.ReadCommitted)
{
if (_currenTransaction != null) return _currenTransaction;
return _currenTransaction = new DbContextTransactionAdapter(Database.BeginTransaction(isolationLevel));
}
#endregion
#region Properties
...
public ITransaction Transaction => _currenTransaction;
public IDbConnection Connection => Database.Connection;
public bool HasTransaction => _currenTransaction != null;
#endregion
}
public class ApplicationDbContext : DbContextBase, IUnitOfWork, ITransientDependency
{
} کلاس DbContextTransactionAdapter همانطور که از نام آن مشخص می‌باشد، پیاده سازی از الگوی Adapter برای وفق دادن DbContextTransaction با واسط ITransaction، می‌باشد. متد BeginTransaction در صورتی که تراکنشی برای وهله جاری DbContext ایجاد نشده باشد، تراکنشی را ایجاد کرده و فیلد currentTransaction_ را نیز مقدار دهی می‌کند.
TransactionalAttribute
[AttributeUsage(AttributeTargets.Method | AttributeTargets.Class)]
public sealed class TransactionalAttribute : Attribute
{
public IsolationLevel IsolationLevel { get; set; } = IsolationLevel.ReadCommitted;
public TimeSpan? Timeout { get; set; }
} TransactionInterceptor
public class TransactionInterceptor : ISyncInterceptionBehavior
{
private readonly IUnitOfWork _unitOfWork;
public TransactionInterceptor(IUnitOfWork unitOfWork)
{
_unitOfWork = unitOfWork;
}
public IMethodInvocationResult Intercept(ISyncMethodInvocation methodInvocation)
{
var transactionAttribute = GetTransactionaAttributeOrNull(methodInvocation.InstanceMethodInfo);
if (transactionAttribute == null || _unitOfWork.HasTransaction) return methodInvocation.InvokeNext();
using (var transaction = _unitOfWork.BeginTransaction(transactionAttribute.IsolationLevel))
{
var result = methodInvocation.InvokeNext();
if (result.Successful)
transaction.Commit();
else
{
transaction.Rollback();
}
return result;
}
}
private static TransactionalAttribute GetTransactionaAttributeOrNull(MemberInfo methodInfo)
{
var transactionalAttribute =
ReflectionHelper.GetAttributesOfMemberAndDeclaringType<TransactionalAttribute>(
methodInfo
).FirstOrDefault();
return transactionalAttribute;
}
} واسط ISyncInterceptionBehavior، مربوط می‌شود به کتابخانه جانبی دیگری که برای AOP توسط تیم StructureMap به نام StructureMap.DynamicInterception ارائه شده‌است. در متد Intercept، ابتدا چک می‌شود که که آیا این متد با TransactionAttribute تزئین شده و طی درخواست جاری برای Context جاری تراکنشی ایجاد نشده باشد؛ سپس تراکنش جدیدی ایجاد شده و بدنه اصلی متد اجرا می‌شود و نهایتا در صورت موفقیت آمیز بودن عملیات، تراکنش مورد نظر Commit می‌شود.
در آخر لازم است این Interceptor در تنظیمات اولیه StructureMap به شکل زیر معرفی شود:
Policies.Interceptors(new DynamicProxyInterceptorPolicy(
type => typeof(IApplicationService).IsAssignableFrom(type), typeof(AuthorizationInterceptor), typeof(TransactionInterceptor), typeof(ValidationInterceptor)));
نکته: فرض کنید در بدنه اکشن متد یک کنترلر ASP.NET MVC یا ASP.NET Core، دو متد تراکنشی فراخوانی شود؛ در این صورت شاید لازم باشد که این دو متد طی یک تراکنش واحد به جای تراکنش‌های مجزا، اجرا شوند؛ بنابراین نیاز است از الگوی Transaction Per Request استفاده شود. برای این کار می‌توان یک ActionFilterAttribute سفارشی ایجاد کرد که ایجاد کننده تراکنش باشد و متدهای داخلی که هر کدام جدا تراکنشی بودند، نیز از تراکنش ایجاد شده استفاده کنند.