Skip to content

Commit

Permalink
Merge pull request #23 from Mariotek/eisa-rezaei-edit-questions-1-10
Browse files Browse the repository at this point in the history
question 1-10 edited
  • Loading branch information
eisa-rezaei authored Sep 15, 2023
2 parents c3a0eac + 51f556b commit 8c1dfe5
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 87 deletions.
90 changes: 44 additions & 46 deletions Book.html

Large diffs are not rendered by default.

78 changes: 37 additions & 41 deletions Book.md
Original file line number Diff line number Diff line change
Expand Up @@ -324,28 +324,28 @@ puppeteer:

1. ### فریمورک انگولار چیه؟

Angular یک پلت‌فرم فرانت‌اند منبع باز مبتنی بر **TypeScript** است که ساخت برنامه‌ها را در وب/موبایل/کامپیوتر آسان می‌کند. از ویژگی های اصلی این فریم ورک مانند قالب های اعلامی، تزریق وابستگی، ابزارهای انتها به انتها و بسیاری ویژگی های دیگر برای سهولت توسعه استفاده می شود.
Angular یک پلت‌فرم فرانت‌اند اوپن سورس مبتنی بر **TypeScript** هس که ساخت برنامه‌ها تو وب/موبایل/کامپیوتر رو برامون اسونتر میکنه. از ویژگی های اصلی این فریم ورک میشه به قالب های declarative dependency injection، ابزارهای end to end و خیلی ویژگی های دیگه که برای اسونتر شدن توسعه استفاده میشه اشاره کرد.

