آموزش AngularDart: ساخت برنامه های وب پویا با Angular و Dart [ویدئو]

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

معرفی Introduction

• مقدمه - دوره آموزشی برای چه کسی است Introduction - Who's the Course For

• ساختار دوره چگونه است How's The Course Structured

• AngularDart - انگیزه AngularDart - Motivation

IntelliJ Idea را نصب کنید Install IntelliJ Idea

• IntelliJ Idea را نصب کنید Install IntelliJ Idea

فقط برای کاربران ویندوز - راه اندازی توسعه ویندوز For Windows Users ONLY – Windows Development Setup

• آنچه در این بخش پوشش خواهیم داد What We'll Cover in This Section

• راه اندازی توسعه ویندوز برای AngularDart Windows Development Setup for AngularDart

فقط برای کاربران MAC - راه اندازی توسعه MAC برای AngularDart For MAC Users ONLY – MAC Development Setup for AngularDart

• راه اندازی توسعه MAC MAC Development Setup

• راه اندازی توسعه MAC MAC Development Setup

• Dart SDK و Path را در MAC تنظیم کنید - اجرای یک برنامه Dart Set up Dart SDK and Path on MAC - Running a Dart App

• Dart SDK و Path را در MAC تنظیم کنید - اجرای یک برنامه Dart Set up Dart SDK and Path on MAC - Running a Dart App

فقط برای کاربران MAC - راه اندازی توسعه MAC برای AngularDart For MAC Users ONLY – MAC Development Setup for AngularDart

AngularDart - یک مرور کلی و انگیزه AngularDart – An Overview and Motivation

• آنچه در این بخش پوشش خواهیم داد What We'll Cover in This Section

• آنچه در این بخش پوشش خواهیم داد What We'll Cover in This Section

• مروری کوتاه بر معماری زاویه ای A Brief Angular Architecture Overview

• مروری کوتاه بر معماری زاویه ای A Brief Angular Architecture Overview

• TODO AngularDart Project Walkthrough TODO AngularDart Project Walkthrough

• TODO AngularDart Project Walkthrough TODO AngularDart Project Walkthrough

• ساخت اپلیکیشن Make It Rain Creating a Make It Rain App

• ساخت اپلیکیشن Make It Rain Creating a Make It Rain App

• باران را بساز - قالب درون خطی Make It Rain - Inline Template

• باران را بساز - قالب درون خطی Make It Rain - Inline Template

• بخشنامه ngIf ngIf Directive

• بخشنامه ngIf ngIf Directive

• Data Binding - بررسی اجمالی Data Binding - Overview

• Data Binding - بررسی اجمالی Data Binding - Overview

• ویژگی NgStyle صحافی و تغییر رنگ متن NgStyle Property Binding and Changing Text Color

• ویژگی NgStyle صحافی و تغییر رنگ متن NgStyle Property Binding and Changing Text Color

AngularDart - یک مرور کلی و انگیزه AngularDart – An Overview and Motivation

شیرجه عمیق به دستورالعمل های AngularDart Deep Dive into AngularDart Directives

• پروژه بازسازی برای چندین مؤلفه Restructuring Project for Multiple Components

• پروژه بازسازی برای چندین مؤلفه Restructuring Project for Multiple Components

• ngIf - یک Boolean را برای نمایش متن تغییر دهید ngIf - toggle a Boolean to Show Text

• ngIf - یک Boolean را برای نمایش متن تغییر دهید ngIf - toggle a Boolean to Show Text

• استفاده از خصوصیت پنهان Binding VS ngIf Using the Hidden Property Binding VS ngIf

• استفاده از خصوصیت پنهان Binding VS ngIf Using the Hidden Property Binding VS ngIf

• ngبرای دستورالعمل و شاخص ngFor Directive and Index

• ngبرای دستورالعمل و شاخص ngFor Directive and Index

• استفاده از ngClass برای پیوند بیشتر کلاس‌های CSS Using ngClass to Bind More CSS Classes

