استفاده از Isolate scopes درون دایرکتیوها 
زیرنویس‌های فارسی قسمت پنجم را از اینجا می‌توانید دانلود کنید.
لیست سرفصل‌های قسمت پنجم به شرح زیر است:
01-Introduction to Directives 02-Demo. Creating Your First Directive 03-Demo. Domain Specific Language via Custom Elements 04-Demo. Isolating Directive Scope 05-Demo. Exploring Isolate Scope Bindings 06-Demo. Handling Events with Directives 07-Demo. Observing and Responding to Changes 08-Demo. Using Controllers within Directives 09-Demo. Sharing Directive Controllers via Require 10-Demo. Directive Priority and using Terminal 11-Demo. Using Require with Nested Directives 12-Demo. Understanding Transclusion 13-Demo. Using Compile to Transform the DOM 14-Demo. Making jQuery More Explicit with Directives 15-Summary
در این قسمت به مبحث ایجاد دایرکتیوهای سفارشی پرداخته می‌شود. دایرکتیوها در واقع مهمترین قسمت هر برنامه انگولار هستند. انگولار به صورت توکار شامل تعداد زیادی دایرکتیو می‌باشد. در واقع می‌توانیم بگوئیم دایرکتیو می‌تواند یک سینتکس جدید باشد که دارای یک رفتار مخصوص می‌باشد. برای مثال، static HTML هیچ دیدی نسبت به ایجاد و نمایش یک ویجت انتخابگر تاریخ(Date Picker) ندارد. برای اینکار باید به HTML، این سینتکس جدید را توسط دایرکتیوها آموزش دهیم.
- Communicating with inherited scopes
- Communicating with events
- Communicating with services
In this section we'll create a Blazor application to demonstrate the different lifetimes of the various dependency injection scopes.
آیا باید جاییکه کلاینت تعریف می‌شود 2 نمونه از کلاینت ساخته شود؟
بله.
و اینکه در هر پروژه چگونه باید از این کلاینت‌ها استفاده کرد؟
مفصل در همان سری با ارائه‌ی دو کلاینت مجزای MVC و همچنین Web API برای IDP ارائه شده، بحث شده. در قسمت چهارم آن، بحث scopes معرفی شده. در قسمت پنجم آن، نحوه‌ی دسترسی به این scopes و اینکه چه اطلاعاتی به همراه آن‌ها به کلاینت‌ها منتقل شوند یا خیر. قسمت ششم و هفتم آن، بحث scopes را جامع‌تر معرفی کرده با مثال‌های بیشتری. قسمت هفتم آن کلاینت Web API را هم به همراه تنظیمات خاص آن بررسی کرده و در قسمت هشتم، Authorization Policyها و سیاست‌های دسترسی پیشرفته را بحث کرده.
در نسخه‌های AngularJS 1.x عموماً با کمک کنترلرها و دایرکتیوها، می‌توانیم ویژگی‌های جدیدی را به اپلیکیشن‌هایمان اضافه کنیم؛ از دایرکتیوها برای ایجاد عناصر سفارشی HTML می‌توانستیم (می‌توانیم) استفاده کنیم. مشکل دایرکتیوها این است که برای ایجاد یک عنصر سفارشی ساده باید تنظیمات زیادی را انجام دهیم. در نسخه‌ی AngularJS 1.5 یک API جدید با نام کامپوننت معرفی شده است و این قابلیت، مدل ساده‌ی برنامه‌نویسی در کنترلرها و همچنین قدرت دایرکتیوها را در اختیارمان قرار خواهد داد. سینتکس این API خیلی شبیه به استفاده از کامپوننت‌ها در Angular 2.0 است. این یک مزیت مهم محسوب می‌شود؛ زیرا امکان مهاجرت از نسخه‌ی 1.5 به نسخه‌ی 2 را خیلی ساده خواهد کرد.
نحوه‌ی تعریف یک کامپوننت در AngularJS 1.5
همانند کنترلر و دایرکتیو، برای تعریف یک کامپوننت نیز باید از module API استفاده کنیم:
بنابراین برای ایجاد یک کامپوننت می‌توانیم به اینصورت عمل کنیم:
var app = angular.module("dntModule", []);
app.component("pmApp", {
template: `Hello this is a simple component`
}); همانطور که مشاهده می‌کنید تابع component دو پارامتر را از ورودی دریافت خواهد کرد؛ نام کامپوننت و یک شیء برای تعیین تنظیمات کامپوننت. نام کامپوننت در اینجا به صورت camel case تعریف شده است؛ که در واقع یک convention برای Angular است. در اینحالت برای استفاده‌ی از کامپوننت باید به اینصورت عمل کنیم:
<pm-app></pm-app>
در قسمت تنظیمات کامپوننت، در ساده‌ترین حالت یک template تعیین شده‌است که بیانگر نحوه‌ی رندر شدن یک کامپوننت می‌باشد. در اینحالت وقتی انگیولار به تگ فوق برسد، یک کامپوننت با نام pmApp را بارگذاری خواهد کرد.
ایجاد یک کامپوننت ساده
در ادامه می‌خواهیم یک کامپوننت ساده را جهت نمایش یکسری URL درون صفحه طراحی کنیم. ساختار صفحه index.html به صورت زیر خواهد بود:
<html ng-app="DNT">
<head>
<meta charset="UTF-8">
<title>Using Angular Component</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<dnt-widget></dnt-widget>
</div>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/components/dnt-widget.component.js"></script>
</body>
</html> در اینجا ابتدا توسط دایرکتیو ng-app، به Angular، ماژول‌مان را معرفی کرده‌ایم. سپس مداخل بوت‌استرپ و کتابخانه‌ی font-awesome را مشاهده می‌کنید. در ادامه، کتابخانه‌ی Angular و همچنین فایل app.js جهت معرفی ماژول برنامه معرفی شده‌است. در نهایت نیز یک فایل در مسیر ذکر شده برای قرار دادن کدهای کامپوننت در مسیر scripts/components اضافه شده‌است.
همانطور که ملاحظه می‌کنید، کامپوننت‌مان به صورت یک تگ سفارشی، درون صفحه قرار گرفته است:
<dnt-archive></dnt-archive>
در ادامه باید به Angular، نحوه‌ی تعریف این کامپوننت را اعلام کنیم. بنابراین یک فایل جاوا اسکریپتی را با نام dnt-widget.component، با محتویات زیر ایجاد کنید:
(function () {
"use strict";
var app = angular.module("DNT");
function DntArchiveController() {
var model = this;
model.panel = {
title: "Panel Title",
items: [
{
title: "Dotnettips", url: "https://www.dntips.ir"
},
{
title: "Google", url: "http://www.google.con"
},
{
title: "Yahoo", url: "http://www.yahoo.con"
}
]
};
};
app.component("dntWidget", {
templateUrl: '/scripts/components/dnt-widget.component.html',
controllerAs: "model",
controller: DntArchiveController
});
} ()); توضیح کدهای فوق:
همانطور که مشاهده می‌کنید، برای پارمتر دوم کامپوننت، سه پراپرتی را تعیین کرده‌ایم:
templateUrl: به کمک این پراپرتی به Angular گفته‌ایم که محتوای قالب این کامپوننت، درون یک فایل HTML مجزا قرار دارد و به صورت linked template می‌باشد.
controllerAs: یکی از مزایای استفاده از کامپوننت‌ها، استفاده از controller as syntax می‌باشد. لازم به ذکر است اگر این پراپرتی را مقداردهی نکنیم، به صورت پیش‌فرض مقدار ctrl$ در نظر گرفته خواهد شد.
controller: مزیت دیگر کامپوننت‌ها، استفاده از کنترلرها است. با استفاده از این پراپرتی، یک کنترلر را برای کامپوننت‌مان رجیستر کرده‌ایم. در نتیجه زمانیکه‌ی Angular می‌خواهد کامپوننت‌مان را نمایش دهد، تابع تعریف شده برای این پراپرتی، جهت ایجاد یک controller instance فراخوانی خواهد شد. بنابراین هر پراپرتی یا تابعی که برای این controller instance تعریف کنیم، به راحتی درون ویوی آن جهت اعمال بایندینگ در دسترس خواهد بود (در نتیجه نیازی به scope$ نخواهد بود).
درون کنترلر نیز برای راحتی کار و همچنین به عنوان یک best practice، مقدار this را توسط یک متغیر با نام model، کپچر کرده‌ایم. در اینجا یک شیء را با نام panel نیز به مدل اضافه کرده‌ایم.
محتویات تمپلیت:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<span class="fa fa-archive"></span>
{{ model.panel.title}}
</h3>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in model.panel.items">
<span class="fa fa-industry"></span>
<a href="{{ item.url }}">{{ item.title }}</a>
</li>
</ul>
</div> ویوی کامپوننت پیچیدگی خاصی ندارد. همانطور که مشاهده می‌کنید یک پنل بوت‌استرپی را ایجاد کرده‌ایم که مقدار عنوان آن و همچنین آیتم‌های آن، از شیء اتچ شده به مدل دریافت خواهند شد. بنابراین اکنون اگر برنامه را اجرا کنید، خروجی کامپوننت را به اینصورت مشاهده خواهید کرد:
همانطور که مشاهده می‌کنید استفاده از کامپوننت‌ها در Angular 1.5 در مقایسه با ایجاد دایرکتیوها و کنترلرها خیلی ساده‌تر است. در واقع امکانات این API جدید تنها به مثال فوق ختم نمی‌شود؛ بلکه این API یک سیستم مسیریابی جدید را نیز معرفی کرده است که در قسمت‌های بعدی به آن نیز خواهیم پرداخت.
جهت تکمیل بحث نیز یک تقویم شمسی ساده را در اینجا قرار داده‌ام. می‌توانید جهت مرور بحث جاری به کدهای آن مراجعه کنید. البته هدف از تعریف این پروژه تنها یک مثال ساده برای معرفی کامپوننت‌ها بود و طبیعتاً باگ‌های زیادی دارد. اگر مایل بودید می‌توانید در توسعه‌ی آن مشارکت نمائید.
کدهای این قسمت را نیز از اینجا می‌توانید دریافت کنید.
this post, we are going to talk about Components, which elegantly replace the mix of controllers, scopes, and directives from Angular 1
Now, with this required hardware-enforced containerization and virtualization tech, Windows 11 will isolate applications and processes much more easily. It will be much more difficult for malware in an errantly running application to access resources it isn't supposed to. It will only access the resources in that specific application task that it infects, such as a particular browser tab.
JazSharp is a unit testing framework for .NET that works very similar to Jasmine:
-
Tests are defined using Describe and It
-
Method calls can be replaced with spies allowing you to truly isolate the code you are testing
-
Full set of Assets (known as Expects) including ToHaveBeenCalledWith, ToEqual and ToContain which perform recursive comparisons
