{
  "dependencies": {
    "CoreCompat.System.Drawing": "1.0.0-beta006",
    "StructureMap.Microsoft.DependencyInjection": "1.2.0",
    "CacheManager.Core": "0.9.1",
    "CacheManager.Microsoft.Extensions.Caching.Memory": "0.9.1",
    "CacheManager.Serialization.Json": "0.9.1",
    "Newtonsoft.Json": "9.0.2-beta1",
    "Microsoft.AspNetCore.SpaServices": "1.0.0-beta-000019",
    "AutoMapper": "5.1.1",
    "EFSecondLevelCache.Core": "1.0.1",
    "Microsoft.AspNetCore.Diagnostics.Elm": "0.2.0",
    "Microsoft.AspNetCore.ResponseCompression": "1.0.0",
    "Microsoft.AspNetCore.Mvc": "1.1.0",
    "Microsoft.AspNetCore.Mvc.Localization": "1.1.0",
    "Microsoft.AspNetCore.Server.IISIntegration": "1.1.0",
    "Microsoft.AspNetCore.Session": "1.1.0",
    "Microsoft.AspNetCore.Hosting": "1.1.0",
    "Microsoft.AspNetCore.Hosting.Server.Abstractions": "1.1.0",
    "Microsoft.AspNetCore.Server.Kestrel": "1.1.0",
    "Microsoft.AspNetCore.StaticFiles": "1.1.0",
    "Microsoft.Extensions.Configuration.FileExtensions": "1.1.0",
    "Microsoft.Extensions.Configuration.Json": "1.1.0",
    "Microsoft.Extensions.FileProviders.Embedded": "1.1.0",
    "Microsoft.Extensions.Logging.Console": "1.1.0",
    "Microsoft.Extensions.Logging.Debug": "1.1.0",
    "Microsoft.Net.Http.Headers": "1.1.0",
    "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.1.0",
    "Microsoft.EntityFrameworkCore.Tools.DotNet": "1.1.0-preview4-final",
    "Microsoft.AspNetCore.Mvc.Razor.ViewCompilation.Design": {
      "version": "1.1.0-preview4-final",
      "type": "build"
    },
    "System.Globalization": "4.3.0",
    "System.IO": "4.3.0",
    "System.Linq": "4.3.0",
    "System.Reflection": "4.3.0",
    "System.Runtime": "4.3.0",
    "System.Runtime.Extensions": "4.3.0",
    "System.Runtime.WindowsRuntime": "4.3.0",
    "System.Text.RegularExpressions": "4.3.0",
    "System.Threading.Tasks": "4.3.0",
    "Microsoft.VisualStudio.Web.CodeGenerators.Mvc": {
      "version": "1.1.0-preview4-final",
      "type": "build"
    },
    "Elmah.Io.AspNetCore": "1.0.1-pre-24",
    "Elmah.Io.Extensions.Logging": "1.0.17-pre",
    "Microsoft.VisualStudio.Web.CodeGeneration.Tools": {
      "version": "1.1.0-preview4-final",
      "type": "build"
    }
  },
  "tools": {
    "Microsoft.EntityFrameworkCore.Tools.DotNet": {
      "version": "1.1.0-preview4-final",
      "imports": [
        "portable-net45+win8"
      ]
    },
    "Microsoft.AspNetCore.Mvc.Razor.ViewCompilation.Tools": {
      "version": "1.1.0-preview4-final"
    },
    "Microsoft.Extensions.SecretManager.Tools": "1.1.0-preview4-final",
    "Microsoft.VisualStudio.Web.CodeGeneration.Tools": {
      "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
    //"embed": "Views/**/*.cshtml,Areas/**/Views/**/*.cshtml",
    //"define": [ "DEBUG" ]
  },
  "runtimeOptions": {
    "configProperties": {
      "System.GC.Server": true
    }
  },
  "publishOptions": {
    "include": [
      "wwwroot",
      //"Views",
      //"Areas/**/Views",
      "appsettings.json",
      "web.config"
    ]
  },
  "configurations": {
    "Release": {
      "buildOptions": {
        "optimize": true,
        "platform": "anycpu"
      }
    }
  },
  "scripts": {
    "precompile": [
      //"dotnet bundle"
    ],
    "prepublish": [
      //"bower install"
    ],
    "postpublish": [
      "dotnet razor-precompile --configuration %publish:Configuration% --framework %publish:TargetFramework% --output-path %publish:OutputPath% %publish:ProjectPath%",
      "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%"
    ]
  }
}

"styles": [
  "styles.css",
  "my-custom-theme.scss"
],

node-sass src/my-custom-theme.scss dist/my-custom-theme.css

@import '~@angular/material/theming';

@include mat-core();

@import '~@angular/material/theming';
@include mat-core();

$my-app-primary: mat-palette($mat-indigo);
$my-app-accent:  mat-palette($mat-pink, 500, A100, A400);
$my-app-warn:    mat-palette($mat-deep-orange);

@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700)