• استفاده از ngClass برای پیوند بیشتر کلاس‌های CSS Using ngClass to Bind More CSS Classes

• با استفاده از ngStyle Directive Using ngStyle Directive

• با استفاده از ngStyle Directive Using ngStyle Directive

• تنظیم ngStyle از روش Component Setting ngStyle from Component's Method

• تنظیم ngStyle از روش Component Setting ngStyle from Component's Method

• استفاده از ngFor Directive با TrackBy Using ngFor Directive with TrackBy

• استفاده از ngFor Directive با TrackBy Using ngFor Directive with TrackBy

• نمای کلی - دستورالعمل ها - مقدمه ای بر ایجاد دستورالعمل های ویژگی های سفارشی Overview - Directives - Introduction to Creating Custom Attribute Directives

• نمای کلی - دستورالعمل ها - مقدمه ای بر ایجاد دستورالعمل های ویژگی های سفارشی Overview - Directives - Introduction to Creating Custom Attribute Directives

• ایجاد دستورالعمل های ویژگی سفارشی شده Creating Customized Attribute Directives

• ایجاد دستورالعمل های ویژگی سفارشی شده Creating Customized Attribute Directives

• اجرای دستورالعمل سفارشی textZoom Implementing textZoom Custom Directive

• اجرای دستورالعمل سفارشی textZoom Implementing textZoom Custom Directive

• دستورالعمل سفارشی - افزودن اتصال داده های ورودی Custom Directive - Adding Input data Binding

• دستورالعمل سفارشی - افزودن اتصال داده های ورودی Custom Directive - Adding Input data Binding

شیرجه عمیق به دستورالعمل های AngularDart Deep Dive into AngularDart Directives

چالش - دستورالعمل های سفارشی CHALLENGE – Custom Directives

• ایجاد یک دستورالعمل سفارشی - برجسته Create a Custom Directive - Highlighter

• ایجاد یک دستورالعمل سفارشی - برجسته Create a Custom Directive - Highlighter

• راه حل: دستورالعمل سفارشی - هایلایتر SOLUTION: Custom Directive - Highlighter

• راه حل: دستورالعمل سفارشی - هایلایتر SOLUTION: Custom Directive - Highlighter

چالش - دستورالعمل های سفارشی CHALLENGE – Custom Directives

ساخت قطعات قابل استفاده مجدد Building Reusable Components

• قطعات قابل استفاده مجدد Reusable Components

• قطعات قابل استفاده مجدد Reusable Components

• قابلیت استفاده مجدد از قطعات - توضیح داده شده است Reusability of Components - Explained

• قابلیت استفاده مجدد از قطعات - توضیح داده شده است Reusability of Components - Explained

• ایجاد یک مؤلفه قابل استفاده مجدد - با استفاده از ویژگی ورودی Creating a Reusable Component - Using Input Property

• ایجاد یک مؤلفه قابل استفاده مجدد - با استفاده از ویژگی ورودی Creating a Reusable Component - Using Input Property

• Binding یکی دیگر از ویژگی های ورودی Binding Another Input Property

• Binding یکی دیگر از ویژگی های ورودی Binding Another Input Property

• شرح صحافی ویژگی ورودی Binding Description Input Property

• شرح صحافی ویژگی ورودی Binding Description Input Property

• افزایش رویدادها با جریان در یک جزء قابل استفاده مجدد Raising Events with Streams in a Reusable Component

• افزایش رویدادها با جریان در یک جزء قابل استفاده مجدد Raising Events with Streams in a Reusable Component

• افزودن نام مستعار به تمام خصوصیات ورودی و خروجی Adding Alias to All Input and Output Properties

• افزودن نام مستعار به تمام خصوصیات ورودی و خروجی Adding Alias to All Input and Output Properties

• انتقال داده های رویداد Passing Event Data

• انتقال داده های رویداد Passing Event Data

• ویژگی های ورودی، خروجی - خلاصه Input, Output Properties - Summary

