آموزش فارسی انگولار (Angular)

آموزش فارسی انگولار (Angular)

آموزش فارسی Angular 

  • آموزش آنگولار (بخش اول)

 

با سلام. ما در این بخش از آموزش انگولار قصد داریم طریقه ی کار با Angular را به شما عزیزان آموزش دهیم. ما این آموزش را کاملا به صورت مبتدی و از ابتدا شروع خواهیم کرد تا برای عزیزانی که تازه شروع به یادگیری انگولار کرده اند نیز قابل فهم باشد. توجه داشته باشید با دنبال کردن این آموزش می توانید با Angular 8 نیز کار کنید.


انگولار چیست؟ | what is Angular


Angular یک فریمورک اپن سورس (open-source) است که عموما توسط Google ساخته و نگهداری می شود. این یک پلت فرم برای توسعه برنامه های وب موبایل و Desktop به ویژه برای برنامه های تک صفحه ای (SPA) است.
اخیراً ، گوگل Angular 8 را راه اندازی کرده است که مبتنی بر فریمورک TypeScript در client-side است. آنگولار 8 برای ایجاد برنامه های وب پویا استفاده می شود.

 

آموزش فارسی انگولار

آموزش فارسی آنگولار

  • آموزش آنگولار (بخش اول)


با سلام. ما در این بخش از آموزش انگولار قصد داریم طریقه ی کار با Angular را به شما عزیزان آموزش دهیم. ما این آموزش را کاملا به صورت مبتدی و از ابتدا شروع خواهیم کرد تا برای عزیزانی که تازه شروع به یادگیری انگولار کرده اند نیز قابل فهم باشد. توجه داشته باشید با دنبال کردن این آموزش می توانید با Angular 8 نیز کار کنید.


انگولار چیست؟ | Angular چیست؟


Angular یک فریمورک اپن سورس (open-source) است که عموما توسط Google ساخته و نگهداری می شود. این یک پلت فرم برای توسعه برنامه های وب موبایل و Desktop به ویژه برای برنامه های تک صفحه ای (SPA) است.
اخیراً ، گوگل Angular 8 را راه اندازی کرده است که مبتنی بر فریمورک TypeScript در client-side است. آنگولار 8 برای ایجاد برنامه های وب پویا استفاده می شود.

نسخه های قبلی که توسط Google تولید شده اند:

 

  • اولین نسخه تولید شده توسط انجمن Google ، AngularJS است که نسخه اولیه Angular است و مبتنی بر JavaScript است که کاملاً متفاوت تر از نسخه های دیگر است. نسخه اولیه در سال 2010 منتشر شد.
  • نسخه بعدی با عنوان Angular 2 منتشر شد - این یک بازنویسی کامل از AngularJS بود و در سال 2016 منتشر شد.
  • نسخه بعدی که توسط Google به روزرسانی شد، Angular 4 است.
  • سپس ، Angular 5 و Angular 6 به ترتیب در سال 2017 و 2018 به بازار عرضه شدند.
  • Angular 6 با تمرکز بر روی Angular Material منتشر و بروزرسانی شد.
  • عملکرد بهبود یافته قابل توجهی در Angular 7 در سال 2018 مشاهده شد.
  • آخرین نسخه تولید شده توسط انجمن Google ، Angular 8 است که در سال 2019 منتشر شد که در این مقاله چند ویژگی جدید از انگولار 8 را عنوان خواهیم کرد.


قبل از یادگیری موارد جدید در Angular 8 ، لازم است بدانید که AngularJS و Angular کاملاً متفاوت هستند. AngularJS مبتنی بر JavaScript است و Angular 8 مبتنی بر TypeScript است. TypeScript یک Superset جاواسکریپت تایپ شده است که کد را در JavaScript تالیف می کند. TypeScript یک object-oriented language با کلاس و رابط است. نسخه های انگولار 2 و بعد از آن در TypeScript نوشته شده اند.

 

ویژگی های جدید انگولار8

 

پیش نیازها

  • پیش نیازها برای کار با انگولار

 

حال ، اجازه دهید نگاهی به شرایط لازم برای اجرای یک برنامه Angular بیندازیم. قبل از شروع کار ، ما نیاز به پیش نیازهای زیر داریم.

 

  • NodeJS
  • npm package manager
  • یک محیط برنامه نویسی که ما از Visual Studio Code استفاده می کنیم.


پس از دانلود و نصب NodeJS ما باید Angular CLI را از طریق CMD و یا  Visual Studio Code terminal نصب کنیم. حال  Visual Studio Code terminal را باز کنید و دستور زیر را اجرا کنید:


npm install -g @angular/cli


ویژگی های جدید در انگولار

 

Terminal را باز کنید و دستور زیر را اجرا کنید.


ng new demo


انگولار چیست


پس از اجرای دستور فوق ، Terminal از شما سؤال می کند که آیا می خواهید مسیریابی را فعال کنید. مبحث مسیریابی در مقاله آینده پوشش داده خواهد شد، در اینجا Y را به جای N انتخاب کنید و استایل هایی را که می خواهیم استفاده کنیم - CSS یا SCSS را انتخاب کنید.


پس از انتخاب آن، فایلهای اصلی بارگذاری می شوند و برنامه ایجاد می شود.
برنامه ایجاد شده به منظور مشاهده خروجی اجرا می شود ، بنابراین دستور زیر را در ترمینال اجرا کنید تا خروجی برنامه را ببینید.


ng serve –open


آموزش فارسی انگولار 8


دستور فوق برای مشاهده خروجی برنامه، مرورگر را کاملاً کامپایل و باز می کند.


به یاد داشته باشید - اگر از اجرای فرمان ng serv استفاده می شود، این بدان معنی است که ما باید localhost:4200 به صورت دستی برای دیدن خروجی وارد کنیم. اگر این دستور به عنوان ng service-open اجرا شود ، تلفیق انجام می شود و مرورگر به طور خودکار localhost را برای نشان دادن خروجی باز میکند.


ایجاد پروژه انگولار


سرانجام ، یک برنامه اساسی Angular کامپایل شده است و ما در حال مشاهده خروجی از مرورگر هستیم. در مقاله بعدی ما کامپوننت هایی را که برای انجام عملیات CRUD و به اشتراک گذاری داده ها مفید هستند را پوشش خواهیم داد.


امیدواریم این مقاله برای شما مفید باشد، به خصوص کسانی که سعی دارند Angular را از ابتدا یاد بگیرند. اگر راجع به این مقاله نظری دارید، لطفاً نظر خود را عنوان کنید تا ما بتوانیم مقالات خود را از موضوعات بعدی بهبود بخشیم. با تشکر – مجموعه ABLY

 

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :شماره تماس
0713 625 1757 :شماره تماس