آموزش مبانی زاویه ای از ابتدا و تست واحد/ادغام

سرفصل ها و درس ها

مقدمه ای بر Angular و سوالات متداول دوره Introduction to Angular & Course FAQ's

• مقدمه ای بر Angular و سوالات متداول دوره Introduction to Angular and Course FAQ's

• نصب Node.js و Visual Studio Code برای Angular Setup Node.js and Visual Studio Code installation for Angular Setup

• لطفا به ترتیب سخنرانی ها توجه داشته باشید Please Note on sequence of Lectures

اصول TypeScript برای مبتدیان TypeScript Fundamentals for Beginners

• Typescript چیست؟ چقدر با JS تفاوت دارد؟ What is Typescript? How different it is from JS?

• اهمیت کلمات کلیدی Let و Const در تایپ اسکریپت Importance of Let and Const keywords in Typescript

• استفاده از انواع در تایپ اسکریپت Types Usage in Typescript

• درک کلاس ها، روش ها و اشیاء در تایپ اسکریپت Understanding Classes,Methods and objects in Typescript

• اهمیت سازنده در تایپ اسکریپت Importance of Constructor in Typescript

• صادرات، واردات و استفاده از توابع در Typescript Exports,Imports and Functions usage in Typescript

• واسط ها و اشیاء اهمیت در تعریف قراردادها Interfaces and objects Importance in defining contracts

• استفاده از لوله ها برای توابع ناشناس Usage of Pipes for Anonymous Functions

• دانلود کد Code Download

ساخت اجزای زاویه ای برای توسعه برنامه Building Angular Components for App development

• نسخه ی نمایشی برنامه ای که در این دوره توسعه خواهیم داد Demo of the App which we will develop in this course

• فایل های کد را از کجا دانلود کنیم Where to download code files

• وابستگی های Angular CLI را نصب کرده و پروژه را ایجاد کنید Install Angular CLI dependencies and create the Project

• کامپوننت های زاویه ای چیست؟ درک نحوه ایجاد یک What are Angular Components? Understand how to create one

• Interpolation در Angular چیست و چگونه می توان از آن استفاده کرد What is Interpolation in Angular and how this can be used

• نحوه نمایش آرایه از آیتم ها در HTML با درون یابی زاویه ای How to display Array of items into HTML with Angular Interpolation

دستورالعمل‌های ساختاری و دستورالعمل‌های ng برای رابطه مؤلفه‌های فرزند والدین Structural Directives and ng Directives for Parent Child component relation

• چه چیزی در دستورالعمل های ساختاری ساخته شده است و چگونه به جمع آوری داده ها کمک می کند What are Built in Structural Directives and how it helps in populating data

• ng-directives چیست و چگونه به قرار دادن شرایط در HTML کمک می کند What are ng-directives and how it helps to put conditions in HTML

• مفهوم مولفه های فرزند و والدین را با برچسب ورودی درک کنید Understand the concept of Child and Parent Components with Input Tag

• نمونه ای از دستورالعمل های ورودی و خروجی برای برقراری ارتباط با والدین و فرزند Example of Input and Output Directives to communicate with parent and child

• با Event Binding و نحوه ایجاد رویدادهای سفارشی آشنا شوید Understand the Event Binding and how to create Custom Events

• به روز رسانی ویژگی های HTML Angular با ویژگی و رویداد Binding Updating HTML Attributes of Angular with the Property and event Binding

BootStrap CSS برای آوردن Styling به صفحات HTML Component Angular BootStrap CSS to bring Styling to Angular Component HTML Pages

• ng-templates و ng-container چیست و کجا می توان از آن به طور موثر استفاده کرد What are ng-templates and ng-container and where to use it effectively

• معرفی Boostrap و چگونگی کمک به ساخت CSS موثر Introduction to Boostrap and how it helps to build effective CSS

• قالب سفارشی بوت استرپ را برای صفحه فهرست محصولات بیاورید Bring the Custom Bootstrap template for Product List page

مسیریابی زاویه‌ای برای پیمایش صفحه و ذخیره‌سازی جلسه داده Angular Routing for Page Navigations and Data Session Storage

• Angular Routing چیست و چگونه به پیمایش بین صفحات کمک می کند What is Angular Routing and how it helps to navigate between pages

• پیوند روتر را به صفحه جزئیات محصول اضافه کنید تا در صفحه فروشگاه محصول قرار بگیرید Add Router Link to the Product details page to land on Product Shop page

• اجرای Route Params برای دریافت تاریخ خاص محصول برای ارائه Implementing Route Params to get the specific Product date to render

• برای نمایش صفحه جزئیات محصول در Angular html قالب بوت استرپ را دریافت کنید Get Bootstrap template to display Product Details page into Angular html

• قابلیت افزودن به سبد خرید را اجرا کنید و ویژگی های دکمه را در انتخاب تغییر دهید Implement Add to Cart functionality and change Button properties on Select

• نوارهای ناوبری هدر وب سایت را با قالب بوت استرپ پیاده سازی کنید Implement Website Header Navigation Bars with Bootstrap template

تزریق ارائه دهندگان خدمات زاویه ای برای داده ها به کامپوننت ها Injecting Angular Service Providers for Data into Components

• آشنایی با Angular Services و پیاده سازی فرآیند در Framework Understanding Angular Services and implementing process into Framework

• کامپوننت سبد خرید بسازید و تاریخ را از Angular Service مصرف کنید Build Cart Component and consume the date from Angular Service