• ویژگی های ورودی، خروجی - خلاصه Input, Output Properties - Summary

ساخت قطعات قابل استفاده مجدد Building Reusable Components

چالش - اجزای قابل استفاده مجدد CHALLENGE – Reusable Components

• افزودن Bootstrap-glyphicon به پروژه Adding Bootstrap-glyphicon to Project

• افزودن Bootstrap-glyphicon به پروژه Adding Bootstrap-glyphicon to Project

• کامپوننت Final Like چگونه باید رفتار کند How the Final FacebookLike Component Should Behave

• کامپوننت Final Like چگونه باید رفتار کند How the Final FacebookLike Component Should Behave

چالش - اجزای قابل استفاده مجدد CHALLENGE – Reusable Components

راه حل - اجزای قابل استفاده مجدد SOLUTION – Reusable Components

• راه حل چالش کامپوننت FacebookLike FacebookLike Component Challenge Solution

• راه حل چالش کامپوننت FacebookLike FacebookLike Component Challenge Solution

راه حل - اجزای قابل استفاده مجدد SOLUTION – Reusable Components

AngularDart – خدمات HTTP – مصرف اطلاعات از راه دور AngularDart – HTTP Services – Consuming Remote Data

• آنچه در این بخش پوشش خواهیم داد What We'll Cover in This Section

• آنچه در این بخش پوشش خواهیم داد What We'll Cover in This Section

• دریافت داده از API - قسمت 1 Getting Data from API - Part 1

• دریافت داده از API - قسمت 1 Getting Data from API - Part 1

• دریافت داده از API - تجزیه JSON با استفاده از json Decode Getting Data from API - Parsing JSON Using json Decode

• دریافت داده از API - تجزیه JSON با استفاده از json Decode Getting Data from API - Parsing JSON Using json Decode

• نمایش داده ها در یک لیست Showing Data in a List

• نمایش داده ها در یک لیست Showing Data in a List

• استفاده از چرخه زندگی Hook OnInit برای پر کردن لیست Using Life Cycle Hook OnInit to Populate List

• استفاده از چرخه زندگی Hook OnInit برای پر کردن لیست Using Life Cycle Hook OnInit to Populate List

• جداسازی نگرانی ها - ایجاد کد سرویس و نظافت Separation of Concerns - Creating a Service and Cleaning Code

• جداسازی نگرانی ها - ایجاد کد سرویس و نظافت Separation of Concerns - Creating a Service and Cleaning Code

• راه اندازی Firebase Firebase Setup

• راه اندازی Firebase Firebase Setup

• ایجاد اپلیکیشن و پایگاه داده Firebase Create Firebase App And Database

• ایجاد اپلیکیشن و پایگاه داده Firebase Create Firebase App And Database

• راه اندازی پروژه Firebase و افزودن اولین مورد به پایگاه داده بیدرنگ Setting Up Firebase Project and Adding First Item to Realtime Database

• راه اندازی پروژه Firebase و افزودن اولین مورد به پایگاه داده بیدرنگ Setting Up Firebase Project and Adding First Item to Realtime Database

• نمایش همه موارد از Firebase - نگاشت JSON به اشیاء دارت Showing All Items from Firebase - Mapping JSON to Dart Objects

• نمایش همه موارد از Firebase - نگاشت JSON به اشیاء دارت Showing All Items from Firebase - Mapping JSON to Dart Objects

• اختیاری - اضافه کردن بوت استرپ به پروژه OPTIONAL - Adding Bootstrap to the Project

• اختیاری - اضافه کردن بوت استرپ به پروژه OPTIONAL - Adding Bootstrap to the Project

• نمایش دانش آموز اضافه شده درست هنگام افزودن - روش Future.Then Showing added Student Right When Added - Future.Then Method

• نمایش دانش آموز اضافه شده درست هنگام افزودن - روش Future.Then Showing added Student Right When Added - Future.Then Method

• حذف موارد - رفع مشکل Deleting items - Problem Fix

• حذف موارد - رفع مشکل Deleting items - Problem Fix

