جستجو در تالارهای گفتگو
در حال نمایش نتایج برای برچسب های 'انگولار'.
3 نتیجه پیدا شد
-
تک مسئولیتی قانون تک مسئولیتی را به تمام کامپوننتها، سرویسها و نمادهای دیگر اعمال کنید. این باعث میشود که برنامه تمیزتر، خواناتر و امکان نگهداری و تست را داشته باشد. قانون اول در هر فایل تنها یک چیز، مثل سرویس یا کامپوننت تعریف کنید. در نظر بگیرید که فایلها را به ۴۰۰ خط کد محدود کنید. چرا؟ یک کامپوننت در هر فایل باعث راحتی خوانایی و نگهداری میشود همچنین باعث دوری از برخورد با تیم در سورس کنترل میشود. چرا؟ یک کامپوننت در هر فایل باعث دوری از باگهای مخفیای میشود که هنگام ترکیب کامپوننتها در یک فایل و اشتراک متغیرها به وجود میآیند. چرا؟ یک کامپوننت تنها میتواند خروجی (export) پیشفرض فایل خود باشد که lazy loading در روتر را را آسان میکند. توابع کوچک توابع کوچک تعریف کنید. در نظر بگیرید که توابع را به کمتر از ۷۵ خط کد محدود کنید. چرا؟ توابع کوچک برای تست راحتتر هستند مخصوصا اگر یک کار را انجام دهند و یک نتیجه را داشته باشند. چرا؟ توابع کوچک باعث استفاده دوباره میشوند. چرا؟ توابع کوچک خواناتر هستند. چرا؟ توابع کوچک راحت تر نگهداری میشوند. چرا؟ توابع کوچک به دوری از باگهای زیر کمک میکند: باگهایی که در توابع بزرگ به وجود میآیند. باگهایی که به دلیل اشتراک متغیرها با محدوده (scope) خارجی به وجود میآیند. ایجاد وابستگیهای ناخواسته نامگذاری از نامهای ثابت برای تمام نمادها استفاده کنید. الگویی را دنبال کنید که خصوصیت و سپس نوع نماد را توضیح دهد. چرا؟ قراردادهای نامگذاری کمک میکنند که در یک نگاه راه ثابتی را برای پیدا کردن محتوا فراهم کنید. ثبات در پروژه حیاتی است. ثبات در تیم مهم است. ثبات در یک شرکت بهرهوری را به شکل چشمگیری بالا میبرد. چرا؟ قراردادهای نامگذاری باید پیدا کردن و فهمیدن کدهای دلخواه را آسانتر کنند. چرا؟ نام پوشهها و فایلها باید به وضوح هدف خود را انتقال دهند. برای مثال: app/heroes/hero-list.component.ts احتمالا حاوی کامپوننتی است که لیستی از قرمانان را مدیریت میکند.
-
ساخت یک کامپوننت آپلود در انگولار(Uploader Component) میتواند کار سختی باشد. به این دلیل که با فایل ها در جاوا اسکریپت سر و کار داریم. در این آموزش یک روش خوب را برای آپلود فایلها آموزش میدهم. به علاوه این که چطور از روند آپلود در لحظه خبر داشته باشیم و با نمایش درصد دادههای آپلود شده تجربهی خوبی را برای کاربران فراهم کنیم. نکته: در این آموزش من به مباحث سمت سرور و دریافت فایل توسط آن نمیپردازم و به این شکل در نظر میگیرم که شما سروری آمادهی دریافت فایل دارید. حالا در سمت کلاینت که انگولار 6 یا بالاتر است، میخواهیم این فایل را با یک درخواست از نوع POST به سمت سرور بفرستیم و در حین آپلود گزارشی از روند آپلود در انگولار را نمایش دهیم. در این مورد من از کامپوننتی (Component) از انگولار متریال به نام نوار پیشرفت (Progress Bar) استفاده میکنم. میتوانید نمونه نهایی این پروژه که برای آموزش ساخته شده را در مخزن گیتهاب مشاهده کنید. ساخت پروژه انگولار برای شروع، در دایرکتوری (Directory) مد نظر، پروژهی انگولار خود را با استفاده از رابط خط فرمان انگولار (Angular CLI) به نام آپلودر میسازیم. پس دستور زیر را وارد میکنیم: ng new uploader وابستگیهای خارجی از آنجایی که ما نیاز به عناصر پیچیدهی رابط کاربری (UI)، مثل نوار پیشرفت داریم؛ تصمیم گرفتم تا از کتابخانهی انگولار متریال استفاده کنیم. برای نصب این کتابخانه همچنین انیمیشنها از دو دستور زیر استفاده کنید: npm install --save @angular/material @angular/cdk npm install --save @angular/animations برای این که بتوانیم از سیاساس (CSS) این ماژول استفاده کنیم، لازم است که آن را در فایل استایل سراسری خود وارد (Import) کنیم: @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; ساخت ماژول (Module) امکانات برای این که کامپوننت خوب ما تا حد ممکن قابلیت استفادهی دوباره را داشته باشد، تصمیم گرفتم آن را در یک ماژول جدا بستهبندی کنم. برای ساخت این ماژول دستور زیر را استفاده کنید: ng generate module upload ساخت کامپوننت آپلود در انگولار برای ساخت کامپوننت آپلود کافی است از دستور زیر استفاده کنید. همانطور که از نام این کامپوننت مشخص است، برای آپلود فایلهای (File) خود از یک دیالوگ استفاده خواهیم کرد. ng generate component upload/dialog افزودن ماژولهای خارجی بعد، نیاز خواهیم داشت که تعداد زیادی ماژول خارجی را در ماژول جدید خود یعنی upload.module.ts وارد کنیم. برای مثال، نیاز داریم تا تمام عناصر رابط کاربریای که استفاده خواهیم کرد را به این شکل وارد کنیم: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { DialogComponent } from './dialog/dialog.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatButtonModule, MatDialogModule, MatListModule, MatProgressBarModule } from '@angular/material'; @NgModule({ imports: [ CommonModule, HttpClientModule, BrowserAnimationsModule, MatButtonModule, MatDialogModule, MatListModule, MatProgressBarModule ], declarations: [DialogComponent], exports: [DialogComponent], entryComponents: [DialogComponent] }) export class UploadModule { } توجه کنید در صورتی که دقیقاً دستورهای گفته شده را وارد کردید، کامپوننت شما توسط CLI در ماژول upload تعریف خواهد شد. درصورتی که شما از ماژولی استفاده نمیکنید، کامپوننت جدید شما در فایل app.module.ts تعریف میشود. همچنین برای این که کامپوننت دیالوگ ما به خوبی کار کند لازم است تا آن را به عنوان EntryComponent در ماژول خود اضافه کنیم. این کار در ماژول نمونه بالا انجام شده است. حالا برای این که بتوانیم از کامپوننت جدید خود استفاده کنیم باید ماژول تعریف شده را در app.module.ts وارد کنیم تا به AppComponent اضافه شود. سرویس آپلود در انگولار قبل از ساخت محتوای نمایشی کامپوننت آپلودر، لازم است ابتدا منطق آپلود را پیادهسازی کنیم. این منطق در سرویس آپلود قرار خواهد گرفت. آن سرویس را با استفاده از دستور زیر ایجاد میکنیم: ng generate service upload/upload داخل این سرویس نیاز داریم تا از HttpClient استفاده کنیم. این سرویس تنها دارای یک تابع به نام upload خواهد بود و برای هر فایل یک Observable برمیگرداند. این Observable ها حاوی روند آپلود و درصد آن خواهد بود. /** * @description A Http request to upload files * @param file */ upload(file: File): Observable<any> { const formData: FormData = new FormData(); let url = ''; formData.append('video', file, file.name); url = 'http://localhost:1500/api/upload/videos'; const req = new HttpRequest('POST', url, formData, { reportProgress: true, responseType: 'text' }); const progress = new Subject<any>(); this.http.request(req).subscribe(event => { if (event.type === HttpEventType.UploadProgress) { const percentDone = Math.round(100 * event.loaded / event.total); progress.next({ percent: percentDone, loaded: event.loaded }); } else if (event instanceof HttpResponse) { progress.complete(); } }); return progress.asObservable(); } توجه داشته باشید که برای استفاده از این تابع باید موارد زیر را وارد کنید: import { HttpClient, HttpEventType, HttpResponse, HttpRequest } from '@angular/common/http'; import { Observable, Subject } from 'rxjs'; همچنین نمونهای از HttpClient را در سازنده (Constructor) کلاس تعریف میکنیم تا بتوانیم درخواست http ارسال کنیم: constructor(private http: HttpClient) { } در تابع آپلود، فایل دریافتی را در یک فرم بسته بندی کرده، یک درخواست http از نوع POST ساخته و آن درخواست را همراه با فرم به عنوان دادهی همراه درخواست ارسال میکنیم. سپس به روند آپلود فایل گوش میدهیم، درصد آپلود را محاسبه میکنیم و مقدار آن را به جریان داده پاس میدهیم. حالا برای فایل مورد نظر observable ای از روند آپلود را در اختیار داریم. سرانجام نیاز داریم تا آن سرویس را به عنوان provider در ماژول خود اضافه کنیم. برای این کار کافی است سرویس خود را در فایل ماژول وارد (Import) کنیم (اگر توسط CLI وارد نشده بود) و آن را به این صورت در قسمت providers ماژول معرفی کنیم: @NgModule({ imports: [ CommonModule, HttpClientModule, BrowserAnimationsModule, MatButtonModule, MatDialogModule, MatListModule, MatProgressBarModule ], declarations: [DialogComponent], exports: [DialogComponent], entryComponents: [DialogComponent], providers: [UploadService] }) export class UploadModule { } نکته: در پروژه نمونه برای این که در App Component از دکمههای متریال استفاده میشود، MatButtonModule را در قسمت exports هم قرار دادم. باز کردن دیالوگ آپلودر برای باز کردن دیالوگ در فایل .ts کامپوننت اصلی یعنی App ماژول دیالوگ و کامپوننت دیالوگ خود را وارد ( import) میکنیم: import { MatDialog } from '@angular/material'; import { DialogComponent } from './upload/dialog/dialog.component'; حالا در سازنده کلاس (constructor) نمونهٰای از MatDialog تعریف میکنیم: constructor(public dialog: MatDialog) { } با استفاده از تابع زیر میتوانید دیالوگ ساخته شده توسط خود را باز کنید. این تابع را در کلاس کامپوننت App قرار میدهیم: openDialog() { this.dialog.open(DialogComponent, { width: '720px' }); } برای استفاده از این تابع تنها کافی است آن را به رویداد (event) کلیک روی دکمه بایند (Bind) کنیم. پس عبارت زیر را روی تگ دکمهای که برای باز کردن دیالوگ در نظر گرفتهایم قرار میدهیم: (click)="openDialog()" اضافه کردن فایلها اولین کاری که باید در این قسمت انجام دهیم اضافه کردن یک عنصر input از نوع فایل به دیالوگ است. این عنصر input تنها راه تحریک منوی انتخاب فایل سیستم عامل برای باز شدن است. <input type="file" #file style="display: none" (change)="onFilesAdded()" multiple /> اما برای این که ظاهر زشتی دارد قرار است که آن را با استفاده از CSS مخفی کنیم. سپس آن را با استفاده از رویداد کلیک، از طریق منطق کامپوننت باز میکنیم. برای این کار در فایل ts کامپوننت یک ارجاع به آن عنصر نیاز داریم. برای این کار از دایرکتیوی (directive) به نام ViewChild استفاده میکنیم. همچنین متغیری نیاز داریم تا فایل را در آن ذخیره کنیم. همانطور که میبینید برای استفاده از سرویس آپلود نمونهای از آن را در سازنده کلاس تعریف کردهام. import { Component, OnInit, ViewChild } from '@angular/core'; import { UploadService } from '../upload.service'; @Component({ selector: 'app-dialog', templateUrl: './dialog.component.html', styleUrls: ['./dialog.component.scss'] }) export class DialogComponent implements OnInit { @ViewChild('file') file; addedFile; constructor(private uploadService: UploadService) { } ngOnInit() { } } حالا با شبیهسازی یک کلیک منوی انتخاب فایل سیستم عامل را باز میکنیم. addFiles() { this.file.nativeElement.click(); } طبق عنصر input که بالاتر نوشتهام، هنگامی که انتخاب فایل توسط کاربر انجام شد تابعی به نام onFilesAdded صدا زده میشود که شکل زیر را دارد: onFilesAdded() { this.addedFile = this.file.nativeElement.files[0]; console.log('Added File:', this.addedFile); } حالا فایل ذخیره شده را داریم که آمادهی آپلود است برای آپلود تابعی را تعریف کرده و از سرویسی که قبلا تهیه کردیم استفاده میکنیم. برای آن که درصد فایل آپلود شده و مقدار دادهی آپلود شده را داشته باشیم دو متغیر جدید تعریف میکنیم و به شکل زیر درصد آپلود و مقدار داده آپلود شده را بدست میآوریم: upload() { const progress = this.uploadService.upload(this.addedFile); progress.subscribe((result) => { this.percent = result.percent; this.loaded = result.loaded; }); } حالا برای مثال میتوانیم روند پیشرفت آپلود را به شکل زیر به نمایش بگذاریم: <mat-progress-bar mode="determinate" [value]="percent"></mat-progress-bar> نمونهی پروژهی آماده شده برای این آموزش را میتوانید از اینجا دریافت کنید. امیدوارم آموزش مفیدی بوده باشه. خوشحال میشوم نظرات شما را درباره این آموزش بدانم.
-
مقدمه گاهی اوقات ارزش این را دارد که چند قدم به عقب برداریم و از دید یک تازهکار دنیای توسعه را نگاهی بیاندازیم. امروزه که استقبال زیادی از فریمورک (framework) انگولار میشود، پرسشهای زیادی در مورد انگولار در ذهن توسعه دهندهها به وجود آمده پرسشهایی مانند: انگولار چیست؟ چرا باید انگولار را استفاده کنیم؟ چه موقع نباید از انگولار استفاده کنیم؟ در این مقاله من پاسخ این پرسشها و مطالب بیشتری را میدهم. نگاهی خواهیم انداخت به این که انگولار چیست، چگونه راهاندازی شد و چه زمانی استفاده از انگولار ایدهی خوبی است. بگذارید از ابتدا شروع کنیم و ببینیم چگونه فریمورک انگولار راه اندازی شد؟ انگولار چگونه راهاندازی شد؟ انگولار به عنوان یک پروژهی جانبی شروع شد. در سال 2009، میسکو هِوِری (Miško Hevery) و آدام ابرونز (Adam Abrons) پروژهای را تحت عنوان <angular/> منتشر کردند که به توسعه دهندهها و طراحان کمک میکرد تا با استفاده از تگ (tag) های ساده HTML وب اپلیکیشنهایی (Web application) بسازند. نام "Angular" از براکت های زاویهدار یا <> میآید، که تمام تگهای HTML را احاطه میکنند. میسکو ایدهی پشت این فریمورک را در مصاحبهای که در سال 2013 انجام شد شرح داد: چون دامین angular.com گرفته شده بود - که هنوز هم گرفته شده - حامیها نام کتابخانه را به GetAngular تغییر دادند و سایت کوچکی را قرار دادند که دربارهی امکانات فریمورک صحبت میکرد. تصویر زیر وبسایت انگولار در سال 2009 را نشان میدهد: پس از مدت کوتایی میسکو شروع به کار برای گوگل کرد، و در 2010 در حال کار کردن روی پروژه ای به نام google feedback بود. میسکو برد گرین (Brad Green) مدیر خود را قانع کرد تا پروژه را با استفاده از پروژه جانبی انگولار او باز نویسی کند و مقدار زمان و کدی که تیم توانست ذخیره کند کمک کرد تا گوگل را برای قدرتی که انگولار ارائه میداد متقاعد کند. کمی بعد از موفقیت در بازنویسی Google Feedback، همان تیم کتابخانه را متنباز کردند و سرانجام نسخه 1.0 از انگولار در ماه می سال 2011 منتشر شد. طی چند سال آمار استفاده از انگولار صعود کرد، و امروز گوگل استفادهی نیم میلیون توسعه دهنده از انگولار را به رخ میکشد. انگولار چه میکند؟ انگولار یک فریمورک جاوا اسکریپت است که به توسعه دهندهها در ساختن برنامه کمک میکند. این کتابخانه تعدادی امکانات را ارائه میکند که پیاده سازی نیازمندیهای پیچیدهی برنامههای مدرن را بدیهی و آسان میکند. مانند پیوند داده (data binding)، مسیریابی (routing) و انیمیشنها (animations). همچنین انگولار قراردادهایی را برای چگونگی توسعه برنامه (application) فراهم میکند، که میتواند برای تیمهای بزرگی که نیاز دارند با هم روی یک کد پایه کار کنند بسیار مفید باشد. انگولار تنها کتابخانه جاوا اسکریپت است که راهنمای استایل (style) جامع را با تعدادی دستورالعمل محتاطانه درباره چگونگی نوشتن کد با فریمورک ارائه میدهد. چه زمانی باید انگولار را استفاده کرد؟ از دید تکنیکی شما میتوانید هر چیزی با انگولار بسازید، اما انگولار در پروژه های پیچیده که شامل داده میشوند به بهترین شکل عمل میکند. اگر شما نگاهی به برنامههای متنوع ساخته شده توسط انگولار که در اینجا لیست شده بیاندازید، خواهید دید عموما برنامههایی هستند که دادهها را از فرم (form) ها جمعآوری کرده و با آن کاری میکنند. این به این معنی نیست که شما باید برای استفاده از انگولار در پروژهی خود فرم داشته باشید. توسعه دهندهها تعداد تعجب برانگیزی از بازی با انگولار به خوبی چیزهایی مثل برنامههای واقعیت مجازی ساختهاند! با این حال اکثر آموزشهایی که خواهید یافت دربارهی برنامههایی از نوع فرمدار خواهد بود. برای مثال مستندات انگولار آموزشی دربارهی ساخت برنامهای است که شما با استفاده از فرم، قهرمان هایی را میسازید و آنها را در لیستی مشاهده میکنید. انگولار در برنامههای با پایه فرم خوب عمل میکند، همچنین برای برنامههای بزرگ و پیچیده بسیار مناسب است. همچنین انگولار نه آسانترین فریمورک جاوا اسکریپ است و نه کوچکترین؛ بنابراین اگر در حال ساخت چیز کوچکی هستید کتابخانههای سادهتری مثل جیکوئری خواهید یافت که مناسبتر هستند. مشابهاً انگولار بسیار مناسب برنامههایی است که توسط تیمهای متوسط الی بزرگ ساخته شدهاند. اگر شما خودتان در حال کار بر روی برنامهای هستید، ممکن است قرارداد های انگولار را بیشتر از نیاز خود ببینید. انگولار همچنین برای برنامههایی مناسب است که نیاز دارند در محیطهای توسعه مختلفی اجرا شوند. اگر شما برنامهای دارید که باید به خوبی یک برنامهی ویندوزی یا مک اجرا شود، میتوانید یکی از آموزشهای آنلاین برای اجرای برنامهی انگولار خود با پروژه معروف الکترون را دنبال کنید. اگر شما برنامهای دارید که باید به خوبی برنامه اندروید و ios اجرا شود، میتوانید با استفاده از NativeScript برنامهی خود را در یک محیط بومی واقعی موبایل رندر (Render) کنید. در بعضی موارد حتی میتوانید این کد را بین پلتفرمهای مختلف به اشتراک بگذارید. چه کسی پشتیبان انگولار است؟ تیم هستهی انگولار آرایهای عظیم از افراد و جامعهی (community) انگولار را شامل میشود که در دنیا گسترده شدهاند. که میشود گفت بیشتر توسعههای روز به روز انگولار توسط کارمندان گوگل انجام شده است. صفحه دربارهی انگولار تقریباً 20 کارمند گوگل را در تیم هسته انگولار لیست کرده است و تمام برترین مشارکت کنندهها در پروژه انگولار در گوگل کار میکنند. که میشود گفت گوگل انگولار را کنترل میکند، خود کتابخانه هنوز تا مقدار زیادی تلاش جامعه است. بیشتر از 2000 فرد در یکی از مخزنهای (repositories) متنباز انگولار مشارکت داشتهاند. راهنما و آموزشهای بیشمار نوشته شده توسط جامعه در دسترس هستند، و شرکتهای مختلفی به توسعه دهندهها برای قدرت بیشتر پیشنهاد آموزش و تجهیز شدن به انگولار را میدهند. چه نسخه ای از انگولار را استفاده کنم؟ در زمان نوشتن این مقاله دو نسخه مشهور انگولار موجود هستند. نسخه یک در وبسایت https://angularjs.org در دسترس است و نسخه ی آپدیت شدهی همان کتابخانهای است که میسکو و تیم در سال 2011 منتشر کردند. نسخه ی مشهور دیگر انگولار اکنون به سادگی "Angular"خوانده میشود و در وبسایت https://angular.io در دسترس است. انگولار مدرن کاملا شکل دوباره طراحی شدهی نسخه یک برای مرورگرها، جریانهای کار و پلتفرمهای توسعه جدیدتر است.