آموزش طراحی و ساخت برنامه های کاربردی AngularJS مبتنی بر کامپوننت

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

معرفی دوره Course Introduction

• بررسی اجمالی Overview

• لینگو The Lingo

• دستور کار دوره Course Agenda

• خلاصه Summary

تغییر جهت به یک طراحی مبتنی بر مonلفه ها - تفکر زاویه ای (2+) Shifting to a Component-based Design - Angular (2+) Thinking

• بررسی اجمالی Overview

• اجزاon چیست؟ What Are Components?

• تفاوت از بخشنامه ها Difference from Directives

• کالبد شکافی یک جز Disecting a Component

• طراحی مبتنی بر مولفه Component-based Design

• سایر سیستم عامل های سلسله مراتبی Other Hiearchical Application Platforms

• مقایسه م -لفه مبتنی بر طراحی سنتی 1 Comparing Component-based to Traditional Design 1

• مقایسه م -لفه مبتنی بر طراحی سنتی 2 Comparing Component-based to Traditional Design 2

• خلاصه Summary

محیط توسعه The Development Environment

• بررسی اجمالی Overview

• تنظیم Front-end Stack Setting up the Front-end Stack

• معرفی نسخه ی نمایشی Demo Intro

• ساختار پوشه و محتوای آن Folder Structure and Contents

• VS Code و پرونده فهرست VS Code and Index File

• نصب سرور زنده Live Server Installation

• اجرای سرور زنده در محل Running Live Server on-site

• دسترسی به سرویسهای Back-end Accessing the Back-end Services

• خدمات نمایشی REST Demo REST Services

• مستندات API نسخه ی نمایشی Demo API Documentation

• خلاصه Summary

نوشتن یک جزon Writing a Component

• بررسی اجمالی Overview

• راه اندازی Live Server Starting up Live Server

• ایجاد برنامه ماژول Creating the App Module

• ایجاد کنترل کننده Creating the Controller

• ایجاد نمای Creating the View

• مسیر استاندارد را اضافه کنید Add Standard Route

• Bootstrapping و Running Bootstrapping and Running

• پرونده و پوسته کامپوننت ساده ایجاد کنید Create Simple Component File and Shell

• Component Controller و Aliasing را اضافه کنید Add Component Controller and Aliasing

• الگوی مonلفه را اضافه کنید Add Component Template

• Bootstrap و Test Run Bootstrap and Test Run

قرار دادن برنامه مبتنی بر کامپوننت Laying out Your Component-based Application

• بررسی اجمالی Overview

• برنامه The Application

• طراحی درخت مonلفه - خانه Designing a Component Tree - Home

• طراحی درخت مonلفه - دوره ها Designing a Component Tree - Courses

• طراحی یک درخت مonلفه - نویسندگان Designing a Component Tree - Authors

• ایجاد کامپوننت ریشه و تست Creating Root Component and Test

• اضافه کردن دو جز First اول کودک از ریشه Adding First Two Child Components of the Root

• افزودن کامپوننت صفحه اصلی و تست Add Home Component and Test

• نمایش لیست دوره ها در کامپوننت ریشه Show Course List on Root Component

• اجزای لیست دوره و نویسنده Course and Author List Components

• افزودن مrseلفه دوره Adding Course Component

• افزودن م Stلفه های دوره ای استاتیک Adding Static Course-contained Components

• افزودن ماژول ، توضیحات و اجزای بحث Adding Module, Description, and Discussion Components

• اجزای اتصال به دوره و آزمون Hookup Components to Course and Test

• ترفند مرز کامپوننت Component Border Trick

مسیریابی Routing

• بررسی اجمالی Overview

• مسیریابی و URL ها به عنوان بخشی از طراحی Routing and URLs as Part of Design

• روتر UI زاویه ای Angular UI Router

• مقایسه با روتر کامپوننت Comparison to Component Router

• دستگاه حالت روتر Angular UI The Angular UI Router State Machine

