جواد رسولی جواد رسولی
مطالب
Pipeها در Angular 2 – قسمت دوم – ساخت Pipe سفارشی
در قسمت قبل، مقدماتی از Pipeها را مورد برسی قرار دادیم؛ از جمله کاربرد Pipeها، نحوه استفاده از آنها، معرفی یکسری Pipe از پیش ساخته شده Angular، نحوه ارسال پارامتر به آنها و همچنین نحوه استفاده از آنها را در داخل Typescript، فراگرفتیم. در این قسمت نحوه ساخت Pipeهای سفارشی و همچنین نکات تکمیلی در مورد آنها را مورد بحث و بررسی قرار می‌دهیم.

نحوه ساخت Pipe سفارشی

علاوه بر استفاده از Pipeهای از پیش ساخته شده Angular، شما می‌توانید Pipeهای سفارشی خود را نیز تعریف و استفاده کنید. به عنوان مثال می‌خواهیم Pipe ای را با نام perNumber تعریف کنیم، تا تمامی اعداد موجود در عبارت ورودی Pipe را به صورت اعداد فارسی نمایش دهد. یعنی با اعمال این Pipe به عدد 123456 خروجی ۱۲۳۴۵۶ مورد انتظار است. برای ایجاد Pipe سفارشی مراحل زیر را انجام دهید.


قدم اول - ساخت یک فایل با نام دلخواه

طبق Style Guide در Angular.io نام این فایل را per-number.pipe.ts انتخاب می‌کنیم.


قدم دوم – افزودن ماژولهای مورد نیاز

داخل فایل ایجاد شده ماژول‌های Pipe و PipeTransform را با استفاده از دستور import از angular/core@ اضافه می‌کنیم.
 import { Pipe, PipeTransform } from '@angular/core';


قدم سوم – ساخت کلاس و مزین کردن آن به Pipe@

یک کلاس با نام دلخواه را مثلا به نام PerNumberPipe ایجاد می‌کنیم. این کلاس علاوه بر اینکه PipeTransform را پیاده سازی خواهد کرد، مزین به متادیتای Pipe@ نیز می‌باشد. متادیتای Pipe@ هنگام تزئین کلاس، یک نام را دریافت می‌کند. این نام قرار است به عنوان نام نهایی Pipe برای اعمال بر روی Template expressions مورد استفاده قرار بگیرد. 
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'perNumber'}) export class PerNumberPipe implements PipeTransform {

}


قدم چهارم – پیاده سازی متد transform

به واسطه اعمال اینترفیس PipeTransform، این کلاس باید متد transform را پیاده سازی کند. این متد در پارامتر اول خود، عبارت ورودی را که قرار است Pipe بر روی آن اعمال شود، دریافت می‌کند و در ادامه تعداد دلخواهی پارامتر ورودی Pipe را که می‌خواهد، می‌تواند دریافت کند. 
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'perNumber'})
export class PerNumberPipe implements PipeTransform {
    transform(value: any, ...args: any[]): any {

    }
}

نکته ۱: نام انتخابی برای Pipe در آذین‌گر Pipe@ بایستی یک شناسه معتبر در JavaScript باشد.
نکته ۲: متد transform برای Pipe اجباری است و حتما بایستی پیاده سازی شود. اینترفیس PipeTransform این متد را برای کلاس اجباری می‌کند؛ هرچند استفاده از این اینترفیس برای کلاس Pipe کاملا اختیاری است.


قدم آخر – نوشتن کد تبدیل اعداد

Pipe مورد نظر ما قرار است یک رشته عددی را از ورودی دریافت کند و تمامی اعداد لاتین آن را به فارسی تبدیل کند. همچنین این Pipe هیچگونه پارامتری را دریافت نمی‌کند. کد زیر نحوه پیاده سازی متد transform را نمایش می‌دهد. 
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'perNumber'}) export class PerNumberPipe implements PipeTransform {
    transform(input: string): string{
        if (input == undefined) return '';
        var str = input.toString().trim();
        if (str === "") return "";
        str = str.replace(/0/g, '۰');
        str = str.replace(/1/g, '۱');
        str = str.replace(/2/g, '۲');
        str = str.replace(/3/g, '۳');
        str = str.replace(/4/g, '۴');
        str = str.replace(/5/g, '۵');
        str = str.replace(/6/g, '۶');
        str = str.replace(/7/g, '۷');
        str = str.replace(/8/g, '۸');
        str = str.replace(/9/g, '۹');
        return str;
    }
}


نحوه معرفی Pipe سفارشی به برنامه

حالا جهت استفاده از Pipe سفارشی در کامپوننت‌های خود کافی است آنرا یکبار در قسمت declarations در AppModule خود  تعریف کنید. 
import { PerNumberPipe } from './pipes/per-number.pipe.ts'
...

declarations: [PerNumberPipe]


نحوه استفاده از Pipeهای سفارشی 

