add angular docs #97
add angular docs #97
Conversation
|
بهتره که تو یک سری از قسمت های مهم از کارآموز بخوایم با چیزهایی که تو اون قسمت یاد گرفته یک کار کوچیک انجام بده تا بازخورد بگیره. (این بجز تمرین نهایی اون فاز و پروژه هستش) |
docs/frontend/05-angular.md
Outdated
| @@ -0,0 +1,239 @@ | |||
| --- | |||
| title: Angular | |||
| description: When I was a kid, my mom used to just throw me into a pile of broken glass! | |||
There was a problem hiding this comment.
متن Description تغییر کنه. یک متن فارسی باشه که توضیح میده تو اون داک چی می‌خوایم بگیم و اگر کمی طنز باشه هم مشکلی نداره.
docs/frontend/05-angular.md
Outdated
| # Angular | ||
|
|
||
| ## مقدمه‌ای بر Angular | ||
| [Angular](https://angular.io/) یک فریمورک و پلتفرم برای ساخت برنامه‌های تک‌صفحه‌ای (SPA یا single page application) با استفاده از HTML و TypeScript است. این فریمورک توسط گوگل توسعه داده شده و نگهداری میشود و ابزارها و معماری محکمی را برای ساخت برنامه‌های قابل گسترش ارائه می‌دهد. |
There was a problem hiding this comment.
به طور کلی کلمات انگلیسی به صورت
Title case
نوشته بشن و مثل کانونشن داک‌های ستاره برای خوانایی بیشتر مارکداون، در یک خط مجزا قرار بگیرن.
docs/frontend/05-angular.md
Outdated
| <h1>{{ title }}</h1> | ||
| ``` | ||
|
|
||
| در این مثال، `title` یک property از کامپوننت است که مقدار آن در قالب نمایش داده میشود. لازم به ذکر است هر تغییر در مقدار `title` به طور خودکار توسط Angular تشخیص داده شده و در نتیجه قالب به صورت خودکار بروز میشود. (البته این در صورتی است که در change detection تغییری انجام نشده باشد که در بخش‌های آینده از آن صحبت خواهیم کرد) |
There was a problem hiding this comment.
نامگذاری یکپارچه نیست. تمپلیت یا قالب؟
There was a problem hiding this comment.
مفهوم change detection در کجا توضیح داده شده؟
| در این مثال، `title` یک property از کامپوننت است که مقدار آن در قالب نمایش داده میشود. لازم به ذکر است هر تغییر در مقدار `title` به طور خودکار توسط Angular تشخیص داده شده و در نتیجه قالب به صورت خودکار بروز میشود. (البته این در صورتی است که در change detection تغییری انجام نشده باشد که در بخش‌های آینده از آن صحبت خواهیم کرد) | ||
|
|
||
| ### Property Binding | ||
|
|
There was a problem hiding this comment.
درباره اینکه
property
چی هستش یک یاداوری کوچک بشه بهتره.
There was a problem hiding this comment.
این به نظرم نیاز نیست خیلی واضخه
docs/frontend/05-angular.md
Outdated
|
|
||
| ### Event Binding | ||
|
|
||
| در Angular، می‌توانید eventها را در قالب مدیریت کنید و به متدهای کامپوننت متصل کنید. این کار با استفاده از `( )` انجام میشود. |
There was a problem hiding this comment.
در اینجا درباره مفهوم ایونت بیشتر توضیح داده بشه.
|
|
||
| ### Two way binding | ||
|
|
||
| - [Demystifying Angular Two Way Binding](https://www.youtube.com/watch?v=vkmwbZV-ob8) |
There was a problem hiding this comment.
یک توضیحی بدیم که این چیه و چرا بهش نیاز داریم و بعد طرف رو بفرستیم یاد بگیره.
|
|
||
| ### angular routing | ||
| ابزار قدرتمند انگولار برای جابه‌جایی بین صفحات مختلف استفاده میشود. | ||
|
|
There was a problem hiding this comment.
مثل کامنت قبل نیازه که لزوم روتینگ رو توجیه کنیم.
docs/frontend/05-angular.md
Outdated
|
|
||
| کامپوننت‌ها بلوک‌های ساختمانی اصلی برنامه‌های Angular هستند. هر کامپوننت شامل یک کلاس TypeScript، یک قالب HTML و یک فایل سبک CSS است. کامپوننت‌ها به شما امکان می‌دهند تا بخش‌های مختلف برنامه را به صورت مجزا توسعه داده و مدیریت کنید. | ||
|
|
||
| برای ساخت کامپوننت از `@Component` استفاده میکنیم. در این decorator مشخصه `selector` مشخص می‌کند که این کامپوننت با چه تگی در HTML استفاده خواهد شد، `template` قالب HTML کامپوننت را تعریف می‌کند، و `styles` استایل‌های CSS مربوط به کامپوننت را مشخص می‌کند. |
There was a problem hiding this comment.
به جای @component بنویس دیکوریتور component که به صورت @component نمایش داده میشود
docs/frontend/05-angular.md
Outdated
| ng g c hello-world | ||
| ``` | ||
|
|
||
| این دستور در هر دایرکتوری اجرا شود به صورت خودکار دایرکتوری جدید شامل فایل HTML، CSS، TypeScript و فایل تست تشکیل می‌دهد. (برای نام گذاری componentها از قرارداد `name.component.ts` و برای تست از `name.component.spec.ts` استفاده میشود) |
docs/frontend/05-angular.md
Outdated
| users: string[] = []; | ||
| newUser: string = ''; | ||
|
|
||
| constructor(private userService: UserService) {} |
There was a problem hiding this comment.
داخل توضیح بگو تو کانستراکتور اینجکتش میکنیم
docs/frontend/05-angular.md
Outdated
|
|
||
| **مثال:** | ||
|
|
||
| اگر بخواهیم یک تاریخ را به فرمت تاریخ شمسی تبدیل کنیم، از پایپ `DatePipe` استفاده میکنیم: |
| اگر بخواهیم یک تاریخ را به فرمت تاریخ شمسی تبدیل کنیم، از پایپ `DatePipe` استفاده میکنیم: | ||
|
|
||
| ```html | ||
| <p>تاریخ امروز: {{ today | date:'hh:mm:ss' }}</p> |
docs/frontend/05-angular.md
Outdated
| <p>تاریخ امروز: {{ today | date:'hh:mm:ss' }}</p> | ||
| ``` | ||
|
|
||
| در این مثال، `today` یک متغیر در کامپوننت Angular است که تاریخ فعلی را نگهداری می‌کند. `date` یک پایپ است که تاریخ را به فرمت "hh:mm:ss" تبدیل می‌کند و نمایش می‌دهد. |
There was a problem hiding this comment.
تایم بشه همه اینا اینجا سوتی دادیم
docs/frontend/05-angular.md
Outdated
| } | ||
|
|
||
| ``` | ||
| در این پایپ، متد transform تاریخ را به عنوان ورودی دریافت کرده و به فرمت دریافتی تبدیل کرده و آن را برمی‌گرداند. |
There was a problem hiding this comment.
در این متد تاریخ رو میگیریم و زمان رو استخراج میکنیم و نمایش میدیم
No description provided.