• معرفی نسخه ی نمایشی Demo Intro

• افزودن و ثبت حالت اول Adding and Registering the First State

• اضافه کردن دوره ها و نویسندگان ایالات Adding Courses and Authors States

• اصلاح پیوندهای ناوبری اصلی Modifying the Main Navigator Links

• جایگزین کردن Placeholder با ui-view Replacing Placeholder with ui-view

• تست در مرورگر Test in Browser

ایجاد بقیه ساختار برنامه Building Out the Rest of the App Structure

• بررسی اجمالی Overview

• ایالات با پارامترهای URL States with URL Parameters

• حالت ها و اجزای تو در تو Nested States and Components

• معرفی نسخه ی نمایشی Demo Intro

• الگوی کنترل کننده کامپوننت مشترک را تنظیم کنید Setup Common Component Controller Pattern

• پیوند به یک دوره نمونه را فعال کنید Activate the Link to a Sample Course

• اتصال به جزrse دوره را اضافه کنید Add Binding to Course Component

• افزودن حالت مسیریابی دوره Adding Course Routing State

• اطلاعات دوره را در الگو و آزمون نشان دهید Show Course Info on Template and Test

• مقدمات دوره را شروع کرده و به دیگران منتقل کنید Initialize Course Object and Pass Down to Others

• نمایش در عنوان و آزمون دوره Display in Course Heading and Test

• پیوندها را در Course Navigator فعال کنید Activate Links in Course Navigator

• حالت های مسیریابی مربوط به دوره را اضافه کنید Add the Course-relative Routing States

• ویژگی اتصال را به هر سه جز-فرعی اضافه کنید Add Binding Property to All Three Sub-components

• Routing Order of Operations را مرور کنید Review Routing Order of Operations

• ui-view و Test را اضافه کنید Add ui-view and Test

• تغییر مسیر به حالت پیش فرض و دوباره امتحان کردن Rerouting to Default State and Retest

لیست نویسنده و اجزای لیست دوره The Author List and Course List Components

• بررسی اجمالی Overview

• دسترسی به داده ها Accessing Data

• دو جز List لیست The Two List Components

• آدرس میزبان API را اضافه کرده و به کامپوننت تزریق کنید Add API Host Address and Inject into Component

• تماس های API را در مرورگر آزمایش کنید Test API Calls in Browser

• افزودن تماس API به جز-لیست دوره ها Add API Call to Course-list Component

• الگوی HTML فهرست را تنظیم کنید Setup the Course-list HTML Template

• پایان دادن به فهرست دوره های HTML Finish the Course-list HTML Rendering

• لیست دوره ها را در مرورگر امتحان کنید Test the Course-list on the Browser

• کدگذاری کامپوننت لیست نویسندگان به طور کامل Coding the Author-list Component in Full

• لیست نویسنده را در مرورگر آزمایش کنید Test Author-list in Browser

افزودن خدمات Adding Services

• بررسی اجمالی Overview

• محدوده طول عمر AngularJS Controller AngularJS Controller Lifetime Scope

• چرا خدمات؟ Why Services?

• معرفی نسخه ی نمایشی Demo Intro

• خدمات دوره ایجاد کنید Create Course Service

• عملکرد دریافت همه دوره ها را به سرویس اضافه کنید Add get-all-courses Function to Service

• تماس API را به عملکردهای سرویس اضافه کنید Add API Call to Service Functions

• Controller-list Course را به Call Service تغییر دهید Change Course-list Controller to Call Service

• لیست دوره های مبتنی بر سرویس آزمون در مرورگر Test Service-based Course-list in Browser

• ایجاد سرویس نویسنده و توابع آن Create Author Service and Its Functions

• م Useلفه فهرست نویسنده را برای استفاده از سرویس تغییر دهید Modify Author-list Component to Use Service

• لیست نویسنده مبتنی بر سرویس تست در مرورگر Test Service-based Author-list in Browser