در قدم آخر با استفاده از تابع mat-light-theme یا mat-dark-theme، رنگهای تعریف شده در مرحله قبل را ترکیب کرده و نتیجه را به عنوان ورودی به mixin به نام angular-material-theme  ارسال و بارگذاری می‌کنیم. 

تابع mat-light-theme و mat-dark-theme سه پارامتر را دریافت می‌کند. پارارمتر اول پالت رنگ ایجاد شده توسط تابع mat-palette برای گروه Primary ، پارامتر دوم پالت رنگ ایجاد شده برای گروه Accent و پارامتر سوم پالت رنگ ایجاد شده برای گروه Warn را دریافت می‌کند. دو پارامتر اول اجباری و پارامتر سوم اختیاری با مقدار پیش فرض mat-palette($mat-red) می‌باشد. 

شکل کلی فایل Sass در نهایت به شکل زیر خواهد بود. 

@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($mat-teal);
$my-app-accent:  mat-palette($mat-amber, 500, A100, A400);
$my-app-warn:    mat-palette($mat-deep-orange);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

@include angular-material-theme($my-app-theme);

برای استفاده از پالت رنگ‌های ایجاد شده، از خصوصیت color در المنت‌های انگولار متریال استفاده می‌کنیم. برای نمونه بعد از تغییر فایل Sass به شکل بالا و حذف لینک تم از پیش ساخته شده که در پست قبلی به Style.cs اضافه کرده بودیم، می‌توانیم کار خود را به صورت زیر آزمایش کنیم. در فایل app.component.html در تگ main کدهای زیر را اضافه کنید. 

<md-card>
  <button md-raised-button color="primary">
    Primary
  </button>
  <button md-raised-button color="accent">
    Accent
  </button>
  <button md-raised-button color="warn">
    Warning
  </button>
</md-card>

خروجی زیر را مشاهده خواهید کرد. 

همچنین می‌توانید به جای استفاده از تابع mat-light-theme از تابع mat-dark-theme استفاده کنید. دراین صورت خروجی زیر را خواهید دید. 

در بخش بعدی نحوه ساخت چند تم دیگر را در کنار تم اصلی، ساخت تم به ازای هر کامپوننت و نحوه تعویض تم از طریق کد را دنبال خواهیم کرد. 

کدهای این قسمت را از اینجا دریافت کنید:  ساخت-تم-سفارشی-در-انگولار-متریال-۲---بخش-اول.rar 

Install-Package libphonenumber-csharp

 PM> Install-Package Microsoft.AspNet.SignalR.JS

 Signalr.exe ghp http://localhost/

 $.connection

 $.connection.chatHub

<script src="http://localhost:1072/signalr/hubs" type="text/javascript"></script>

 - webSockets
- forverFrame
- serverSentEvents
- longPolling

 $.connection.hub.url = 'http://localhost:1072/signalr'; //چون در یک پروژه دیگر قرار داریم

using System;
using System.Web;
using System.Web.Routing;
using Microsoft.AspNet.SignalR;

namespace SignalR02
{
    public class Global : HttpApplication
    {
        protected void Application_Start(object sender, EventArgs e)
        {
            // Register the default hubs route: ~/signalr
            RouteTable.Routes.MapHubs(new HubConfiguration
            {
                EnableCrossDomain = true
            });
        }
    }
}

 SignalR: Auto detected cross domain url. jquery.signalR-1.0.1.min.js:10
SignalR: Negotiating with 'http://localhost:1072/signalr/negotiate'. jquery.signalR-1.0.1.min.js:10
SignalR: SignalR: Initializing long polling connection with server. jquery.signalR-1.0.1.min.js:10
SignalR: Attempting to connect to 'http://localhost:1072/signalr/connect?transport=longPolling&connectionToken…NRh72omzsPkKqhKw2&connectionData=%5B%7B%22name%22%3A%22chat%22%7D%5D&tid=3' using longPolling. jquery.signalR-1.0.1.min.js:10
SignalR: Longpolling connected jquery.signalR-1.0.1.min.js:10

<!DOCTYPE>
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.signalR-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <input id="txtMsg" type="text" /><input id="send" type="button" value="send msg" />
        <ul id="messages">
        </ul>
    </div>
    <script type="text/javascript">
        $(function () {                        
            $.connection.hub.logging = true; //اطلاعات بیشتری را در جاوا اسکریپت کنسول مرورگر لاگ می‌کند

            var connection = $.hubConnection();
            connection.url = 'http://localhost:1072/signalr'; //چون در یک پروژه دیگر قرار داریم
            var proxy = connection.createHubProxy('chat');

            proxy.on('hello', function (message) {
                //متدی که در اینجا تعریف شده دقیقا مطابق نام متد پویایی است که در هاب تعریف شده است
                //به این ترتیب سرور می‌تواند کلاینت را فراخوانی کند
                $("#messages").append("<li>" + message + "</li>");
            });

            $("#send").click(function () {
                // Hub's `SendMessage` should be camel case here
                proxy.invoke('sendMessage', $("#txtMsg").val());
            });

            connection.start();
        });
    </script>