نحوه استفاده از Pipeهای سفارشی، دقیقا مشابه Pipeهای از قبل ساخته شده Angular می‌باشد. 
<h3>{{'12345679' | perNumber}}</h3>
 

یکسری از Pipeهای مربوط به زبان فارسی در گیت‌هاب بنده پیاده سازی شده است که نیازمند همکاری دوستان است. لطفا جهت همکاری برای ساخت یک ابزار جامع برای زبان فارسی در Angular به این لینک مراجعه کنید.
 
Pipeها و تشخیص تغییرات

Angular برای اعمال Pipe بر روی Template expressions بایستی تمامی رخدادهای برنامه را تحت نظر قرار داده و با مشاهده هر تغییری بر روی عبارت ورودی Pipe، فراخوانی Pipe را آغاز کند. از جمله این رخدادها می‌توان به رخداد mouse move، timer tick، server response و فشرده شدن کلیدهای ماوس و یا کیبورد اشاره کرد. واضح است که بررسی تغییرات عبارت در این همه رخداد می‌تواند مخرب باشد و بر روی کارآئی (Performance) تاثیر منفی خواهد گذاشت. اما Angular برای حل این مشکل و همچنین هنگام مشاهده سریع تغییرات هنگام استفاده از Pipeها، الگوریتم‌های سریع و ساده‌ای در نظر گرفته است.


در قسمت بعد با انواع Pipeها در Angular و همچنین نحوه پیاده سازی آنها، آشنا خواهیم شد. 
‫۷ سال و ۴ ماه قبل، یکشنبه ۴ تیر ۱۳۹۶، ساعت ۱۵:۰۵
مهدی ملائیان مهدی ملائیان
مسیرراه‌ها
مسیریابی در Angular
قسمت اول - معرفی 
قسمت دوم - مسیریابی ماژول‌ها
قسمت سوم - پارامترهای مسیریابی  
قسمت چهارم - پیش واکشی اطلاعات
قسمت پنجم - تعریف Child Routes
قسمت ششم - گروه بندی مسیریابی‌ها
قسمت هفتم - بهبودهای بصری
قسمت هشتم - قسمت هشتم - مسیرهای ثانویه 
قسمت نهم - محافظ‌های مسیرها
قسمت دهم - Lazy loading 
‫۷ سال و ۶ ماه قبل، چهارشنبه ۶ اردیبهشت ۱۳۹۶، ساعت ۲۲:۱۶
وحید نصیری وحید نصیری
مطالب
بلاگ‌ها و مطالب مطالعه شده در هفته قبل (هفته دوم آبان)

وبلاگ‌ها و سایت‌های ایرانی


Visual Studio


امنیت


ASP. Net


طراحی وب


اس‌کیوال سرور


به روز رسانی‌ها


ابزارها


سی‌شارپ

  • تازه‌های سی شارپ 4 ، واژه کلیدی dynamic ، قسمت‌های یک و دو و سه

عمومی دات نت


CPP


دلفی


ویندوز


Office

  • آشنایی با یک سری از اصطلاحات outlook 2007 برای برنامه نویس‌ها. (اگر قصد داشته باشید یک add-in را برای outlook 2007 با استفاده از امکانات VSTO توسعه دهید، آشنایی با این اصطلاحات بسیار ضروری خواهد بود)

متفرقه



‫۱۵ سال و ۱۳ ماه قبل، جمعه ۱۷ آبان ۱۳۸۷، ساعت ۰۳:۴۶
مهمان مهمان
نظرات مطالب
هزینه استفاده از دات نت فریم ورک چقدر است؟
سلام مجدد، تازگی‌ها به ذهنم خطور کرده بود که حساب کتاب کنم ببینم در یک شرکت ۲۰ نفره نرم افزاری ایرانی اگر نخواهیم خیلی سخت بگیریم چقدر باید هزینه مجوز کنیم و آیا این هزینه نسبت به بقیه هزینه‌های یک شرکت چیز زیادی می‌شود یا نه. و به این ترتیب بتوان کمی دوستان را ترغیب کرد به رعایت حق تالیف. جالب بود که شما بخش زیادی از این موضوع رو پوشش دادید.

یک نکته در مورد مونو. من چند وقت پیش خیلی دنبال این موضوع بودم که آیا ما ویندوز/ویژوال استودیو کارها می‌تونیم به لینوکس/مونو مهاجرت کنیم و چیز زیادی رو از دست ندیم؟ و دست آخر به این نتیجه رسیدم که اقلاً در مورد ASP.NET مقداری کمبود و کاستی وجود دارد. البته هنوز بررسی‌ها و آزمایشاتم تمام نشده. به اینجا نگاه کنید: http://programmers.stackexchange.com/questions/96154/can-i-use-linux-mono-instead-of-windows-visual-studio-without-any-problem
‫۱۳ سال و ۲ ماه قبل، سه‌شنبه ۱۵ شهریور ۱۳۹۰، ساعت ۱۸:۰۴
مهمان مهمان
نظرات مطالب
هزینه استفاده از دات نت فریم ورک چقدر است؟
سلام مجدد، تازگی‌ها به ذهنم خطور کرده بود که حساب کتاب کنم ببینم در یک شرکت ۲۰ نفره نرم افزاری ایرانی اگر نخواهیم خیلی سخت بگیریم چقدر باید هزینه مجوز کنیم و آیا این هزینه نسبت به بقیه هزینه‌های یک شرکت چیز زیادی می‌شود یا نه. و به این ترتیب بتوان کمی دوستان را ترغیب کرد به رعایت حق تالیف. جالب بود که شما بخش زیادی از این موضوع رو پوشش دادید.