امنیت برنامه Securing the Application

• بررسی اجمالی Overview

• امنیت در AngularJS Security in AngularJS

• امنیت کاربر User Security

• کتابخانه امنیتی Angular/Web API Angular/WebAPI Security Library

• معرفی نسخه ی نمایشی Demo Intro

• اطمینان حاصل کنید که کتابخانه امنیتی بارگیری شده است Ensure Security Library Is Loaded

• نمایش مطالب کتابخانه امنیتی Show Security Library Contents

• User-panel و Test را اضافه کنید Add User-panel and Test

• سرویس حساب کاربری را اضافه کنید Add User Account Service

• توابع را به سرویس حساب کاربر اضافه کنید Add Functions to User Account Service

• تزریق سرویس ها به جز User وضعیت کاربر Inject Services into User-status Component

• عملکرد Post-Register را به Controller اضافه کنید Add Post-register Function to Controller

• تماس و ترتیب کار را در کتابخانه توضیح دهید Explain Callback and Order of Operation in Library

• توابع ارسال و ورود به سیستم را اضافه کنید Add Post-login and Helper Functions

• تابع مقداردهی اولیه را به Controller اضافه کنید Add Initialization Function to Controller

• موارد موجود در بخش کاربر در وضعیت کاربر Wire Things up in User-status Component

• پیوندهای عملکرد را در اجزای امنیتی نشان دهید Show Function Bindings in Security Components

• ورود به سیستم و ثبت نام در مرورگر Test Login and Register in Browser

• درباره متغیرهای حالت در کتابخانه امنیت بحث کنید Discuss State Variables in Security Library

م Couلفه دوره و ساختار داخلی آن The Course Component and Its Internal Structure

• بررسی اجمالی Overview

• م Couلفه دوره Course Component

• معرفی نسخه ی نمایشی Demo Intro

• اطلاعات دوره را بازیابی کنید Retrieve Course Information

• Course Passing و API Call Call Course Passing and API Call Explanation

• دوره HTML - الگوی HTML م Couلفه Course-modules Component HTML Template

• تست در مرورگر Test in Browser

• توابع قالب بندی زمان را اضافه کنید Add Time-formatting Functions

• آزمایش در مرورگر Testing in Browser

• توضیحات دوره مonلفه و آزمون Course-description Component and Test

• مonلفه عنوان را پر کنید Fill in Course-heading Component

• م -لفه بحث دروس Course-discussion Component

• ورود به بحث در مورد دوره Course Discussion Item Entry

• وابستگی به امنیت Security Dependency

• مقدمه نسخه ی نمایشی Demo Introduction

• هوک تغییرات در مrseلفه بحث در مورد دوره On-changes Hook in Course-discussion Component

• افزودن تماس امن API به سرویس دوره Add Secure API Call to Course Service

• لیست بحث را دریافت کنید Get the Discussion List

• جزrse لیست بحث Course-discussion-list Component

• الگوی HTML مonلفه فهرست-بحث-دوره Course-discussion-list Component HTML Template

• نمایش لیست بحث و آزمون دوره Display Course Discussion List and Test

• قالب بحث تاریخ مورد Format Discussion Item Date

• مonلفه مورد بحث را ایجاد کنید Create Discussion-item Component

• دکمه و م Itemلفه مورد را به والدین اضافه کنید Add Button and Item Component to Parent

• در مرورگر تست کنید Test in the Browser

• مورد بحث را به سرویس اضافه کنید Add Discussion Item to Service

• توابع را به مonلفه بحث اضافه کنید Add Functions to Discussion Component

• عناصر بصری را به م -لفه مورد بحث اضافه کنید Add Visual Elements to Discussion-item Component

• رویدادها را از م -لفه مورد بحث بالا ببرید Raise Events from Discussion-item Component

• سیم کشی کردن رویدادها Wiring up Events