**[فهرست](#فهرست)**

2. ### فرق بین انگولار و انگولار جی اس چیه؟

Angular یک فریم ورک کاملاً احیا شده مبتنی بر مؤلفه است که در آن یک برنامه کاربردی درختی از اجزای جداگانه است.
Angular یه فریم ورک کاملاً کامپوننت بیس هستش که تو اون یه app ساختار درختی از کامپوننت ها هستش.

| AngularJS | Angular |
|---- | ---------
| این بر اساس معماری MVC است| این بر اساس Service/Controller است|
| از جاوا اسکریپت برای ساخت برنامه استفاده می کند|برای نوشتن برنامه، TypeScript را معرفی کرد|
| بر اساس مفهوم کنترلرها| این یک رویکرد UI مبتنی بر مؤلفه است|
| یک چارچوب سازگار با موبایل نیست| با توجه به پلتفرم تلفن همراه توسعه یافته است|
| مشکل در توسعه برنامه کاربردی SEO دوستانه| سهولت در ایجاد برنامه های کاربردی سئو دوستانه|
| بر اساس معماری MVC هستش| بر اساس Service/Controller هستش|
| از جاوا اسکریپت برای ساخت app استفاده میکنه|برای نوشتن app، TypeScript رو معرفی کرد|
| بر اساس مفهوم کنترلرها| یه رویکرد UI مبتنی بر کامپوونت هستش|
| یک چارچوب سازگار با موبایل نیست| میشه برای پلتفرم تلفن همراه ازش استفاده کرد|
| ساخت برنامه با مشکلات مربوط به سئو | ساخت برنامه با سئو مناسب|

**[فهرست](#فهرست)**

3. ### تایپ اسکریپت چیه؟

TypeScript یک ابر مجموعه تایپ شده از جاوا اسکریپت است که توسط مایکروسافت ایجاد شده است که انواع اختیاری، کلاس ها، async/wait و بسیاری ویژگی های دیگر را اضافه می کند و به جاوا اسکریپت ساده کامپایل می کند. Angular به طور کامل در TypeScript ساخته شده و به عنوان زبان اصلی استفاده می شود.
شما می توانید آن را به صورت جهانی نصب کنید
TypeScript یک ابر مجموعه تایپ های جاوا اسکریپت هستش که توسط مایکروسافت ساخته شده که انواع تایپ های optional، class ها، async/wait و خیلی ویژگی های دیگه رو اضافه می کنه و به جاوا اسکریپت ساده کامپایل می کنه. Angular به طور کامل در TypeScript ساخته شده و به عنوان زبان اصلی استفاده می شه.
ما می تونیم اونو به صورت گلوبال نصب کنیم

<span dir="ltr" align="left">

Expand All @@ -355,7 +355,7 @@ puppeteer:
</span>

Let's see a simple example of TypeScript usage,
بیاین یه مثال از نحوه استفاده از تایپ اسکریپت ببینیم

<span dir="ltr" align="left">

Expand All @@ -371,30 +371,30 @@ puppeteer:

</span>

متد greeter فقط نوع رشته را به عنوان آرگومان مجاز می کند.
متد greeter فقط تایپ string را به عنوان آرگومان اجازه میده.

**[فهرست](#فهرست)**

4. ### یه دیاگرام تصویری از ساختار انگولار بنویس؟

بلوک های ساختمان اصلی یک برنامه Angular در نمودار زیر نشان داده شده است
بلوک های ساختمان اصلی یک برنامه Angular رو میتونیم توی دیاگرام زیر ببینیم
![ScreenShot](images/architecture.png)

**[فهرست](#فهرست)**

5. ### کامپوننت های کلیدی انگولار کدوما هستن؟

1. **Component:** اینها بلوک های ساختمانی اصلی برنامه های زاویه ای برای کنترل نماهای HTML هستند.
2. **Modules:** یک ماژول زاویه‌ای مجموعه‌ای از بلوک‌های ساختمانی پایه زاویه‌ای مانند کامپوننت، دستورالعمل‌ها، خدمات و غیره است. یک برنامه کاربردی به قطعات منطقی تقسیم می‌شود و هر قطعه کد به عنوان "ماژول" نامیده می‌شود که یک وظیفه را انجام می‌دهد.
3. **Templates:** این نماهای یک برنامه Angular را نشان می دهد.
4. **Services:** برای ایجاد مؤلفه هایی استفاده می شود که می توانند در کل برنامه به اشتراک گذاشته شوند.
5. **Metadata:** این می تواند برای افزودن داده های بیشتر به یک کلاس Angular استفاده شود.
1. **Component:** اینها بلوک های ساخت اصلی برنامه های انگولار برای کنترل نماهای HTML هستش.
2. **Modules:** یک ماژول انگولار مجموعه‌ای از بلوک‌های ساخت پایه انگولار مثل کامپوننت، directive ها service ها و غیره هستش. یک برنامه کاربردی به قطعات منطقی تقسیم میشه و هر قطعه کد به عنوان "ماژول" ازش استفاده میشه که یه وظیفه رو انجام میده.
3. **Templates:** این نماهای یک برنامه Angular را نشان میده.
4. **Services:** برای ایجاد مؤلفه هایی استفاده می شه که می تونن تو کل برنامه به اشتراک گذاشته شن.
5. **Metadata:** از این مورد می تونیم برای اضافه کردن داده های بیشتر به یک کلاس Angular استفاده کنیم.

**[فهرست](#فهرست)**

6. ### directives ها چیا هستن؟

directives ها رفتاری را به یک عنصر DOM موجود یا یک نمونه جزء موجود اضافه می کنند.
directive ها رفتاری رو به یه کامپوننت DOM موجود یا یک نمونه جزء موجود اضافه می کنن.

<span dir="ltr" align="left">

Expand All @@ -411,7 +411,7 @@ puppeteer:

</span>

اکنون این directive رفتار عنصر HTML را با پس‌زمینه زرد مانند زیر گسترش می‌دهد
این directive رفتار عنصر HTML را با پس‌زمینه زرد رو اینطوری پیاده سازی میکنه

<span dir="ltr" align="left">

Expand All @@ -425,8 +425,8 @@ puppeteer:

7. ### کامپوننت ها چیا هستن؟

کامپوننت ها اساسی ترین بلوک سازنده رابط کاربری یک برنامه Angular هستند که درختی از اجزای Angular را تشکیل می دهند. این مؤلفه ها زیر مجموعه دستورالعمل ها هستند. برخلاف دستورات، کامپوننت‌ها همیشه دارای یک الگو هستند و تنها یک جزء را می‌توان به ازای هر عنصر در قالب نمونه‌سازی کرد.
بیایید یک مثال ساده از کامپوننت Angular را ببینیم
کامپوننت ها اساسی ترین بلوک سازنده رابط کاربری یک برنامه Angular هستن که درختی از اجزای Angular را تشکیل هستن. این مؤلفه ها زیر مجموعه دستورالعمل ها هستت. برخلاف دستورات، کامپوننت‌ها همیشه دارای یک الگون و تنها یک جزء رو میشه به ازای هر عنصر در قالب نمونه‌سازی کرد.
یک مثال ساده از کامپوننت Angular رو ببینیم

<span dir="ltr" align="left">

Expand All @@ -452,23 +452,19 @@ puppeteer:

8. ### تفاوت های بین directive و کامپوننت چیه؟

در یک یادداشت کوتاه، A component(@component) یک دستورالعمل-با-الگو است.

برخی از تفاوت های عمده به صورت جدولی ذکر شده است

| Component | Directive |
|---- | ---------
| برای ثبت یک مؤلفه، از حاشیه نویسی فراداده @Component استفاده می کنیم | برای ثبت دستورالعمل‌ها، از حاشیه‌نویسی فراداده @Directive استفاده می‌کنیم |
| کامپوننت ها معمولا برای ایجاد ویجت های UI استفاده می شوند|دستورالعمل برای افزودن رفتار به یک عنصر DOM موجود استفاده می شود |
| کامپوننت برای تقسیم برنامه به اجزای کوچکتر استفاده می شود دستورالعمل برای طراحی اجزای قابل استفاده مجدد استفاده می شود|
| فقط یک جزء می تواند در هر عنصر DOM وجود داشته باشد | بسیاری از دستورالعمل ها را می توان برای هر عنصر DOM استفاده کرد |
| @View decorator یا templateurl/template اجباری است | دستورالعمل از View استفاده نمی کند|
| برای ثبت یه کامپوننت از meta-data @Component استفاده می کنیم | برای ثبت دستورالعمل‌ها، از meta-data @Directive استفاده می‌کنیم |
| کامپوننت ها معمولا برای ایجاد ویجت های UI استفاده می شن|directive ها برای افزودن رفتار به یک عنصر DOM موجود استفاده می شن |
| کامپوننت برای تقسیم برنامه به اجزای کوچکتر استفاده می شه | دستورالعمل برای طراحی اجزای قابل استفاده مجدد استفاده می شه|
| فقط یک جزء می تواند در هر عنصر DOM وجود داشته باشه | بسیاری از دستورالعمل ها را میشه برای هر عنصر DOM استفاده کرد |
| @View decorator یا templateurl/template اجباریه | دستورالعمل از View استفاده نمی کند|

**[فهرست](#فهرست)**

9. ### template چیه؟

یک الگو یک نمای HTML است که در آن می توانید داده ها را با اتصال کنترل ها به ویژگی های یک جزء Angular نمایش دهید. می توانید الگوی جزء خود را در یکی از دو مکان ذخیره کنید. می توانید با استفاده از ویژگی template آن را به صورت درون خطی تعریف کنید، یا می توانید قالب را در یک فایل HTML جداگانه تعریف کنید و با استفاده از ویژگی templateUrl@Component decorator به آن در ابرداده کامپوننت پیوند دهید.
یک template یک نمای HTML هس که در آن می تونیم داده ها را با اتصال کنترل ها به ویژگی های یک جزء Angular نشون بدیم. می توانید الگوی جزء خود را در یکی از دو مکان ذخیره کنیم. می تونیم با استفاده از ویژگی template آن را به صورت درون خطی تعریف کینم یا می تونیم قالب را در یک فایل HTML جداگانه تعریف کنیم و با استفاده از ویژگی templateUrl@Component decorator به آن در ابرداده کامپوننت پیوند بدیم.

**Using inline template with template syntax,**

Expand Down Expand Up @@ -519,8 +515,8 @@ puppeteer:

10. ### ماژول چیه؟

ماژول ها مرزهای منطقی در برنامه شما هستند و برنامه به ماژول های جداگانه تقسیم می شود تا عملکرد برنامه شما را از هم جدا کند.
بیایید مثالی از **app.module.ts** ماژول ریشه ای را که با دکوراتور **@NgModule** به شرح زیر اعلام شده است، بیاوریم.
ماژول ها مرزهای منطقی تو برنامه هستن و برنامه به ماژول های جداگانه تقسیم می شن که عملکرد برنامه رو از هم جدا کنن.
بیاین مثالی از **app.module.ts** ماژول core را که با دکوراتور **@NgModule** بزنیم.


<span dir="ltr" align="left">
Expand All @@ -541,19 +537,19 @@ puppeteer:

</span>

دکوراتور NgModule پنج گزینه مهم (در میان همه) دارد
1. گزینه imports برای وارد کردن ماژول های وابسته دیگر استفاده می شود. BrowserModule به طور پیش فرض برای هر برنامه زاویه ای مبتنی بر وب مورد نیاز است
2. گزینه declarations برای تعریف اجزا در ماژول مربوطه استفاده می شود
3. گزینه bootstrap به Angular می گوید که کدام کامپوننت را در برنامه بوت استرپ کند
4. گزینه providers برای پیکربندی مجموعه ای از اشیاء تزریقی موجود در انژکتور این ماژول استفاده می شود.
5. گزینه enterComponents مجموعه ای از اجزایی است که به صورت پویا در view بارگذاری می شوند.
دکوراتور NgModule پنج گزینه مهم ( میان همه) داره
1. گزینه imports برای وارد کردن ماژول های وابسته دیگر استفاده می شه. BrowserModule به طور پیش فرض برای هر برنامه انگولار مبتنی بر وب لازمه
2. گزینه declarations برای تعریف اجزا تو ماژول مربوطه استفاده می شه
3. گزینه bootstrap به Angular می گه که کدام کامپوننت را در برنامه بوت استرپ کنه
4. گزینه providers برای پیکربندی مجموعه ای از اشیاء تزریقی موجود در انژکتور این ماژول استفاده می شن.
5. گزینه enterComponents مجموعه ای از اجزاییه که به صورت پویا در view بارگذاری می شن.

**[فهرست](#فهرست)**

11. ### lifecycle های مربوط به انگولار چیا هستن؟

برنامه Angular مجموعه کاملی از فرآیندها را طی می کند یا از زمان شروع تا پایان برنامه یک چرخه حیات دارد.
نمایش چرخه حیات در نمایش تصویری به شرح زیر است:
Angular مجموعه کاملی از فرآیندها را طی می کند یا از زمان شروع تا پایان برنامه یک lifecycle دارد.
نمایش lifecycle رو متونیم تو شکل زیر ببینیم:

![ScreenShot](images/lifecycle.png)

Expand Down

0 comments on commit 8c1dfe5

Please sign in to comment.