در قسمت قبل با نحوهی ساخت و توزیع برنامههای Angular، توسط Angular CLI آشنا شدیم. یکی از فایلهایی که توسط سیستم build آن تولید میشود، فایل vendor.bundle.js است که شامل کدهای اصلی Angular و همچنین کتابخانههای ثالث مورد استفادهاست و با توجه به اینکه در حالت پیش فرض کار با Angular CLI قرار نیست فایل تنظیمات webpack آنرا استخراج و ویرایش کنیم، چگونه باید سایر کتابخانههای ثالث مورد نیاز را به این سیستم build معرفی کرد؟
استفاده از کتابخانههای جاوا اسکریپتی ثالث
برای استفاده از کتابخانههای جاوا اسکریپتی ثالث، نیاز است آنها را به فایل angular-cli.json. معرفی کنیم:
در اینجا امکان معرفی فایلهای اسکریپت و همچنین شیوهنامههای اضافی بیشتری (علاوه بر فایل src\styles.css پیش فرض پروژه) جهت معرفی آنها به سیستم build برنامه موجود است.
به علاوه تعریف پوشهی src\assets را نیز در اینجا مشاهده میکنید؛ به همراه فایلهای اضافی دیگری مانند src\favicon.ico که ذیل آن ذکر شدهاست.
یک مثال: معرفی کتابخانهی ng2-bootstrap به Angular CLI
دریافت و نصب بستههای مورد نیاز
مرحلهی اول کار با یک کتابخانهی ثالث نوشته شدهی برای Angular مانند ngx-bootstrap، دریافت و نصب بستهی npm آن میباشد. به همین جهت به ریشهی پروژه وارد شده و دستورات ذیل را صادر کنید تا بوت استرپ و همچنین کامپوننتهای +Angular 2.0 آن نصب شوند:
پرچم save در اینجا سبب به روز رسانی خودکار فایل package.json میشود:
معرفی بستههای نصب شده به تنظیمات Angular CLI
پس از آن، همانطور که عنوان شد نیاز است به فایل angular-cli.json. مراجعه کرده و شیوهنامهی بوت استرپ را تعریف کنیم:
چون از ngx-bootstrap استفاده میکنیم، نیازی به مقدار دهی مستقیم []:"scripts" فایل angular-cli.json. نیست. ولی اگر خواستید اینکار را انجام دهید، روش آن به صورت ذیل است (که البته نیاز به نصب بستهی jQuery را نیز خواهد داشت):
بنابراین تا اینجا بستههای بوت استرپ و همچنین ngx-bootstarp نصب شدند و شیوهنامهی بوت استرپ به فایل angular-cli.json اضافه گردید (نیازی هم به تکمیل قسمت scripts نیست).
استفاده از ماژولهای مختلف بستهی نصب شده در برنامه
در ادامه نیاز است تا ماژولی را از ngx-bootstarp را به قسمت imports فایل src\app\app.component.ts اضافه کرد. هرکدام از کامپوننتهای این بسته به صورت یک ماژول مجزا تعریف شدهاند. بنابراین برای استفادهی از آنها نیاز است برنامه را از وجودشان مطلع کرد. برای مثال روش استفادهی از AlertModule آن به صورت ذیل است:
در اینجا ابتدا AlertModule از ngx-bootstrap دریافت شده و سپس به قسمت imports فایل src\app\app.component.ts اضافه گردیدهاست.
آزمایش برنامه و اجرای آن
برای آزمایش مراحل فوق، فایل src/app/app.component.html را گشوده و به صورت ذیل تغییر دهید:
در اینجا یک دکمهی جدید با شیوهنامههای بوت استرپ اضافه شدهاند (جهت بررسی عملکرد بوت استرپ) و همچنین یک Alert نیز از مجموعه کامپوننتهای ngx-bootstrap به صفحه اضافه شدهاست.
اکنون اگر دستور ng serve -o را اجرا کنیم، خروجی ذیل حاصل خواهد شد:
مستندات و مثالهای بیشتری را از ماژولهای ngx-bootstarp، در اینجا میتوانید بررسی کنید.
استفاده از کتابخانههای جاوا اسکریپتی ثالث
برای استفاده از کتابخانههای جاوا اسکریپتی ثالث، نیاز است آنها را به فایل angular-cli.json. معرفی کنیم:
"apps": [ { "assets": [ "assets", "favicon.ico" ], "styles": [ "styles.css" ], "scripts": [],
به علاوه تعریف پوشهی src\assets را نیز در اینجا مشاهده میکنید؛ به همراه فایلهای اضافی دیگری مانند src\favicon.ico که ذیل آن ذکر شدهاست.
یک مثال: معرفی کتابخانهی ng2-bootstrap به Angular CLI
دریافت و نصب بستههای مورد نیاز
مرحلهی اول کار با یک کتابخانهی ثالث نوشته شدهی برای Angular مانند ngx-bootstrap، دریافت و نصب بستهی npm آن میباشد. به همین جهت به ریشهی پروژه وارد شده و دستورات ذیل را صادر کنید تا بوت استرپ و همچنین کامپوننتهای +Angular 2.0 آن نصب شوند:
> npm install bootstrap --save > npm install ngx-bootstrap --save
پرچم save در اینجا سبب به روز رسانی خودکار فایل package.json میشود:
"dependencies": { "bootstrap": "^3.3.7", "ngx-bootstrap": "^1.6.6",
معرفی بستههای نصب شده به تنظیمات Angular CLI
پس از آن، همانطور که عنوان شد نیاز است به فایل angular-cli.json. مراجعه کرده و شیوهنامهی بوت استرپ را تعریف کنیم:
"apps": [ { "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
چون از ngx-bootstrap استفاده میکنیم، نیازی به مقدار دهی مستقیم []:"scripts" فایل angular-cli.json. نیست. ولی اگر خواستید اینکار را انجام دهید، روش آن به صورت ذیل است (که البته نیاز به نصب بستهی jQuery را نیز خواهد داشت):
"scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ],
بنابراین تا اینجا بستههای بوت استرپ و همچنین ngx-bootstarp نصب شدند و شیوهنامهی بوت استرپ به فایل angular-cli.json اضافه گردید (نیازی هم به تکمیل قسمت scripts نیست).
استفاده از ماژولهای مختلف بستهی نصب شده در برنامه
در ادامه نیاز است تا ماژولی را از ngx-bootstarp را به قسمت imports فایل src\app\app.component.ts اضافه کرد. هرکدام از کامپوننتهای این بسته به صورت یک ماژول مجزا تعریف شدهاند. بنابراین برای استفادهی از آنها نیاز است برنامه را از وجودشان مطلع کرد. برای مثال روش استفادهی از AlertModule آن به صورت ذیل است:
import { AlertModule } from 'ngx-bootstrap'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, AlertModule.forRoot() ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
آزمایش برنامه و اجرای آن
برای آزمایش مراحل فوق، فایل src/app/app.component.html را گشوده و به صورت ذیل تغییر دهید:
<h1> {{title}} </h1> <button class="btn btn-primary">Hello!</button> <alert type="success">Alert success!</alert>
اکنون اگر دستور ng serve -o را اجرا کنیم، خروجی ذیل حاصل خواهد شد:
مستندات و مثالهای بیشتری را از ماژولهای ngx-bootstarp، در اینجا میتوانید بررسی کنید.
مراجعه کنید به مطلب «شروع به کار با AngularJS 2.0 و TypeScript - قسمت یازدهم - کار با فرمها - قسمت دوم» قسمت «اعتبارسنجی async یا اعتبارسنجی از راه دور (remote validation)» آن. یک مثال کامل در این زمینه مطرح شدهاست.
جهت تکمیل این بحث
برای VS 2013 این اصلاح را هم که مرتبط با AngularJS 2.0 هست، نصب کنید (پس از نصب پلاگین آن). این اصلاحیهی ویژه برای VS 2015 درصورتیکه TypeScript 2.0.3 را نصب کرده باشید، نیازی نیست.
برای VS 2013 این اصلاح را هم که مرتبط با AngularJS 2.0 هست، نصب کنید (پس از نصب پلاگین آن). این اصلاحیهی ویژه برای VS 2015 درصورتیکه TypeScript 2.0.3 را نصب کرده باشید، نیازی نیست.
در پروژه angular2-validations، یک نمونه پیاده سازی اعتبارسنجی از راه دور یا RemoteValidation را میتوانید مشاهده کنید. این پیاده سازی مبتنی بر Promiseها است. در مطلب جاری پیاده سازی دیگری را بر اساس Observableها مشاهده خواهید کرد و همچنین ساختار آن شبیه به ساختار remote validation در ASP.NET MVC و jQuery Validator طراحی شدهاست.
نگاهی به ساختار طراحی اعتبارسنجی از راه دور در ASP.NET MVC و jQuery Validator
در نگارشهای مختلف ASP.NET MVC و ASP.NET Core، ویژگی Remote سمت سرور، سبب درج یک چنین ویژگیهایی در سمت کلاینت میشود:
که شامل موارد ذیل است:
- متن نمایشی خطای اعتبارسنجی.
- تعدادی فیلد اضافی که در صورت نیز از فرم استخراج میشوند و به سمت سرور ارسال خواهند شد.
- نوع روش ارسال اطلاعات به سمت سرور.
- یک URL که مشخص میکند، این اطلاعات باید به کدام اکشن متد در سمت سرور ارسال شوند.
سمت سرور هم میتواند یک true یا false را بازگشت دهد و مشخص کند که آیا اطلاعات مدنظر معتبر نیستند یا هستند.
شبیه به یک چنین ساختاری را در ادامه با ایجاد یک دایرکتیو سفارشی اعتبارسنجی برنامههای Angular تدارک خواهیم دید.
ساختار اعتبارسنجهای سفارشی async در Angular
در مطلب «نوشتن اعتبارسنجهای سفارشی برای فرمهای مبتنی بر قالبها در Angular» جزئیات نوشتن اعتبارسنجهای متداول فرمهای Angular را بررسی کردیم. این نوع اعتبارسنجها چون اطلاعاتی را به صورت Ajax ایی به سمت سرور ارسال نمیکنند، با پیاده سازی اینترفیس Validator تهیه خواهند شد:
اما زمانیکه نیاز است اطلاعاتی مانند نام کاربری یا ایمیل او را به سرور ارسال کنیم و در سمت سرور، پس از جستجوی در بانک اطلاعاتی، منحصربفرد بودن آنها مشخص شود یا خیر، دیگر این روش همزمان پاسخگو نخواهد بود. به همین جهت اینبار اینترفیس دیگری به نام AsyncValidator برای انجام اعمال async و Ajax ایی در Angular تدارک دیده شدهاست:
در این حالت امضای متد validate این اینترفیس به صورت ذیل است:
یعنی در اینجا هم میتوان یک Promise را بازگشت داد (مانند پیاده سازی که در ابتدای بحث عنوان شد) و یا میتوان یک Observable را بازگشت داد که در ادامه نمونهای از پیاده سازی این روش دوم را بررسی میکنیم؛ چون امکانات بیشتری را نسبت به Promiseها به همراه دارد. برای مثال در اینجا میتوان اندکی صبر کرد تا کاربر تعدادی حرف را وارد کند و سپس این اطلاعات را به سرور ارسال کرد. به این ترتیب ترافیک ارسالی به سمت سرور کاهش پیدا میکند.
پیاده سازی یک اعتبارسنج از راه دور مبتنی بر Observableها در Angular
ابتدا یک دایرکتیو جدید را به نام RemoteValidator به ماژول custom-validators اضافه کردهایم:
در ادامه کدهای کامل این اعتبارسنج را مشاهده میکنید:
توضیحات تکمیلی
ساختار Directive تهیه شده مانند همان مطلب «نوشتن اعتبارسنجهای سفارشی برای فرمهای مبتنی بر قالبها در Angular» است، تنها با یک تفاوت:
در اینجا بجای NG_VALIDATORS، از NG_ASYNC_VALIDATORS استفاده شدهاست.
سپس ورودیهای این دایرکتیو را مشاهده میکنید:
به این ترتیب زمانیکه appRemoteValidator به المانی اضافه میشود (نام selector این دایرکتیو)، سبب فعالسازی این اعتبارسنج میگردد.
- در اینجا توسط ویژگی remote-url، آدرس اکشن متد سمت سرور دریافت میشود.
- ویژگی remote-field مشخص میکند که اطلاعات المان جاری با چه کلیدی به سمت سرور ارسال شود.
- ویژگی remote-additional-fields مشخص میکند که علاوه بر اطلاعات کنترل جاری، اطلاعات کدامیک از کنترلهای دیگر را نیز میتوان به سمت سرور ارسال کرد.
یک نکته:
ذکر "remote-field="FirstName به معنای انتساب مقدار رشتهای FirstName به خاصیت متناظر با ویژگی remote-field است.
انتساب ویژهی "remoteUsernameValidationUrl" به [remote-url]، به معنای انتساب مقدار متغیر remoteUsernameValidationUrl که در کامپوننت متناظر این قالب مقدار دهی میشود، به خاصیت متصل به ویژگی remote-url است.
بنابراین اگر remote-field را نیز میخواستیم به همین نحو تعریف کنیم، ذکر '' جهت مشخص سازی انتساب یک رشته، ضروری میبود؛ یعنی درج آن به صورت:
ساختار مورد انتظار بازگشتی از سمت سرور
در کدهای فوق، یک چنین ساختاری باید از سمت سرور بازگشت داده شود:
برای نمونه این ساختار را میتوان توسط یک anonymous object ایجاد کرد و بازگشت داد:
در اینجا برای مثال بررسی میشود که آیا FirstName ارسالی از سمت کاربر، معادل Vahid است یا خیر؟ اگر بله، result به false تنظیم شده و همچنین پیام خطایی نیز بازگشت داده میشود.
همچنین اعتبارسنج سفارشی از راه دور فوق، پیامها را تنها از طریق HttpPost ارسال میکند. علت اینجا است که در حالت POST، برخلاف حالت GET میتوان اطلاعات بیشتری را بدون نگرانی از طول URL، ارسال کرد و همچنین کل درخواست، به علت وجود کاراکترهای غیرمجاز در URL (حالت GET، به درخواست یک URL از سرور تفسیر میشود)، برگشت نمیخورد.
تکمیل کامپوننت فرم ثبت نام کاربران
در ادامه تکمیل قالب user-register.component.html را مشاهده میکنید:
در مورد ویژگیهای appRemoteValidator پیشتر بحث شد. در اینجا تنها یک نکتهی جدید وجود دارد:
زمانیکه یک async validator مشغول به کار است و هنوز پاسخی را دریافت نکردهاست، خاصیت pending را به true تنظیم میکند. به این ترتیب میتوان پیام اتصال به سرور را نمایش داد:
همچنین چون در اینجا نحوهی طراحی شکست اعتبارسنجی به صورت ذیل است:
وجود کلید remoteValidation در مجموعهی username.errors، بیانگر وجود خطای اعتبارسنجی از راه دور است و به این ترتیب میتوان پیام دریافتی از سمت سرور را نمایش داد:
مزایای استفاده از Observableها در حین طراحی async validators
در کدهای فوق چنین مواردی را هم مشاهده میکنید:
در اینجا بجای کار مستقیم با control.value (روش متداول دسترسی به مقدار کنترل دریافتی در یک اعتبارسنج)، به رخداد valueChanges آن متصل شده و سپس پس از 400 میلیثانیه، جمع نهایی ورودی کاربر، در اختیار متد http.post برای ارسال به سمت سرور قرار میگیرد. به این ترتیب میتوان تعداد رفت و برگشتهای به سمت سرور را کاهش داد و به ازای هر یکبار فشرده شدن دکمهای توسط کاربر، سبب بروز یکبار رفت و برگشت به سرور نشد.
همچنین وجود و تعریف new Subject، دراینجا ضروری است و از نشتی حافظه و همچنین رفت و برگشتهای اضافهی دیگری به سمت سرور، جلوگیری میکند. این subject سبب میشود تا کلیه اعمال ناتمام پیشین، لغو شده (takeUntil) و تنها آخرین درخواست جدید رسیدهی پس از 400 میلیثانیه، به سمت سرور ارسال شود.
بنابراین همانطور که مشاهده میکنید، Observableها فراتر هستند از صرفا ارسال اطلاعات به سرور و بازگشت آنها به سمت کلاینت (استفادهی متداولی که از آنها در برنامههای Angular وجود دارد).
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید.
نگاهی به ساختار طراحی اعتبارسنجی از راه دور در ASP.NET MVC و jQuery Validator
در نگارشهای مختلف ASP.NET MVC و ASP.NET Core، ویژگی Remote سمت سرور، سبب درج یک چنین ویژگیهایی در سمت کلاینت میشود:
data-val-remote="کلمه عبور وارد شده را راحت می‌توان حدس زد!" data-val-remote-additionalfields="*.Password1" data-val-remote-type="POST" data-val-remote-url="/register/checkpassword"
- متن نمایشی خطای اعتبارسنجی.
- تعدادی فیلد اضافی که در صورت نیز از فرم استخراج میشوند و به سمت سرور ارسال خواهند شد.
- نوع روش ارسال اطلاعات به سمت سرور.
- یک URL که مشخص میکند، این اطلاعات باید به کدام اکشن متد در سمت سرور ارسال شوند.
سمت سرور هم میتواند یک true یا false را بازگشت دهد و مشخص کند که آیا اطلاعات مدنظر معتبر نیستند یا هستند.
شبیه به یک چنین ساختاری را در ادامه با ایجاد یک دایرکتیو سفارشی اعتبارسنجی برنامههای Angular تدارک خواهیم دید.
ساختار اعتبارسنجهای سفارشی async در Angular
در مطلب «نوشتن اعتبارسنجهای سفارشی برای فرمهای مبتنی بر قالبها در Angular» جزئیات نوشتن اعتبارسنجهای متداول فرمهای Angular را بررسی کردیم. این نوع اعتبارسنجها چون اطلاعاتی را به صورت Ajax ایی به سمت سرور ارسال نمیکنند، با پیاده سازی اینترفیس Validator تهیه خواهند شد:
export class EmailValidatorDirective implements Validator {
export class RemoteValidatorDirective implements AsyncValidator {
validate(c: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null>;
پیاده سازی یک اعتبارسنج از راه دور مبتنی بر Observableها در Angular
ابتدا یک دایرکتیو جدید را به نام RemoteValidator به ماژول custom-validators اضافه کردهایم:
>ng g d CustomValidators/RemoteValidator -m custom-validators.module
import { Directive, Input } from "@angular/core"; import { AsyncValidator, AbstractControl, NG_ASYNC_VALIDATORS } from "@angular/forms"; import { Http, RequestOptions, Response, Headers } from "@angular/http"; import "rxjs/add/operator/map"; import "rxjs/add/operator/distinctUntilChanged"; import "rxjs/add/operator/takeUntil"; import "rxjs/add/operator/take"; import { Observable } from "rxjs/Observable"; import { Subject } from "rxjs/Subject"; @Directive({ selector: "[appRemoteValidator][formControlName],[appRemoteValidator][formControl],[appRemoteValidator][ngModel]", providers: [ { provide: NG_ASYNC_VALIDATORS, useExisting: RemoteValidatorDirective, multi: true } ] }) export class RemoteValidatorDirective implements AsyncValidator { @Input("remote-url") remoteUrl: string; @Input("remote-field") remoteField: string; @Input("remote-additional-fields") remoteAdditionalFields: string; constructor(private http: Http) {} validate(control: AbstractControl): Observable<{ [key: string]: any }> { if (!this.remoteUrl || this.remoteUrl === undefined) { return Observable.throw("`remoteUrl` is undefined."); } if (!this.remoteField || this.remoteField === undefined) { return Observable.throw("`remoteField` is undefined."); } const dataObject = {}; if ( this.remoteAdditionalFields && this.remoteAdditionalFields !== undefined ) { const otherFields = this.remoteAdditionalFields.split(","); otherFields.forEach(field => { const name = field.trim(); const otherControl = control.root.get(name); if (otherControl) { dataObject[name] = otherControl.value; } }); } // This is used to signal the streams to terminate. const changed$ = new Subject<any>(); changed$.next(); // This will signal the previous stream (if any) to terminate. const debounceTime = 400; return new Observable((obs: any) => { control.valueChanges .takeUntil(changed$) .take(1) .debounceTime(debounceTime) .distinctUntilChanged() .flatMap(term => { dataObject[this.remoteField] = term; return this.doRemoteValidation(dataObject); }) .subscribe( (result: IRemoteValidationResult) => { if (result.result) { obs.next(null); } else { obs.next({ remoteValidation: { remoteValidationMessage: result.message } }); } obs.complete(); }, error => { obs.next(null); obs.complete(); } ); }); } private doRemoteValidation(data: any): Observable<IRemoteValidationResult> { const headers = new Headers({ "Content-Type": "application/json" }); // for ASP.NET MVC const options = new RequestOptions({ headers: headers }); return this.http .post(this.remoteUrl, JSON.stringify(data), options) .map(this.extractData) .do(result => console.log("remoteValidation result: ", result)) .catch(this.handleError); } private extractData(res: Response): IRemoteValidationResult { const body = <IRemoteValidationResult>res.json(); return body || (<IRemoteValidationResult>{}); } private handleError(error: Response): Observable<any> { console.error("observable error: ", error); return Observable.throw(error.statusText); } } export interface IRemoteValidationResult { result: boolean; message: string; }
ساختار Directive تهیه شده مانند همان مطلب «نوشتن اعتبارسنجهای سفارشی برای فرمهای مبتنی بر قالبها در Angular» است، تنها با یک تفاوت:
@Directive({ selector: "[appRemoteValidator][formControlName],[appRemoteValidator][formControl],[appRemoteValidator][ngModel]", providers: [ { provide: NG_ASYNC_VALIDATORS, useExisting: RemoteValidatorDirective, multi: true } ] })
سپس ورودیهای این دایرکتیو را مشاهده میکنید:
export class RemoteValidatorDirective implements AsyncValidator { @Input("remote-url") remoteUrl: string; @Input("remote-field") remoteField: string; @Input("remote-additional-fields") remoteAdditionalFields: string;
<input #username="ngModel" required maxlength="8" minlength="4" type="text" appRemoteValidator [remote-url]="remoteUsernameValidationUrl" remote-field="FirstName" remote-additional-fields="email,password" class="form-control" name="username" [(ngModel)]="model.username">
- ویژگی remote-field مشخص میکند که اطلاعات المان جاری با چه کلیدی به سمت سرور ارسال شود.
- ویژگی remote-additional-fields مشخص میکند که علاوه بر اطلاعات کنترل جاری، اطلاعات کدامیک از کنترلهای دیگر را نیز میتوان به سمت سرور ارسال کرد.
یک نکته:
ذکر "remote-field="FirstName به معنای انتساب مقدار رشتهای FirstName به خاصیت متناظر با ویژگی remote-field است.
انتساب ویژهی "remoteUsernameValidationUrl" به [remote-url]، به معنای انتساب مقدار متغیر remoteUsernameValidationUrl که در کامپوننت متناظر این قالب مقدار دهی میشود، به خاصیت متصل به ویژگی remote-url است.
export class UserRegisterComponent implements OnInit { remoteUsernameValidationUrl = "api/Employee/CheckUser";
[remote-field]="'FirstName'"
ساختار مورد انتظار بازگشتی از سمت سرور
در کدهای فوق، یک چنین ساختاری باید از سمت سرور بازگشت داده شود:
export interface IRemoteValidationResult { result: boolean; message: string; }
namespace AngularTemplateDrivenFormsLab.Controllers { [Route("api/[controller]")] public class EmployeeController : Controller { [HttpPost("[action]")] [ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)] public IActionResult CheckUser([FromBody] Employee model) { var remoteValidationResult = new { result = true, message = $"{model.FirstName} is fine!" }; if (model.FirstName?.Equals("Vahid", StringComparison.OrdinalIgnoreCase) ?? false) { remoteValidationResult = new { result = false, message = "username:`Vahid` is already taken." }; } return Json(remoteValidationResult); } } }
همچنین اعتبارسنج سفارشی از راه دور فوق، پیامها را تنها از طریق HttpPost ارسال میکند. علت اینجا است که در حالت POST، برخلاف حالت GET میتوان اطلاعات بیشتری را بدون نگرانی از طول URL، ارسال کرد و همچنین کل درخواست، به علت وجود کاراکترهای غیرمجاز در URL (حالت GET، به درخواست یک URL از سرور تفسیر میشود)، برگشت نمیخورد.
تکمیل کامپوننت فرم ثبت نام کاربران
در ادامه تکمیل قالب user-register.component.html را مشاهده میکنید:
<div class="form-group" [class.has-error]="username.invalid && username.touched"> <label class="control-label">User Name</label> <input #username="ngModel" required maxlength="8" minlength="4" type="text" appRemoteValidator [remote-url]="remoteUsernameValidationUrl" remote-field="FirstName" remote-additional-fields="email,password" class="form-control" name="username" [(ngModel)]="model.username"> <div *ngIf="username.pending" class="alert alert-warning"> Checking server, Please wait ... </div> <div *ngIf="username.invalid && username.touched"> <div class="alert alert-danger" *ngIf="username.errors.remoteValidation"> {{username.errors.remoteValidation.remoteValidationMessage}} </div> </div> </div>
زمانیکه یک async validator مشغول به کار است و هنوز پاسخی را دریافت نکردهاست، خاصیت pending را به true تنظیم میکند. به این ترتیب میتوان پیام اتصال به سرور را نمایش داد:
همچنین چون در اینجا نحوهی طراحی شکست اعتبارسنجی به صورت ذیل است:
obs.next({ remoteValidation: { remoteValidationMessage: result.message } });
مزایای استفاده از Observableها در حین طراحی async validators
در کدهای فوق چنین مواردی را هم مشاهده میکنید:
// This is used to signal the streams to terminate. const changed$ = new Subject<any>(); changed$.next(); // This will signal the previous stream (if any) to terminate. const debounceTime = 400; return new Observable((obs: any) => { control.valueChanges .takeUntil(changed$) .take(1) .debounceTime(debounceTime) .distinctUntilChanged()
همچنین وجود و تعریف new Subject، دراینجا ضروری است و از نشتی حافظه و همچنین رفت و برگشتهای اضافهی دیگری به سمت سرور، جلوگیری میکند. این subject سبب میشود تا کلیه اعمال ناتمام پیشین، لغو شده (takeUntil) و تنها آخرین درخواست جدید رسیدهی پس از 400 میلیثانیه، به سمت سرور ارسال شود.
بنابراین همانطور که مشاهده میکنید، Observableها فراتر هستند از صرفا ارسال اطلاعات به سرور و بازگشت آنها به سمت کلاینت (استفادهی متداولی که از آنها در برنامههای Angular وجود دارد).
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید.
چندی قبل مطلب «نمایش تاریخ شمسی توسط JavaScript در AngularJS» را در این سایت مطالعه کردید. در اینجا قصد داریم معادل Angular آنرا تهیه کنیم (واژهی AngularJS به نگارشهای 1x اشاره میکند و Angular به تمام نگارشهای پس از 2).
نصب پیشنیازهای کار با moment-jalaali
ابتدا نیاز است بستهی npm این کتابخانه را نصب کنیم که به همراه فایلهای js مرتبط با آن میباشد:
سپس جهت بهبود تجربهی کاربری با آن در IDEهای امروزی، خصوصا VSCode، بهتر است typings آنرا نیز نصب کنیم؛ تا علاوه بر داشتن Intellisense، بتوان به صورت strongly typed با آن کار کرد:
VSCode به صورت خودکار پوشهی مخصوص node_modules\@types را تحت نظر قرار میدهد و نصب بستههای typings در آن، سبب بارگذاری آنی آنها خواهد شد.
به علاوه اگر به فایل tsconfig.json واقع در ریشهی پروژه نیز دقت کنید، وجود تعریف ذیل، امکان خوانده شدن این تعاریف را توسط کامپایلر TypeScript میسر میکند:
نحوهی کار Strongly Typed با کتابخانهی moment-jalaali در برنامههای مبتنی بر TypeScript
پس از نصب پیشنیازهای یاد شده، ابتدا برای دسترسی به امکانات این کتابخانه، ماژول آنرا import میکنیم:
- پس از import ماژولی به نام moment-jalaali، اکنون نحوهی استفادهی از آنرا در متد persianDateTests مشاهده میکنید.
- متد momentJalaali.loadPersian باید تنها یکبار فراخوانی شود. کار آن تبدیل نامهای روزها و ماههای میلادی، به شمسی است.
- پس از آن از طریق متد format آن، میتوان انواع و اقسام حالات مختلف را بررسی کرد که در اینجا سه نمونه را مشاهده میکنید.
نوشتن یک Pipe سفارشی برای تبدیل تاریخهای میلادی دریافتی از سرور به قالب شمسی
پس آشنا شدن با نحوهی استفادهی از این کتابخانه در یک برنامهی تایپاسکریپتی، تبدیل کردن آن به یک Pipe سفارشی بسیار سادهاست. برای این منظور ابتدا یک Pipe جدید را به ماژول فرضی custom-pipe.module اضافه میکنیم:
با این محتوا:
در اینجا نیز ابتدا ماژول moment-jalaali تعریف شدهاست و سپس توسط آن، value به عنوان پارامتر متد momentJalaali و args به عنوان پارامتر متد format ارسال شدهاند. در حین استفادهی از Pipe، مقدار value همان تاریخ دریافتی است و args به فرمت خاصی که توسط استفاده کننده مشخص میشود، تنظیم خواهد شد.
به این ترتیب میتوان یک چنین تبدیلات سمت کاربری را انجام داد که نمونهای از خروجی آنرا در تصویر فوق نیز ملاحظه میکنید:
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید.
نصب پیشنیازهای کار با moment-jalaali
ابتدا نیاز است بستهی npm این کتابخانه را نصب کنیم که به همراه فایلهای js مرتبط با آن میباشد:
npm install moment-jalaali --save
سپس جهت بهبود تجربهی کاربری با آن در IDEهای امروزی، خصوصا VSCode، بهتر است typings آنرا نیز نصب کنیم؛ تا علاوه بر داشتن Intellisense، بتوان به صورت strongly typed با آن کار کرد:
npm install @types/moment-jalaali --save-dev
VSCode به صورت خودکار پوشهی مخصوص node_modules\@types را تحت نظر قرار میدهد و نصب بستههای typings در آن، سبب بارگذاری آنی آنها خواهد شد.
به علاوه اگر به فایل tsconfig.json واقع در ریشهی پروژه نیز دقت کنید، وجود تعریف ذیل، امکان خوانده شدن این تعاریف را توسط کامپایلر TypeScript میسر میکند:
{ "typeRoots": [ "node_modules/@types" ] }
نحوهی کار Strongly Typed با کتابخانهی moment-jalaali در برنامههای مبتنی بر TypeScript
پس از نصب پیشنیازهای یاد شده، ابتدا برای دسترسی به امکانات این کتابخانه، ماژول آنرا import میکنیم:
import * as momentJalaali from "moment-jalaali"; export class MomentJalaaliTestComponent implements OnInit { now: string; nowLongDateFormat: string; nowExtraLongDateFormat: string; ngOnInit() { this.persianDateTests(); } persianDateTests() { // https://github.com/jalaali/moment-jalaali momentJalaali.loadPersian(/*{ usePersianDigits: true }*/); // نمایش فارسی نام ماهها، روزها و امثال آن this.now = momentJalaali().format("jYYYY/jMM/jDD HH:mm"); this.nowLongDateFormat = momentJalaali().format("jD jMMMM jYYYY [ساعت] LT"); this.nowExtraLongDateFormat = momentJalaali().format( "dddd، jD jMMMM jYYYY [ساعت] LT" ); } }
- متد momentJalaali.loadPersian باید تنها یکبار فراخوانی شود. کار آن تبدیل نامهای روزها و ماههای میلادی، به شمسی است.
- پس از آن از طریق متد format آن، میتوان انواع و اقسام حالات مختلف را بررسی کرد که در اینجا سه نمونه را مشاهده میکنید.
نوشتن یک Pipe سفارشی برای تبدیل تاریخهای میلادی دریافتی از سرور به قالب شمسی
پس آشنا شدن با نحوهی استفادهی از این کتابخانه در یک برنامهی تایپاسکریپتی، تبدیل کردن آن به یک Pipe سفارشی بسیار سادهاست. برای این منظور ابتدا یک Pipe جدید را به ماژول فرضی custom-pipe.module اضافه میکنیم:
ng g p CustomPipe/moment-jalaali -m custom-pipe.module
import { Pipe, PipeTransform } from "@angular/core"; import * as momentJalaali from "moment-jalaali"; @Pipe({ name: "momentJalaali" }) export class MomentJalaaliPipe implements PipeTransform { transform(value: any, args?: any): any { return momentJalaali(value).format(args); } }
به این ترتیب میتوان یک چنین تبدیلات سمت کاربری را انجام داد که نمونهای از خروجی آنرا در تصویر فوق نیز ملاحظه میکنید:
<h2>Server side dates:</h2> <div *ngFor="let date of dates"> <span dir="ltr">{{date | momentJalaali:'jYYYY/jMM/jDD hh:mm' }}</span>, <span dir="rtl">{{date | momentJalaali:'jD jMMMM jYYYY [ساعت] LT'}}</span> </div>
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید.
مراحل ارتقاء پروژههای Angular از نگارش 6 به 7 آن به شرح زیر هستند:
1- به روز رسانی Angular CLI
ابتدا نیاز است نگارش قبلی را حذف و سپس نگارش جدید را نصب کنید:
npm uninstall -g @angular/cli npm cache verify # if npm version is < 5 then use `npm cache clean` npm install -g @angular/cli@latest
البته Angular 7 پشتیبانی از Node 10 را اضافه کرده است (بیشتر؛ دانلود Node). بنابراین پیش از اجرای دستورات فوق بهتر است NodeJS خود را نیز به روز کنید:
npm i -g npm
2- به روز رسانی RxJS (اگر در نگارش 6 آنرا تکمیل نکردهاید)
1-تعویض کردن HttpModule با HttpClientModule و سرویس Http با سرویس HttpClient 2-حذف کردن ویژگیهای منسوخ شده از RxJS 6 با اجرای دستور زیر:
npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json
3-حذف rxjs-compat بعد از بروزرسانی RxJS 6
اطلاعات بیشتر: «ارتقاء به Angular 6: بررسی تغییرات RxJS»
3- به روز رسانی TypeScript
Angular 7 از تایپ اسکریپت 3.1 استفاده میکند (بیشتر). به همین جهت نیاز است وابستگیهای سراسری سیستم خود را مانند TypeScript، پس از نصب CLI جدید، به نحو زیر به روز کنید:
npm update -g
برای بهروز رسانی به نسخه 7 (core framework و CLI)، دستورات زیر را اجرا کنید:
ng update @angular/cli ng update @angular/core ng update rxjs
و اگر از Angular Material نیز استفاده میکنید، نیاز به اجرای دستور زیر را نیز خواهید داشت:
ng update @angular/material
و یا به صورت خلاصه دستور زیر تمام مراحل فوق را به صورت یکجا انجام میدهد:
ng update --all --force
اگر شما از Service worker مربوط به Angular استفاده میکنید، بجای versionedFiles از files استفاده کنید. رفتار همان است و تغییر نکردهاست.
6- به روز رسانی وابستگیهای ثالث پروژه
برای به روز رسانی سایر وابستگیهای پروژه، میتوان از بستهی npm-check-updates استفاده کرد:
npm install npm-check-updates -g ncu -u npm install
اشتراکها