• تست افزودن نظر در مرورگر Test Add-comment in Browser

• ویژگی ورود به سیستم را به Trigger Change اضافه کنید Add Logged-in Property to Trigger Change

• تست نهایی Final Test

اجزای نویسنده و نوار کناری The Author & Sidebar Components

• بررسی اجمالی Overview

• م Authorلفه نویسنده Author Component

• م Authorلفه نوار کناری نویسنده Author Sidebar Component

• معرفی نسخه ی نمایشی Demo Intro

• اولین اهداف را در مرورگر نشان دهید Show First Goals in Browser

• برای دریافت نویسنده با خدمات تماس بگیرید Make Service Call to Get an Author

• عنوان و عنوان نویسنده عنوان Author-heading Component and Test

• نویسنده و م Authorلفه زیست Author-bio Component and Test

• م Authorلفه دوره های نویسنده را تنظیم کنید Setup the Author-courses Component

• برای دریافت دوره های نویسنده با خدمات تماس بگیرید Make Service Call to Get Author Courses

• الگوی دوره های نویسنده Author-courses Template

• بخش نویسنده آزمون به طور کامل Test Author Section in Full

• چند سازنده نوار کناری به جزrse دوره Couple Author-sidebar to Course component

• هوک تغییرات را به م toلفه Sidebar اضافه کنید Add On-changes Hook to Sidebar Component

• طول دوره و تاریخ انتشار را محاسبه کنید Calculate Course Length and Release Date

• الگوی نوار کناری را شروع کرده و مسیریابی را توضیح دهید Start Sidebar Template and Explain Routing

• الگوی نوار کناری را تمام کنید Finish Sidebar Template

• تست نهایی Final Test

جایگزینی کامپوننت صفحه اصلی با دوره های اخیر Replacing the Home Component with Recent Courses

• بررسی اجمالی Overview

• مonلفه دوره های اخیر Recent Courses Component

• اضافه کردن توابع برای افزودن دوره های اخیراً بازدید شده Add Functions to Add Recently Viewed Courses

• عملکردها را دریافت کرده و پاک کنید Get and Clear Functions in the Service

• لیست اخیر را در جز Comp دوره به روز کنید Update Recent List in Course Component

• کامپوننت جدید ایجاد کنید Create New Component

• لیست دوره های اخیر را در کامپوننت بازیابی کنید Retreive Recent Course List in Component

• الگوی اجزای دوره های اخیر را تنظیم کنید Setup Recent-courses Component Template

• محتوای الگو را پر کنید Fill in the Template Content

• نمایش کامپوننت و تست Show Component and Test

• وابستگی امنیتی را اضافه کنید و دوباره آزمایش کنید Add Security Dependency and Re-test

• پاک کردن لیست تماس و پیوند را اضافه کنید Add Clear List Call and Link

• تست نهایی Final Test

در مورد ASP.NET چطور؟ What About ASP.NET?

• بررسی اجمالی Overview

• چرا ASP.NET؟ Why ASP.NET?

• تور سایت اسکلت و صفحه آرایش Tour of Skeletal Site and Layout Page

• پوشه برنامه و محتوای آن The App Folder and Its Contents

• افزودن همه پرونده های مشاهده کننده دوره Adding All Course Viewer Files

• CSHTML Shell View را اضافه کنید Add CSHTML Shell View

• اجرای آزمایشی Test Run

• محتوای بخش اسکریپت ها Scripts-section Contents

• ماژول AngularJS را بوت استرپ کنید Bootsrapping the AngularJS Module

• تنظیم سبک ها Setting up the Styles

• با نمایش کامپوننت ریشه ، نمای را به پایان برسانید Finish View by Showing Root Component

• آزمون کامل Full Test

• رفع اشکال Null-check در کامپوننت Fixing Null-check Bug in Component

• توضیح کامل روند مسیریابی Full Routing Process Explanation

• خلاصه و خداحافظی Summary and Farewell