• متغیرهای مرجع الگو چیست؟ و رویداد KeyUp برای گوش دادن به ورودی کاربر What are Template reference variables? And KeyUp event to listen user Input

منطق عملکردی را در متدهای Component بسازید و به صورت پویا از HTML به روز کنید Build Functional logic into Component methods and dynamically update from HTML

• پیاده سازی منطق برای بازیابی قیمت محصول از هوک ng-init Implemeting Logic to retrieve Product Price from ng-init hook

• برای به‌روزرسانی مقدار محصول با استفاده از رویداد ONKEY، منطق را پیاده‌سازی کنید Implement logic to update the Product Quantity using ONKEY Event

• منطق را برای به روز رسانی Product Total و اعمال routerLink در Checkout پیاده سازی کنید Implement logic to update the Product Total and apply routerLink to Checkout

• پیاده سازی منطق برای حذف محصولات از سبد خرید و پاک کردن کد Implment logic for Removing Products from the Cart and cleanup the code

فرم های زاویه ای را با دستورالعمل های اتصال دو طرفه ng-model ایجاد کنید Create Angular Forms with ng-model two way Binding Directives

• فرم های زاویه ای چیست - شروع کار با فرم ها What are Angular Forms- Getting Started with forms

• دستورالعمل ng-model چیست؟ ng-model را روی فرم های Angular اعمال کنید What is ng-model Directive ? Apply ng-model to the Angular forms

• ارسال فرم و ذخیره جزئیات با دستورالعمل ng-form Submitting the Form and storing the details with ng-form directive

• ایجاد کلاس Domain برای ذخیره داده های فرم برای استفاده مجدد در هر جزء Creating Domain class to store form data for reusing in any component

مصرف داده‌های Json سرویس استراحت HTTP در Angular Components برای رندر کردن Consuming HTTP Rest Service Json data into Angular Components to render

• ایجاد الگوی صفحه سپاسگزاری و پیاده سازی تغییر حالت مخفی کردن و نمایش دادن Creating Thankyou Page Template and implement toggling to Hide and unhide

• نحوه مصرف داده های Rest API در Angular App - مثال How to Consume Rest API"s data into Angular App - Example

• رابط کتاب ایجاد کرد تا پاسخ API را به شی کتاب ارسال کند Created Book Interface to cast the API response to the book object

• پیاده سازی صفحه کتابخانه با جدول با استفاده از ng-for دستورالعمل و داده های API Implement Library Page with Table using ng-for directive and API data

• ساخت صفحه اصلی به برنامه با روتر مناسب پیمایش به صفحات مربوطه Build Home page to App with proper router Navigations to respective pages

واحد تست مولفه های زاویه ای با ابزارهای Angular Bed Test Unit Testing the Angular Components with Angular Test Bed Utilities

• مقدمه ای بر تست واحد زاویه ای/ادغام و انواع آن Introduction to Angular Unit /Integration Testing and its types

• تخت تست Karma و Angular چیست و چگونه برای تست جعبه سفید استفاده می شود What is Karma and Angular Test Bed and how it used for White box testing

• Build Unit Test برای متد تعریف شده در کلاس های جزء Build Unit Test for the method defined in the component classes

• پیکربندی تخت تست و ایجاد فیکسچر HTML برای رندر کردن html در پرواز Configuring Test Bed and creating HTML fixture to render the html on fly

• مؤلفه جزئیات هشدار را با اعتبار سنجی منطقی شرط شرط ng-if آزمایش کنید Test the Alert Details Component with ng-if condition logic validation

• نحوه بارگذاری Stub Data در نمونه برای آزمایش مؤلفه به روش ایزوله How to load Stub Data into instance to test component in isolated way

از Stub Data برای آزمایش دستورالعمل های خروجی ورودی در چارچوب زاویه ای استفاده کنید Use Stub Data for Testing Input Output Directives in the Angular Framework

• آزمایش تابش‌های رویداد خروجی ورودی با داده‌های Stub مورد نیاز برای مؤلفه Testing Input Output Event emmitters with Stub data required for the component

• کلاس سرویس ساختگی را برای داده های سبد خرید ایجاد کنید تا جزء سبد خرید را به صورت مجزا آزمایش کنید Create Mock Service class for Cart data to Test Cart component in isolated

• تست ادغام را با مشاهده نتایج در مرورگر با nativeElement انجام دهید Perform Integration testing by viewing the results on browser with nativeElement

• از شی SPY برای پیاده‌سازی مؤلفه‌های Tests for Library Dashboard استفاده کنید Use SPY object to Implement Tests for Library Dashboard component

تست یکپارچه سازی برای آزمایش اجزای UI & SPY Usage شی Integration Testing to test the components on UI & SPY object Usage

• از مقدار بازگشتی برای شی Spy ایجاد شده استفاده کنید و به عنوان Mocking به Test Data تزریق کنید Use return value for created Spy object and inject into Test Data as Mocking

• اعتبارسنجی‌ها را روی فرم‌های Angular پیاده‌سازی کنید و روی مرورگرها آزمایش کنید Implement validations on Angular Forms and test on the browsers

• نحوه فعال کردن DispatchEvents با QuerySelector برای تست یکپارچه سازی را بدانید Understand how to fire DispatchEvents with QuerySelector for Integration testing

دانلود کد پروژه Project Code Download

• کد دانلود Download Code