npm install -g @angular/cli

ng new HowToKeepAngularSizeSmall

ng serve --open --prod

"@agm/core": "^1.0.0-beta.5",
"@angular/flex-layout": "^7.0.0-beta.23",
"@angular/material": "^7.3.3",
"@angular/platform-browser": "~7.2.0",
"@asymmetrik/ngx-leaflet": "^5.0.1",
"@ngx-loading-bar/router": "1.3.1",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@progress/kendo-angular-buttons": "^4.3.3",
"@progress/kendo-angular-dateinputs": "^3.6.0",
"@progress/kendo-angular-dialog": "^3.10.1",
"@progress/kendo-angular-dropdowns": "^3.5.1",
"@progress/kendo-angular-excel-export": "^2.3.0",
"@progress/kendo-angular-grid": "^3.13.0",
"@progress/kendo-angular-inputs": "^4.2.0",
"@progress/kendo-angular-intl": "^1.7.0",
"@progress/kendo-angular-l10n": "^1.3.0",
"@progress/kendo-angular-layout": "^3.2.0",
"@progress/kendo-data-query": "^1.5.0",
"@progress/kendo-drawing": "^1.5.8",
"@progress/kendo-theme-default": "^3.3.1",
"@swimlane/ngx-datatable": "^14.0.0",
"angular-calendar": "0.23.7",
"angular-tree-component": "7.0.1",
"bootstrap": "^3.4.0",
"chart.js": "2.7.2",
"d3": "4.13.0",
"dragula": "3.7.2",
"hammerjs": "2.0.8",
"intl": "1.2.5",
"leaflet": "1.3.1",
"moment": "2.21.0",
"ng2-charts": "1.6.0",
"ng2-dragula": "1.5.0",
"ng2-file-upload": "1.3.0",
"ng2-validation": "4.2.0",
"ngx-perfect-scrollbar": "5.3.5",
"ngx-quill": "2.2.0",
"screenfull": "3.3.2",
"font-awesome": "^4.7.0",
"jalali-moment": "^3.3.1",
"jquery": "^3.3.1",
"ng-snotify": "^4.3.1",
"normalize.css": "^8.0.1",

@import "~bootstrap/dist/css/bootstrap.css";
@import "~@progress/kendo-theme-default/scss/all";
@import '@angular/material/prebuilt-themes/pink-bluegrey.css';
@import '~perfect-scrollbar/css/perfect-scrollbar.css';
@import "~ng-snotify/styles/material";

"scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/hammerjs/hammer.min.js"
            ],

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


// Import Material
import {
  MatFormFieldModule, MatInputModule,
  MatButtonModule, MatButtonToggleModule,
  MatDialogModule, MatIconModule,
  MatSelectModule, MatToolbarModule,
  MatDatepickerModule,
  DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatTableModule, MatCheckboxModule, MatRadioModule, MatCardModule, fadeInContent,
  MatListModule, MatProgressBarModule, MatTabsModule,
  MatSidenavModule,
  MatSlideToggleModule,
  MatMenuModule
} from '@angular/material';



// Import kendo angular ui
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { DialogsModule } from '@progress/kendo-angular-dialog';
import { RTL } from '@progress/kendo-angular-l10n';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { WindowService, WindowRef, WindowCloseResult, DialogService, DialogRef, DialogCloseResult } from '@progress/kendo-angular-dialog';

import { SnotifyModule, SnotifyService, SnotifyPosition, SnotifyToastConfig, ToastDefaults } from 'ng-snotify';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,

    // material 
    MatSidenavModule,
    MatSlideToggleModule,
    MatInputModule,
    MatFormFieldModule,
    MatButtonModule, MatButtonToggleModule,
    MatDialogModule, MatIconModule,
    MatSelectModule, MatToolbarModule,
    MatDatepickerModule,
    MatCheckboxModule,
    MatRadioModule,
    MatCardModule,
    MatMenuModule,
    MatListModule,
    MatProgressBarModule,
    MatTabsModule,


    // kendo-angular
    ButtonsModule,
    GridModule,
    ExcelModule,
    DropDownsModule,
    InputsModule,
    DateInputsModule,
    DialogsModule,
    LayoutModule,

    SnotifyModule,


  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

