آموزش استایل و انیمیشن‌های Angular (برای Angular 2+)

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

شروع شدن Getting Started

• معرفی Introduction

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

• آشنایی با پیش نیازها Understanding the Prerequisites

• مهم: ایجاد یک پروژه با Angular CLI Important: Creating a Project with the Angular CLI

• ایجاد پروژه (راه اندازی دوره) Creating a Project (Course Setup)

• اولین پروژه ما Our First Project

• ساختار این دوره The Structure of This Course

• چگونه از این دوره بیشترین بهره را ببرید How to get the Most out of this Course

استایل دهی پویا به برنامه های زاویه ای Styling Angular Apps Dynamically

• معرفی ماژول Module Introduction

• اضافه کردن سبک های گسترده در برنامه Adding Application-wide Styles

• بیایید سبک های کاربردی را تمرین کنیم Let's Practice Application-wide Styles

• افزودن چارچوب های CSS یا سبک های خارجی به برنامه شما Adding CSS Frameworks or External Styles to Your App

• نحوه اضافه کردن سبک های جهانی در یک پروژه CLI How to Add Global Styles in a CLI Project

• نحوه استفاده از NPM برای نصب CSS Frameworks How to use NPM to install CSS Frameworks

• درک سبک های محدوده مولفه Understanding Component-scoped Styles

• استفاده از سبک های دارای محدوده کامپوننت Using Component-Scoped Styles

• استفاده از سبک های درون خطی در کامپوننت ها Using Inline Styles in Components

• استفاده از تگ های <style> در قالب های کامپوننت Using <style> Tags in Component Templates

• تئوری پشت کپسوله سازی نمای Angular The Theory Behind Angular's View Encapsulation

• چگونه Angular Shadow DOM را شبیه سازی می کند How Angular Emulates the Shadow DOM

• تغییر رفتار کپسولاسیون نمایش Changing the View Encapsulation Behavior

• با استفاده از Native Shadow DOM Using the Native Shadow DOM

• نحوه غیرفعال کردن View Encapsulation How to Turn Off View Encapsulation

• انتخابگرهای ویژه CSS: :host Special CSS Selectors: :host

• با استفاده از فرم تابع :host Using the Function Form of :host

• یک ظاهر طراحی شده با استفاده از انتخابگر آنها Styling Components by Using their Selector

• انتخابگرهای ویژه CSS: :host-context Special CSS Selectors: :host-context

• انتخابگرهای ویژه CSS:/deep/ Special CSS Selectors: /deep/

• درک نحو ngClass Understanding ngClass Syntax

• استفاده از ngClass برای افزودن پویا کلاس های CSS Using ngClass to Add CSS Classes Dynamically

• درک نحو ngStyle Understanding ngStyle Syntax

• استفاده از ngStyle برای تنظیم پویا سبک های CSS Using ngStyle to Dynamically Adjust CSS Styles

• ngStyle: camelCase در مقابل "نام واقعی" ngStyle: camelCase vs 'real-name'

• استفاده از Angular Renderer برای تنظیم سبک های CSS Using the Angular Renderer to Adjust CSS Styles

• پروژه: مقدمه ای بر پروژه دوره Project: Introduction to the Course Project

• پروژه: افزودن استایل بوت استرپ (فریم ورک CSS) Project: Adding Bootstrap Styling (CSS Framework)

• پروژه: برنامه ریزی مراحل بعدی Project: Planning the Next Steps

• پروژه: اضافه کردن حاشیه (محدوده جزء) Project: Adding Margin (Component-scoped)

• پروژه: سبک دادن به آیتم ها در یک لیست Project: Styling Items in A List

• پروژه: به صورت پویا آیتم ها را علامت گذاری کنید Project: Dynamically Mark Items

• پروژه: چالش - تغییر وضعیت سبک Project: Challenge - Style Status Changes

• پروژه: Let's Style Status Labels Project: Let's Style Status Labels