• در قسمت جلو و عقب حذف کنید Delete in Front and Back End

• در قسمت جلو و عقب حذف کنید Delete in Front and Back End

• به روز رسانی دانشجو - قسمت 1 Update Student - Part 1

• به روز رسانی دانشجو - قسمت 1 Update Student - Part 1

• به روز رسانی نهایی دانشجویی Update Student Final

• به روز رسانی نهایی دانشجویی Update Student Final

AngularDart – خدمات HTTP – مصرف اطلاعات از راه دور AngularDart – HTTP Services – Consuming Remote Data

AngularDart - فرم ها AngularDart – Forms

• فرم ها - مقدمه Forms - Introduction

• فرم ها - مقدمه Forms - Introduction

• فرم ها - ایجاد فرم های بوت استرپ Forms - Creating Bootstrap Forms

• فرم ها - ایجاد فرم های بوت استرپ Forms - Creating Bootstrap Forms

• فرم ها - صحافی دو طرفه در یک فرم Forms - Two-Way Binding in a Form

• فرم ها - صحافی دو طرفه در یک فرم Forms - Two-Way Binding in a Form

• افزودن اعتبار - قسمت 1 Adding Validation - Part 1

• افزودن اعتبار - قسمت 1 Adding Validation - Part 1

• تغییر Div در صورت معتبر بودن Changing Div if Valid

• تغییر Div در صورت معتبر بودن Changing Div if Valid

• پاک کردن فرم با مدل Clearing our Form with Model

• پاک کردن فرم با مدل Clearing our Form with Model

• ارسال فرم با ngSubmit - قسمت 1 Submitting the Form with ngSubmit - Part 1

• ارسال فرم با ngSubmit - قسمت 1 Submitting the Form with ngSubmit - Part 1

• نمایش داده های مدل بسته به بولی ارسالی Showing Model Data Depending on Submitted Boolean

• نمایش داده های مدل بسته به بولی ارسالی Showing Model Data Depending on Submitted Boolean

AngularDart - فرم ها AngularDart – Forms

AngularDart - لوله ها AngularDart – Pipes

• معرفی لوله ها Pipes Introduction

• معرفی لوله ها Pipes Introduction

• لوله ها - انگیزه و کاری که انجام می دهند Pipes - Motivation and What They Do

• لوله ها - انگیزه و کاری که انجام می دهند Pipes - Motivation and What They Do

• با استفاده از UpperCase Pipe Using UpperCase Pipe

• با استفاده از UpperCase Pipe Using UpperCase Pipe

• لوله - لوله خرما Pipes - Date Pipe

• لوله - لوله خرما Pipes - Date Pipe

• پارامترسازی یک لوله Parameterizing a Pipe

• پارامترسازی یک لوله Parameterizing a Pipe

• لوله ها و پارامترهای ارز Currency Pipes and Parameters

• لوله ها و پارامترهای ارز Currency Pipes and Parameters

• لوله های زنجیر زنی Chaining Pipes

• لوله های زنجیر زنی Chaining Pipes

• ایجاد لوله های سفارشی Creating Custom Pipes

• ایجاد لوله های سفارشی Creating Custom Pipes

AngularDart - لوله ها AngularDart – Pipes

مسیریابی در AngularDart Routing in AngularDart

• ماژول روتر - مقدمه Router Module - Introduction

• ماژول روتر - مقدمه Router Module - Introduction

• مراحل ایجاد مسیریابی مسیریابی Steps to Creating Routing Navigation

• مراحل ایجاد مسیریابی مسیریابی Steps to Creating Routing Navigation

• پیکربندی مسیرها - قسمت 1 Configure Routings - Part 1

• پیکربندی مسیرها - قسمت 1 Configure Routings - Part 1

• ایجاد Route و RoutePaths Creating Route and RoutePaths

• ایجاد Route و RoutePaths Creating Route and RoutePaths