یک نکته در مورد مونو. من چند وقت پیش خیلی دنبال این موضوع بودم که آیا ما ویندوز/ویژوال استودیو کارها می‌تونیم به لینوکس/مونو مهاجرت کنیم و چیز زیادی رو از دست ندیم؟ و دست آخر به این نتیجه رسیدم که اقلاً در مورد ASP.NET مقداری کمبود و کاستی وجود دارد. البته هنوز بررسی‌ها و آزمایشاتم تمام نشده. به اینجا نگاه کنید: http://programmers.stackexchange.com/questions/96154/can-i-use-linux-mono-instead-of-windows-visual-studio-without-any-problem
‫۱۳ سال و ۲ ماه قبل، سه‌شنبه ۱۵ شهریور ۱۳۹۰، ساعت ۱۸:۰۴
وحید نصیری وحید نصیری
نظرات مطالب
شروع به کار با EF Core 1.0 - قسمت 3 - انتقال مهاجرت‌ها به یک اسمبلی دیگر
- من چون از PowerShell برای اینکار استفاده نمی‌کنم، پیشنیازهای خط فرمان dotnet ef را نوشتم که امتحان شده و بدون مشکل کار می‌کند (و تغییر یا بسته‌ی دیگری را هم نیاز ندارد).
- دستورات PowerShell دیگر شامل enable-migration نیست و اینبار add-migration است.
برای فعالسازی آن‌ها هم نیاز است از همان بسته‌ی Microsoft.EntityFrameworkCore.Tools استفاده شود (که برای EF 1.1 هم به روز شده‌است):
"dependencies": {
       "Microsoft.EntityFrameworkCore.Tools": {
        "version": "1.1.0-preview4-final",
        "imports": [
            "portable-net45+win8"
        ],
        "type": "build"
   },
        // the rest ...
},
    "tools": {
        "Microsoft.EntityFrameworkCore.Tools": {
            "version": "1.1.0-preview4-final",
            "imports": [
                "portable-net45+win8"
            ]
        },
        // the rest ...
}
تنها این بسته‌است که شامل فایل‌های ps1 مربوط به PowerShell است (واقع در مسیر زیر):
%UserProfile%\.nuget\packages\Microsoft.EntityFrameworkCore.Tools\1.1.0-preview4-final\tools
و این بسته جهت بارگذاری فایل‌های PowerShell توسط نیوگت، حتما باید در قسمت dependencies ذکر شود (علاوه بر قسمت tools).
ذکر آن در قسمت dependencies سبب می‌شود که قسمت frameworks نیز به نحو ذیل تغییر کند (و پس از این تغییرات نیاز است یکبار ویژوال استودیو را بسته و مجددا باز کنید): 
"frameworks": { 
        "netcoreapp1.1": {
            "dependencies": {
                "Microsoft.NETCore.App": {
                    "type": "platform",
                    "version": "1.1.0"
                }
            },
            "imports": [
                "dnxcore50",
                "portable-net45+win8"
            ]
        }
    }
‫۷ سال و ۱۱ ماه قبل، دوشنبه ۱ آذر ۱۳۹۵، ساعت ۰۱:۴۳
وحید نصیری وحید نصیری
بازخوردهای دوره
لغو Lazy Loading در حین کار با AutoMapper و Entity Framework
به روز رسانی
در نگارش 5 این کتابخانه، قسمت «تهیه نگاشت‌های AutoMapper» بجای استفاده از متد Configure، از خود سازنده‌ی کلاس جهت معرفی نگاشت‌ها استفاده می‌کند. بنابراین امضای متدهای Configure را حذف و با سازنده‌ی کلاس جایگزین کنید.
‫۸ سال و ۴ ماه قبل، چهارشنبه ۹ تیر ۱۳۹۵، ساعت ۱۶:۵۷
وحید نصیری وحید نصیری
مطالب
آموزش مقدماتی Silverlight

یک سری فایل کارگاه آموزشی معرفی Silverlight را از آدرس زیر می‌توانید دریافت نمائید.


برای صرفه جویی در وقت، لینکی به نام Download all files associated with related objects را در آدرس فوق یافته و تمام 5 قسمت را در طی یک بسته دریافت کنید.

‫۱۴ سال و ۱۳ ماه قبل، یکشنبه ۱۰ آبان ۱۳۸۸، ساعت ۰۲:۲۳