public ActionResult Style()
{
            Response.ContentType = "text/css";
            var model = new Style
            {
                Color = "red",
                Background = "blue"
            };
            return View(model);
}

@model ExternalJavaScript.Models.Style
@{
    Layout = null;
}
body {
    color : @Model.Color;
    background-color : @Model.Background;
}

<link rel="stylesheet" href="@Url.Action("Style","Home")" />

public class ContentType : ActionFilterAttribute
    {
        private string _contentType;
        public ContentType(string ct)
        {
            this._contentType = ct;
        }

        public override void OnActionExecuted(ActionExecutedContext context) { /* nada */ }
        public override void OnActionExecuting(ActionExecutingContext context)
        {
            context.HttpContext.Response.ContentType = this._contentType;
        }
    }

[ContentType("text/css")]
public ActionResult Style()
 {
     var model = new Style
      {
                Color = "red",
                Background = "blue"
      };
     return View(model);
}

public class JavaScriptSettingsController : Controller
{
        public ActionResult Index()
        {
            return PartialView();
        }
}

$(function(){
    $.post('@Url.Action("GetData", "Home")', function (data) {
        $('.notificationList').html(data);
            if ($(data).filter("li").length != 0) {
                $('#notificationCounter').html($(data).filter("li").length);
            }
    });
});

<script src="/JavaScriptSettings"></script>

@inject IJSRuntime JSRuntime  

@code {
  string currentInputValue;

  public async Task Save()
  {
    await JSRuntime.InvokeVoidAsync("localStorage.setItem", "name", currentInputValue);
  }

  public async Task Read()
  {
    currentInputValue = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "name");
  }

  public async Task Delete()
  {
    await JSRuntime.InvokeAsync<string>("localStorage.removeItem", "name");
  }
}

@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject ProtectedLocalStorage BrowserStorage


@code {
  string currentInputValue;

  public async Task Save()
  {
    await BrowserStorage.SetAsync("name", currentInputValue);
  }

  public async Task Read()
  {
    var result = await BrowserStorage.GetAsync<string>("name");
    currentInputValue = result.Success ? result.Value : "";
  }

  public async Task Delete()
  {
    await BrowserStorage.DeleteAsync("name");
  }
}

@inject ProtectedSessionStorage BrowserStorage

const ProtectedRoute = ({ path, component: Component, render, ...rest }) => {

  const history = useHistory();
  const user = auth.getCurrentUser();

  useEffect(() => {

    const beforePath = history.location.pathname;
    if (user && beforePath.toLowerCase() !== '/activation') {
      if (user.status <= 0) {
        history.push({
          pathname: "/Activation"
        });
      }
    }
    // componentWillUnmount
    return () => {

    };

  });

var PostApp = angular.module('PostApp', []).config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
          when('/list', {
              templateUrl: '/Administrator/Post/Index',
              controller: 'PostController'
          });
  }]);

public virtual ActionResult Index(int? id)
{
      var model = new PostViewModels
      {
          //......
      };
      return PartialView(viewName: "_Index", model: model);
}

@using ViewModels.Administrator.Post

//استفاده از امکانات Razor
@(Html.EnumDropDownListMenu<PostPermition, AppViewPostResource>("permition-", "{{item.id}}"))

//استفاده از امکانات Angular
<div  ng-controller="PostController">
     <ul>
           <li ng-repeat="item in ListOfItems">
                  {{item.Title}}
            </li>
    </ul>
</div>

• Gateway، درگاه بانکی مورد نظر جهت پرداخت است.
• TrackingNumber یک کد رهگیری یکتا جهت شناسایی صورت حساب است. (در مقاله‌ی آموزش پیشرفته ، نحوه ایجاد اتوماتیک این کد را یاد خواهید گرفت)
  