• اضافه کردن مسیرها به نوار مرورگر و رفتن به الگو - قسمت 1 Adding Paths to Browser Bar and Navigate to Template - Part 1

• اضافه کردن مسیرها به نوار مرورگر و رفتن به الگو - قسمت 1 Adding Paths to Browser Bar and Navigate to Template - Part 1

• افزودن لینک های دکمه بوت استرپ Adding Bootstrap Button Links

• افزودن لینک های دکمه بوت استرپ Adding Bootstrap Button Links

• اضافه کردن RouterLinkActive Adding RouterLinkActive

• اضافه کردن RouterLinkActive Adding RouterLinkActive

• ایجاد مدل دانشجویی و پر کردن قالب StudentList و مسیر پیش‌فرض Creating Student Model and Populating StudentList Template and Default Route

• ایجاد مدل دانشجویی و پر کردن قالب StudentList و مسیر پیش‌فرض Creating Student Model and Populating StudentList Template and Default Route

• افزودن صفحه یافت نشد Adding Page Not Found

• افزودن صفحه یافت نشد Adding Page Not Found

• تغییر مسیر Redirect

• تغییر مسیر Redirect

مسیریابی در AngularDart Routing in AngularDart

ماژول روتر - قسمت 2 Router Module – Part 2

• پارامترهای مسیر و ناوبری - مقدمه Route Params and Navigation - Introduction

• پارامترهای مسیر و ناوبری - مقدمه Route Params and Navigation - Introduction

• تغییر ساختار لیست دانشجویان Restructuring Student List

• تغییر ساختار لیست دانشجویان Restructuring Student List

• نمایش اعلامیه های ساختگی Showing Dummy Announcements

• نمایش اعلامیه های ساختگی Showing Dummy Announcements

• اضافه کردن NavBar - Bootstrap Adding NavBar - Bootstrap

• اضافه کردن NavBar - Bootstrap Adding NavBar - Bootstrap

• کامپوننت دانشجویی و مسیر را تنظیم کنید Set up Student Component and Route

• کامپوننت دانشجویی و مسیر را تنظیم کنید Set up Student Component and Route

• راه اندازی الگوی لیست دانش آموز و انتخاب دانش آموز Set up Student List Template and Selecting a Student

• راه اندازی الگوی لیست دانش آموز و انتخاب دانش آموز Set up Student List Template and Selecting a Student

• ایجاد URL ناوبری دانش آموز و پاس کردن پارامتر شناسه Creating Student Navigation URL and Passing Id Param

• ایجاد URL ناوبری دانش آموز و پاس کردن پارامتر شناسه Creating Student Navigation URL and Passing Id Param

• ناوبری مؤلفه دانشجویی را تنظیم کنید Set up Student Component Navigation

• ناوبری مؤلفه دانشجویی را تنظیم کنید Set up Student Component Navigation

• ناوبری ضروری هنگامی که دانش آموز روی پارامترها کلیک کرده و در مرورگر عبور می کند Imperative Navigation When Student Clicked & Passing Params in Browser

• ناوبری ضروری هنگامی که دانش آموز روی پارامترها کلیک کرده و در مرورگر عبور می کند Imperative Navigation When Student Clicked & Passing Params in Browser

• رفع - مشکل اتصال دو طرفه Fix - Two-Way Binding Issue

• رفع - مشکل اتصال دو طرفه Fix - Two-Way Binding Issue

ماژول روتر - قسمت 2 Router Module – Part 2

پروژه نهایی - داشبورد دانش آموزی Final Project – Student dashboard

• آنچه در این بخش پوشش خواهیم داد - نسخه ی نمایشی What We'll Cover in This Section - Demo

• آنچه در این بخش پوشش خواهیم داد - نسخه ی نمایشی What We'll Cover in This Section - Demo

• ایجاد مدل های داده Creating Data Models

• ایجاد مدل های داده Creating Data Models

• Main و Index را تنظیم کنید Set up Main and Index

• Main و Index را تنظیم کنید Set up Main and Index

• همه اجزا را تنظیم کنید Set up All Components

