⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:00:34) Blazor Architecture Overview
⌨️ (0:11:59) Blazor Architecture In Depth
⌨️ (0:24:00) Blazor Hosting Models
⌨️ (0:32:23) Project Structure
⌨️ (0:48:31) Data Binding
⌨️ (1:12:21) Components Basics
⌨️ (1:33:33) Communication Between Components Overview
⌨️ (1:37:59) Component Parameters
⌨️ (1:45:03) Route Parameters
⌨️ (1:57:05) Cascading Parameters
⌨️ (2:14:58) EventCallBack
⌨️ (2:27:16) Referencing Child Components
⌨️ (2:40:06) Templated Components - RenderFragment
⌨️ (2:51:31) Templated Components - Generic Typed Item List
⌨️ (3:07:01) Templated Components - Generic Typed RenderFragment
⌨️ (3:27:27) Templated Components - Generic Typed RenderFragment as a Form
⌨️ (3:37:30) When is Rendering Triggered
⌨️ (3:59:45) Lifecycle Events Sequence
⌨️ (4:11:39) Avoiding Data Initialization Pitfall
⌨️ (4:16:15) Forms and Validations
⌨️ (4:22:00) Dependency Injection
⌨️ (4:49:34) State Management with Flux in C#
⌨️ (5:34:37) Authentication
⌨️ (6:04:18) Creating a reusable DataGrid Component - Columns Configuration
⌨️ (6:36:27) Creating a reusable DataGrid Component - Paging
⌨️ (7:16:49) Creating a reusable DataGrid Component - Sorting
⌨️ (7:42:51) Thank you and My Contact Info
4.Visual Studio 2017 15.8 منتشر شد
These are the customer-reported issues addressed in 15.8.4:
- Constexpr function with explicit (void) parameter crashes MSVC 15.8.0 release.
- TypeScriptLspCodeActionProvider encountered an error and has been disabled.
- The 'Shared Web Components' package did not load correctly.
- Editing CSS with Browser Link enabled can crash Visual Studio.
- Service Fabric Deployment fails in 15.8.0.
- Incorrect error for constexpr pointer to members with VS2017 15.8.
- Constexpr doesn't support __declspec(dllimport) in VS2017 15.8.
- C++ VS 2017 Update 8 difference in member function pointer between C++14 and C++17 modes leads to crashes.
- TestExplorer locking up UI in latest build.
- [WebKit] "Already defined symbol" for static template member definition (regression).
- VS 15.8.0 Internal compiler error.
- Internal compiler error in constexpr function.
- Test Explorer Window remains blank with Express.
- Visual Studio 2017 fails to open on FIPS-enabled machine..
- VS2017 15.8 Internal Compiler Error 'msc1.cpp', line 1518 when evaluating simple constexpr function.
- Fatal error C1001 after update to VS 15.8.0.
- Migrating to VS2017 15.8: Internal compiler error when using constexpr functions as template parameters.
- Internal compiler error when compiling a template function with a constexpr in VC++ 15.8.0.
- Code generated by VC 15.8.1 compiler lead to crash.
مقدمه ای بر برنامه نویسی همزمان
What is concurrent programing? Simply described, it’s when you are doing more than one thing at the same time. Not to be confused with parallelism, concurrency is when multiple sequences of operations are run in overlapping periods of time. In the realm of programming, concurrency is a pretty complex subject. Dealing with constructs such as threads and locks and avoiding issues like race conditions and deadlocks can be quite cumbersome, making concurrent programs difficult to write. Through concurrency, programs can be designed as independent processes working together in a specific composition. Such a structure may or may not be made parallel; however, achieving such a structure in your program offers numerous advantages.
روش جاری شباهت زیادی به استفاده از Context در React دارد:
Context provides a way to pass data through the component tree without having to pass props down manually at every level
// parent component providing 'foo' var Provider = { provide: { foo: 'bar' }, // ... }
// child component injecting 'foo' var Child = { inject: ['foo'], created () { console.log(this.foo) // => "bar" } // ... }
Using an injected value as the default for a prop //دریافت میکنیم props در قسمت child را در کامپوننت foo مقدار const Child = { inject: ['foo'], props: { bar: { default () { return this.foo } } } } Using an injected value as data entry //دریافت میکنیم data در قسمت child را در کامپوننت foo مقدار const Child = { inject: ['foo'], data () { return { bar: this.foo } } }
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Dependency injection</title> </head> <body> <div id="app"> <button @click="counter++">Increment counter</button> <h2>Parent</h2> <p>{{counter}}</p> <div> <h3>Child</h3> <child></child> </div> </div> <script> const Child = { inject: ['counter_in_child'], template: `<div>Counter Child is:{{ counter_in_child }}</div>` }; new Vue ({ el: "#app", components: { Child }, provide() { return { counter_in_child: this.counter }; }, data() { return { counter: 0 }; } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Dependency injection</title> </head> <body> <div id="app"> <button @click="counter++">Increment counter</button> <h2>Parent</h2> <p>{{counter}}</p> <div> <h3>Child</h3> <child></child> </div> </div> <script> const Child = { inject: ['counter_in_child'], template: `<div>Counter Child is:{{ counter_in_child.counter }}</div>` }; new Vue ({ el: "#app", components: { Child }, provide() { const counter_in_child={}; Object.defineProperty(counter_in_child,'counter',{ enumerable:true, get:()=>this.counter }) return { counter_in_child }; }, data() { return { counter: 0 }; } }); </script> </body> </html>
provide
and inject
are primarily provided for advanced plugin / component library use cases. It is NOT recommended to use them in generic application code
- Custom Elements
- Shadow DOM
- HTML Templates
Custom Elements
//app.component.js class AppComponent extends HTMLElement { static is = 'app-root' connectedCallback(){ this.innerHTML=`<h1>Hello World!</h1>` } } customElements.define(AppComponent.is, AppComponent)
//index.html <app-root></app-root>
//confirm-link.component.js class ConfirmLinkComponent extends HTMLAnchorElement { static is = "confim-link"; connectedCallback() { this.addEventListener("click", e => { if (!confirm("Are you sure?")) { e.preventDefault(); } }); } } customElements.define(ConfirmLinkComponent.is, ConfirmLinkComponent, { extends: "a" });
<a href="http://google.com" is='confirm-link'> google.com </a>
Shadow DOM
var div = document.createElement('div'); var shadowRoot = div.attachShadow({mode: 'open'}); //or mode: 'closed' shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>';
مفهوم دیگری وجود دارد تحت عنوان Shadow Boundary که تعیین کنندهی مرز بین Light DOM و Shadow DOM و همان لایهی مهیا کنندهی کپسولهسازی Styling و Markup میباشد. در مطالب آتی خواهیم دید که به چه شکلی رخدادهای سفارشی ما قابلیت عبور از این لایه را خواهند داشت.
HTML Templates
- استفاده از DOM و آگاه بودن مرورگر از وجود آن، عملیات clone را ساده خواهد کرد.
- محتوای داخل آن رندر نخواهد شد.
- اگرچه محتوای آن مخفی میباشد، با این حال درخواستهای مرتبط با تصاویر یا اسکریپتها انجام خواهد شد.
<div id="template" hidden> <img src="logo.png"> <div class="comment"></div> </div>
<script id="template" type="text/x-template"> <img src="logo.png"> <div class="comment"></div> </script> <script id="template" type="text/x-kendo-template"> <ul> # for (var i = 0; i < data.length; i++) { # <li>#= data[i] #</li> # } # </ul> </script>
- از آنجا که تگ script به صورت پیشفرض دارای استایل display:none میباشد، محتوای داخل آن رندر نخواهد شد.
- به دلیل عدم مقداردهی ویژگی type آن با "text/javascript"، مرورگر محتوای آن را به عنوان کد جاوااسکریپت parse نخواهد کرد.
- استفاده از خصوصیت innerHTML مشکل امنیتی XSS را بدنبال خواهد داشت .
<template id="template"> <img src="logo.png"> <div class="comment"></div> </template>
var template = document.querySelector("template"); var clonedNode = template.content.cloneNode(true); //deep:true document.body.appendChild(clonedNode);
دوره و کتاب رایگان Angular 5
2015 is lining up to be the year of React. Lately, it has garnered a lot of attention, for front-end, mobile and server side JavaScript development.
A set of files that comprise a standalone app, a library, or a set of end-to-end (e2e) tests.
ng --version
ng new angular-apps --create-application=false
angular-apps/README.md angular-apps/angular.json angular-apps/package.json angular-apps/tsconfig.json angular-apps/tslint.json angular-apps/.editorconfig angular-apps/.gitignore
cd angular-apps
ng generate application admin
ng generate library ngx-qrcode
ng generate service auth --project=admin
projects/admin/src/app/auth.service.spec.ts projects/admin/src/app/auth.service.ts
ng serve admin
ng new
What name would you like to use for the new workspace and initial project?
کامپوننتی را با نام SynchronousInitComponent با کد زیر درنظر میگیریم. همانطور که از اسم آن مشخص است این کامپوننت به صورت متقارن یا همزمان پیادهسازی شده است:
<p>Sync rendered by thread @IdOfRenderingThread</p> @code { int IdOfRenderingThread; protected override void OnInitialized() { base.OnInitialized(); IdOfRenderingThread = System.Threading.Thread.CurrentThread.ManagedThreadId; } }
حال در کامپوننت دیگری برای مثال کامپوننت index، کامپوننت همزمان فوق را به شکل زیر فراخوانی میکنیم:
@page "/" <h1>Components with synchronous OnInitialized()</h1> @for (int i = 0; i < 5; i++) { <SynchronousInitComponent /> }
Components with synchronous OnInitialized() Sync rendered by thread 4 Sync rendered by thread 4 Sync rendered by thread 4 Sync rendered by thread 4 Sync rendered by thread 4
حال همین آزمایش را با متدهای نامتقارن یا ناهمزمان انجام میدهیم. کامپوننت AsynchronousInitComponent را با کد زیر درنظر بگیرید:
<p>Async rendered by thread @IdOfRenderingThread</p> @code { int IdOfRenderingThread; protected override async Task OnInitializedAsync() { // Runs synchronously as there is no code in base.OnInitialized(), // so the same thread is used await base.OnInitializedAsync().ConfigureAwait(false); IdOfRenderingThread = System.Threading.Thread.CurrentThread.ManagedThreadId; // Awaiting will schedule a job for later, and we will be assigned // whichever worker thread is next available await Task.Delay(1000).ConfigureAwait(false); IdOfRenderingThread = System.Threading.Thread.CurrentThread.ManagedThreadId; } }
@page "/async-init" <h1>Components with asynchronous OnInitializedAsync()</h1> @for (int i = 0; i < 5; i++) { <AsynchronousInitComponent/> }
Components with asynchronous OnInitializedAsync() Async rendered by thread 4 Async rendered by thread 4 Async rendered by thread 4 Async rendered by thread 4 Async rendered by thread 4
Components with asynchronous OnInitializedAsync() Async rendered by thread 7 Async rendered by thread 18 Async rendered by thread 10 Async rendered by thread 13 Async rendered by thread 11