• Amount مبلغ مورد نظر (به ریال) جهت پرداخت است.
• Verify URL یک آدرس در وب سایت شما است. زمانیکه کاربر، پرداخت را در درگاه بانکی انجام داد، به این آدرس جهت تایید پرداخت هدایت خواهد شد.
  

using Parbad;

protected void BtnPay_Click(object sender, EventArgs e)
{
    // استفاده به صورت استاتیک و بدون تزریق وابستگی

    var result = StaticOnlinePayment.Instance.Request(Gateways.Mellat, 123, 25000, "http://www.mywebsite.com/foo/bar/");

    if (result.IsSucceed)
    {
        // کاربر را به سمت درگاه بانکی هدایت میکند
        // همچنین بهتر است کد رهگیری که در شئ نتیجه است را، برای فاکتور مورد نظر در پایگاه داده خودتان ذخیره کنید
        result.GatewayTransporter.Transport();
    }
    else
    {
        // درخواست پرداخت موفقیت آمیز نبود
    }
}

using Parbad.Mvc5;

private readonly IOnlinePayment _onlinePayment;

// تزریق وابستگی به کنترلر
public PaymentController(IOnlinePayment onlinePayment)
{
    _onlinePayment = onlinePayment;
}

public async Task<ActionResult> Pay()
{
    var result = await _onlinePayment.RequestAsync(Gateways.Mellat, 123, 25000, "http://www.mywebsite.com/foo/bar/");

    if (result.IsSucceed)
    {
        // کاربر را به سمت درگاه بانکی هدایت میکند
        // همچنین بهتر است کد رهگیری که در شئ نتیجه است را، برای فاکتور مورد نظر در پایگاه داده خودتان ذخیره کنید
        return result.GatewayTransporter.TransportToGateway();
    }
    else
    {
        // درخواست پرداخت موفقیت آمیز نبود
    }
}

using Parbad.AspNetCore;

private readonly IOnlinePayment _onlinePayment;

public PaymentController(IOnlinePayment onlinePayment)
{
    _onlinePayment = onlinePayment;
}

public async Task<IActionResult> Pay()
{
    var result = await _onlinePayment.RequestAsync(Gateways.Mellat, 123, 25000, "http://www.mywebsite.com/foo/bar/");

    if (result.IsSucceed)
    {
        // کاربر را به درگاه بانکی هدایت می‌کند
        // همچنین بهتر است کد رهگیری که در شئ نتیجه است را، برای فاکتور مورد نظر در پایگاه داده خودتان ذخیره کنید
        return result.GatewayTransporter.TransportToGateway();
    }
    else
    {
        // do something else
    }
}

public async Task<IActionResult> Verify()
{
    var result = await _onlinePayment.VerifyAsync(invoice =>
    {
        // در این مرحله هنوز درخواست واریز وجه از وب سایت شما به بانک ارسال نشده است
        // بنابراین شما می‌توانید اطلاعات صورتحساب را با پایگاه داده خود چک کنید
        // و در صورت لزوم تراکنش را لغو کنید

        if (!Is_There_Still_Enough_SmartPhone_In_Shop(invoice.TrackingNumber))
        {
            // لغو عملیات پرداخت
            invoice.CancelPayment("We have no more smart phones to sell.");
        }
    });

    if(result.IsSucceed)
    {
        // پرداخت موفقیت آمیز بوده است. کد تراکنش بانکی را در پایگاه داده خود ذخیره کنید
        var transactionCode = result.TransactionCode;
    }
    else
    {
        // پرداخت به دلایلی موفقیت آمیز نبوده.
        // در صورت تمایل می‌توانید پراپرتی پیام در شئ نتیجه را مشاهده کنید و یا به کاربر نمایش دهید
    }
}

// کد رهگیری صورت حساب مورد نظر
var trackingNumber = 123;

var result = await _onlinePayment.RefundCompletelyAsync(trackingNumber);