• همه اجزا را تنظیم کنید Set up All Components

• تنظیم NavBar Setting Up the NavBar

• تنظیم NavBar Setting Up the NavBar

• مسیرها و مسیرها را تنظیم کنید Set up Routes and Paths

• مسیرها و مسیرها را تنظیم کنید Set up Routes and Paths

• Navigation to Work را تنظیم کنید Set up Navigation to Work

• Navigation to Work را تنظیم کنید Set up Navigation to Work

• نمایش همه اعلامیه ها Showing all Announcements

• نمایش همه اعلامیه ها Showing all Announcements

• نمایش همه دانش آموزان ساختگی Showing All Dummy Students

• نمایش همه دانش آموزان ساختگی Showing All Dummy Students

• اضافه کردن سبک اشاره گر Adding Pointer Style

• اضافه کردن سبک اشاره گر Adding Pointer Style

• راه‌اندازی مسیر و الگوهای جزئیات دانش‌آموز Setting up Student Details Route and Templates

• راه‌اندازی مسیر و الگوهای جزئیات دانش‌آموز Setting up Student Details Route and Templates

• راه اندازی مسیر جزئیات دانش آموز - قسمت 2 Setting Up Student Details Route - Part 2

• راه اندازی مسیر جزئیات دانش آموز - قسمت 2 Setting Up Student Details Route - Part 2

• نمایش شناسه مشخصات دانش آموز Showing Student Detail ID

• نمایش شناسه مشخصات دانش آموز Showing Student Detail ID

• تنظیم جزئیات دانش آموز و دکمه برگشت Set up Student Details and Back Button

• تنظیم جزئیات دانش آموز و دکمه برگشت Set up Student Details and Back Button

• تنظیم Add Student Component - Part 1 Set up Add Student Component - Part 1

• تنظیم Add Student Component - Part 1 Set up Add Student Component - Part 1

• افزودن مسیر دانشجویی را تنظیم کنید Set up Add Student Route

• افزودن مسیر دانشجویی را تنظیم کنید Set up Add Student Route

• افزودن دانش آموزان به لیست Adding Students to a List

• افزودن دانش آموزان به لیست Adding Students to a List

• ذخیره دانش آموزان در Firebase Saving Students to Firebase

• ذخیره دانش آموزان در Firebase Saving Students to Firebase

• نمایش همه دانش آموزان ذخیره شده از Firebase Showing All Saved Students From Firebase

• نمایش همه دانش آموزان ذخیره شده از Firebase Showing All Saved Students From Firebase

• اضافه کردن کارت Adding a Card

• اضافه کردن کارت Adding a Card

• یک دانشجو را به روز کنید Update a Student

• یک دانشجو را به روز کنید Update a Student

• یک دانش آموز را حذف کنید Delete a Student

• یک دانش آموز را حذف کنید Delete a Student

• لمس و پایان نهایی Final Touches and Finishes

• لمس و پایان نهایی Final Touches and Finishes

• تغییر مسیر و صفحه یافت نشد Redirect and Page Not Found

• تغییر مسیر و صفحه یافت نشد Redirect and Page Not Found

پروژه نهایی - داشبورد دانش آموزی Final Project – Student dashboard

توسعه اپلیکیشن AngularDart AngularDart App Development

• آنچه در این بخش پوشش خواهیم داد What We'll Cover in This Section

• آنچه در این بخش پوشش خواهیم داد What We'll Cover in This Section

• NodeJs را نصب و بررسی کنید Install & Check NodeJs

• NodeJs را نصب و بررسی کنید Install & Check NodeJs

• Main را با BrowserClient تنظیم کنید Set up Main with BrowserClient

• Main را با BrowserClient تنظیم کنید Set up Main with BrowserClient

• استقرار پروژه در میزبان Firebase Deploy Project to Firebase Host

• استقرار پروژه در میزبان Firebase Deploy Project to Firebase Host

توسعه اپلیکیشن AngularDart AngularDart App Development