</body>
</html>

 PM> Install-Package Microsoft.AspNet.SignalR.Client

using System;
using Microsoft.AspNet.SignalR.Client.Hubs;

namespace SignalR02.WinClient
{
    class Program
    {
        static void Main(string[] args)
        {
            var hubConnection = new HubConnection(url: "http://localhost:1072/signalr");
            var chat = hubConnection.CreateHubProxy(hubName: "chat");

            chat.On<string>("hello", msg => {
                Console.WriteLine(msg);
            });

            hubConnection.Start().Wait();

            chat.Invoke<string>("sendMessage", "Hello!");

            Console.WriteLine("Press a key to terminate the client...");
            Console.Read();
        }
    }
}

یک برنامه‌ی Vue.js را ایجاد کنید و سپس یک پوشه را در فولدر src بنام mixins بسازید. در این پوشه یک فایل را با نام دلخواهی از نوع جاوااسکریپت، ایجاد کنید و محتوای زیر را در آن قرار دهید:

export default  {
    data() {
        return {
            title: 'Mixins are cool',
            copyright: 'All rights reserved. Product of super awesome people'
        };
    },
    created: function () {
        this.greetings();
    },
    methods: {
        greetings() {
            console.log('Howdy my good fellow!');
        }
    }
};

برای استفاده از mixin بشکل زیر عمل میکنیم. در واقع کد زیر شامل تمام موارد تعریف شده در myMixin.js میباشد. 

<script>

import myMixin from './mixins/myMixin'

export default {
  name: 'app',
  //را دریافت میکند mixins آرایه ای از 
  mixins:[myMixin]
}
</script>

<style>

نکته: در صورتیکه بین mixin و کامپوننت، داده‌های همنامی وجود داشته باشد، اولویت با داده یا تابعی است که در خود کامپوننت تعریف شده‌است. مثال زیر را در نظر بگیرید:

export default  {
    data() {
        return {
            blogName: 'google.com'
        };
    },
    methods: {
        print() {
            console.log(this.blogName);
        }
    }
};

و در کامپوننتی که از mixin فوق استفاده میکند:

<script>
import myMixin from "./mixins/myMixin";
import duplicateFuncData from "./mixins/duplicateFuncData";

export default {
  name: "app",
  data() {
    return {
      // و کامپوننت جاری تکراری ست mixin نام این متغیر در
      blogName: "microsoft.com"
    };
  },
  methods: {
    // و کامپوننت جاری تکراری ست ولی عملکرد متفاوت دارد mixin نام این تابع در
    print() {
      alert(this.blogName);
    }
  },
  components: {},
  //را دریافت میکند mixins آرایه ای از
  mixins: [myMixin, duplicateFuncData]
};
</script>

و نتیجه‌ی اجرا:

تعریف mixin بصورت سراسری: وقتی یک mixin را بصورت global تعریف میکنیم، تمام نمونه‌های وهله سازی شده از vue، دارای قابلیت‌های تعریف شده‌ی در mixin می‌باشند. کد main.js را بشکل زیر تغییر میدهیم. اکنون با اجرای برنامه، به ازای هر نمونه‌ای از vue که وهله سازی میشود، تابع زیر اجرا می‌گردد.

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// بصورت سراسری تعریف شده
Vue.mixin({
  created: function () {
    alert('from global mixin')
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

نتیجه‌گیری:

1) استفاده از mixin باعث اجتناب از تکرار کدها و داده‌های تکراری میشود (DRY).

2) از mixin در ساخت پلاگین برای Vue.js استفاده میشود.

// 3. inject some component options
  Vue.mixin({
    created: function () {
      // some logic ...
    }
    ...
  })

3) اگر mixin و کامپوننتی که از mixin استفاده میکند، هر دو توابع  lifecycle را پیاده سازی کرده باشند، اول توابع lifecycle مربوط به mixin اجرا میشود و سپس توابع lifecycle مربوط به کامپوننت.

4) اگر دو کامپوننت، mixin مشترکی را استفاده کنند، داده‌های آنها share نخواهد شد و برای اینکه دو کامپوننتی که از mixin واحدی استفاده میکنند بتوانند از داده‌های یکسانی در mixin استفاده کنند، نیاز به تزریق وابستگی دارند.

5) اگر از ادغام قسمت جاوااسکریپتی و HTML مربوط به کامپوننت‌ها ناراضی هستید، یک راه حل جداسازی، استفاده از mixin به ازای هر کامپوننت است.

6) استفاده از mixin باعث به روزسانی، نگهداری و توسعه‌ی ساده‌تر و همچنین ماژولار بودن برنامه میشود.

کد مثال مقاله‌ی جاری 

نکته: برای اجرای برنامه و دریافت پکیج‌های مورد استفاده در مثال جاری، نیاز است دستور زیر را اجرا کنید:  

npm install