• پروژه: سبک دادن به موارد غیرفعال و پایان کار Project: Styling Inactive Items & Finishing Touches

جابجایی اشیا با انیمیشن های CSS Moving Things with CSS Animations

• معرفی ماژول Module Introduction

• آشنایی با ویژگی CSS Transition Understanding the CSS Transition Property

• استفاده از ویژگی Transition برای اضافه کردن Transitions Using the Transition Property to Add Transitions

• اطلاعات بیشتر درباره ویژگی های CSS Transition و توابع زمان بندی More About the CSS Transition Property & Timing Functions

• پیکربندی چند انتقال Configuring Multiple Transitions

• آشنایی با ویژگی های انیمیشن CSS Understanding the CSS Animation Property

• اطلاعات بیشتر درباره ویژگی CSS Animation More About the CSS Animation Property

• استفاده از ویژگی انیمیشن برای افزودن انیمیشن Using the Animation Property to Add Animations

• پروژه: چالش شما! Project: Your Challenge!

• پروژه: پیاده سازی نوار بارگذاری متحرک Project: Implementing an Animated Loading Bar

• پروژه: انتقال رنگ های مرزی Project: Transitioning Border Colors

• پروژه: متحرک سازی انتخاب ("علامت گذاری شده") از آیتم های لیست Project: Animating the Selection ("marked") of List Items

• Transitions vs Animations vs Animations Angular Transitions vs Animations vs Angular Animations

غواصی در بسته انیمیشن Angular Diving into the Angular Animation Package

• آیا می خواهید از Angular 2 به جای Angular 4 استفاده کنید؟ Want to use Angular 2 instead of Angular 4?

• معرفی ماژول Module Introduction

• نحوه کار انیمیشن ها در Angular How Animations work in Angular

• پشتیبانی مرورگر و Polyfills Browser Support & Polyfills

• باز کردن قفل انیمیشن ها با ماژول مناسب Unlocking Animations with the Right Module

• شروع کار با محرک ها و وضعیت ها Getting Started with Triggers and States

• کدام ویژگی ها قابل انیمیت هستند؟ Which Properties are Animatable?

• تخصیص تریگرها به عناصر موجود در قالب Assigning Triggers to Elements in the Template

• تغییر حالت های ماشه به صورت پویا Switching Trigger States Dynamically

• افزودن انتقال بین ایالات Adding Transitions between States

• استفاده از چند انتقال Using Multiple Transitions

• با ایالت های بیشتر، محرک های پیچیده تر بسازید Build more Complex Triggers with More States

• پیکربندی انتقال های زیبا هنگام استفاده از بسیاری از ایالت ها Configuring Elegant Transitions When Using Many States

• قابلیت استفاده مجدد از محرک ها را درک کنید Understand the Re-Usability of Triggers

• استفاده از محرک های متعدد Using Multiple Triggers

• ایجاد انتقال چند مرحله ای Creating Multi-Step Transitions

• انتقال چند مرحله ای و سبک های موقت Multi-Step Transitions and Temporary Styles

• یک اشکال در انیمیشن های Angular 4 A Bug in Angular 4 Animations

• حالت‌ها و انیمیشن‌ها به درستی استایل‌سازی کنید Styling States and Animations Correctly

• انیمیشن های CSS در مقابل انیمیشن های زاویه ای CSS Animations vs Angular Animations

• برون سپاری انیمیشن ها Outsourcing Animations

• پروژه: چالش شما! Project: Your Challenge!

• پروژه: چالش شما! Project: Your Challenge!

• پروژه: راه اندازی انیمیشن ها Project: Setting Up Animations

• پروژه: افزودن محرک ها و حالت ها Project: Adding Triggers and States

• پروژه: اضافه کردن انتقال Project: Adding Transitions

• پروژه: استفاده از انتقال چند مرحله ای Project: Using Multi-Step Transitions

• پروژه: پاک کردن برخی از CSS Project: Cleaning Up Some CSS

• پروژه: استفاده از سبک های موقت در انتقال Project: Using Temporary Styles in Transitions

تبدیل شدن به یک حرفه ای انیمیشن های زاویه ای Becoming an Angular Animations Pro

• معرفی ماژول Module Introduction

• انیمیشن‌هایی که تا الان نمی‌توانیم بسازیم Animations We Can't Create As Of Now

• استفاده از حالت "باطل" در Transitions Using the "void" State in Transitions

• استفاده از حالت عام "*" در Transitions Using the "*" Wildcard State in Transitions

• استفاده از ویژگی های بعدی پویا Using Dynamic Dimensionial Properties

• لیست های متحرک Animating Lists

• استفاده از گروه های انیمیشن برای انیمیشن های موازی Using Animation Groups for Parallel Animations

• درک توابع زمان بندی (سهولت و غیره) Understanding Timing Functions (ease-in etc)

• همه چیز را با فریم های کلیدی انیمیشن کنترل کنید Control Everything with Animation Keyframes

• انتقال چند مرحله ای در مقابل گروه های انیمیشن در مقابل فریم های کلیدی Multi-Step Transitions vs Animation Groups vs Keyframes

• واکنش به رویدادهای انیمیشن Reacting to Animation Events

• اولین خلاصه A First Summary

• پروژه: مراحل بعدی و چالش شما Project: Next Steps & Your Challenge

• پروژه: اضافه کردن یک انیمیشن لیست پایه Project: Adding a Basic List Animation

• پروژه: ایجاد یک لیست انیمیشن بهتر با فریم های کلیدی Project: Creating a Better List Animation with Keyframes

• پروژه: ایجاد یک فهرست پلکانی Project: Creating a Staggered List

• پروژه: چیزهای کشویی در اطراف Project: Sliding Things Around

• پروژه: فهرست موارد کشویی در اطراف Project: Sliding List Items Around

• پروژه: همگام سازی انیمیشن ها Project: Synchronizing Animations

• پروژه: متحرک کردن یک دکمه بسته به اعتبار فرم Project: Animating a Button depending on Form Validity

• چگونه مسیریابی را متحرک کنیم How to Animate Routing

• پروژه: ایجاد یک انیمیشن مسیر اصلی (محو شدن به بیرون) Project: Creating a Basic Route Animation (Fade-in-out)

• پروژه: انیمیشن جذاب: یک مسیر کشویی Project: Getting Fancy: A Slide-down Route Animation

• جمع بندی پروژه Project Wrap Up

ویژگی های جدید انیمیشن با Angular 4.2 New Animation Features with Angular 4.2

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• با استفاده از روش new query() Using the new query() Method

• اطلاعات بیشتر در مورد query() More on query()

• انتخابگرهای ویژه برای query() Special Selectors for query()

• All Special Selectors & Full Query() Docs All Special Selectors & Full query() Docs

• گزینه های query(). query() Options

• ترکیب انتخابگرهای query(). Combining query() Selectors

• افزودن پرس و جو به پروژه دوره Adding Query to the Course Project

• رفع یک اشکال کوچک با query() و پروژه دوره Fixing a Small Bug with query() and the Course Project

• انیمیشن های تكان دهنده آسان با stagger() Easy Staggering Animations with stagger()

• ایجاد انیمیشن های قابل استفاده مجدد Creating Re-Usable Animations

• ایجاد و اجرای انیمیشن ها به صورت برنامه ای Creating and Running Animations Programmatically

• انیمیشن های مسیر بهبود یافته Improved Route Animations

• یک مشکل با انیمیشن های مسیر An Issue with Route Animations

• بسته شدن Wrap Up

خلاصه دوره و پاداش Course Roundup & Bonus

• خلاصه دوره Course Roundup

• امتیاز: محتوای بیشتر! Bonus: More Content!