رابط کاربری تنها مهمترین بخش برنامه شماست، زیرا برای کاربران، برنامه کاربردی است. هیچ چیز دیگری مهم نیست. در این دوره آموزشی، شما یاد میگیرید که چگونه با استفاده از Angular یک رابط کاربری آسان، موثر، کارآمد و قابل نگهداری ارائه دهید.
آنچه یاد خواهید گرفت:
در هسته هر پروژه Angular نحوه تعامل کاربر با برنامه است. در این دوره آموزشی، ساخت رابط کاربری با Angular، یاد خواهید گرفت که چگونه یک رابط کاربری آسان، موثر، کارآمد و قابل نگهداری ارائه دهید. ابتدا، عناصر مختلف دخیل در رابط کاربری Angular را یاد خواهید گرفت. در مرحله بعد، نحوه ساختار و توسعه یک رابط با استفاده از آن عناصر را بررسی خواهید کرد. در نهایت، متوجه خواهید شد که چگونه میتوانید هر کاری را که نیاز دارید انجام دهید، در حالی که عملکرد و معماری کمپیوندی را حفظ میکنید. وقتی این دوره را به پایان رساندید، دانش و مهارتهایی را خواهید داشت که به شما در حرکت به سمت Angular Awesomeness کمک میکند!
نمونه ویدیوی آموزشی ( زیرنویسها جدا از ویدیو است و میتوانید آنرا نمایش ندهید ) :
[ENGLISH]
01 Course Overview [2mins]
01-01 Course Overview [2mins]
02 Getting Started [4mins]
02-01 Getting Started [4mins]
03 Understanding the Available Building Blocks [22mins]
03-01 Introduction [2mins]
03-02 Components [2mins]
03-03 @Input Decorator on a Property Setter [4mins]
03-04 Checking for @Output Property Subscribers [5mins]
03-05 Manipulating the UI with Directives [5mins]
03-06 Altering Data Presentation with Pipes [3mins]
03-07 Wrap Up [1mins]
04 Querying the UI [36mins]
04-01 Introduction [0mins]
04-02 Templates and TemplateRefs [2mins]
04-03 Querying the UI via ViewChild(ren) and ContentChild(ren) [4mins]
04-04 TempateRef Selectors [4mins]
04-05 ViewContainerRefs [4mins]
04-06 HTMLElement as ElementRefs [1mins]
04-07 ElementRef Selector Options - Read [6mins]
04-08 ElementRef Selector Options - Descendants [8mins]
04-09 ElementRef via Dependency Injection [0mins]
04-10 QueryLists for Collections of UI Items [6mins]
04-11 Wrap Up [1mins]
05 Manipulating the UI [52mins]
05-01 Introduction [1mins]
05-02 View Encapsulation [7mins]
05-03 Shadow Piercing - Bypassing Shadow DOM [4mins]
05-04 Building Custom Pipes - Dynamic Display Manipulation [3mins]
05-05 Directive Selectors - More Than Just Attributes [6mins]
05-06 Host Binding - Manipulating a Parent from a Child [6mins]
05-07 Host Listening - Responding to a Parent From a Child [4mins]
05-08 NativeElement and Renderer2 are NOT Bad [2mins]
05-09 Getting and Using NativeElement Properly [7mins]
05-10 JQuery as an Angular Anti-pattern [11mins]
05-11 Wrap Up [1mins]
06 Creating a Dynamic UI [47mins]
06-01 Introduction [1mins]
06-02 Using Built-in Content Projection [8mins]
06-03 Wrapping Content in ngContainer [2mins]
06-04 Building Templates with ngTemplate [1mins]
06-05 ngIf-Else with ngTemplate [3mins]
06-06 Rendering Content with ngTemplateOutlet [2mins]
06-07 Dynamic Content with ngTemplateOutletContext [6mins]
06-08 Component Inheritance [10mins]
06-09 Dynamic Component Creation [2mins]
06-10 Overview of the Widget Framework [3mins]
06-11 Creating Dynamic Components Declaratively with ngComponentOutlet [5mins]
06-12 Creating Dynamic Components Programmatically with ComponentFactoryResolver [4mins]
07 Keeping Your DOM Clean [16mins]
07-01 Introduction [2mins]
07-02 Component Attribute Selectors [3mins]
07-03 ngIf to Minimize DOM Size [3mins]
07-04 ngSwitch Bloat [6mins]
07-05 Shadow DOM [1mins]
07-06 Wrap Up [1mins]
08 Improving Performance of the UI [39mins]
08-01 Introduction [2mins]
08-02 A Better UI for Async Loading [3mins]
08-03 Pipes and Performance [5mins]
08-04 A Better ngFor [5mins]
08-05 Instant Caching with Memoizing [8mins]
08-06 A First Look at Angular`s Lifecycle Hooks [4mins]
08-07 Working with Angular`s Lifecycle Hooks [12mins]
08-08 Wrap Up [0mins]
09 Security in the Angular UI [15mins]
09-01 Introduction [1mins]
09-02 Understanding the Threat [3mins]
09-03 Default Security [5mins]
09-04 Bypassing the Default Security [6mins]
09-05 Wrap Up [0mins]
10 Bringing It All Together: Building Dynamic Forms [36mins]
10-01 Introduction / What We`re Building [4mins]
10-02 Defining the Form in Metadata [3mins]
10-03 Generating the Field UI [10mins]
10-04 Loading and Saving Data [9mins]
10-05 Validating the Field Data [9mins]
10-06 Wrap Up [1mins]
11 Wrap up: Use Cases and Final Thoughts [8mins]
11-01 Introduction [2mins]
11-02 Error Handling Scenarios [3mins]
11-03 Personalization Scenarios [1mins]
11-04 UI Goodness Scenarios [2mins]
[فارسی]
01 بررسی اجمالی دوره [2 دقیقه]
01-01 بررسی اجمالی دوره [2 دقیقه]
02 شروع به کار [4 دقیقه]
02-01 شروع به کار [4 دقیقه]
03 درک بلوکهای ساختمانی موجود [22 دقیقه]
03-01 مقدمه [2 دقیقه]
03-02 اجزاء [2 دقیقه]
03-03 @Input Decorator در Property Setter [4 دقیقه]
03-04 بررسی مشترکین @Output Property [5 دقیقه]
03-05 دستکاری رابط کاربری با دستورالعملها [5 دقیقه]
03-06 تغییر ارائه دادهها با لولهها [3 دقیقه]
03-07 جمعبندی [1 دقیقه]
04 درخواست از رابط کاربری [36 دقیقه]
04-01 مقدمه [0mins]
04-02 الگوها و TemplateRefs [2 دقیقه]
04-03 جستجوی رابط کاربری از طریق ViewChild(ren) و ContentChild(ren) [4 دقیقه]
04-04 انتخابگرهای TempateRef [4 دقیقه]
04-05 ViewContainerRefs [4 دقیقه]
04-06 HTMLElement به عنوان ElementRefs [1 دقیقه]
04-07 گزینههای انتخابگر ElementRef - خواندن [6 دقیقه]
04-08 گزینههای انتخابگر ElementRef - Descendants [8 دقیقه]
04-09 ElementRef از طریق تزریق وابستگی [0 دقیقه]
04-10 QueryLists برای مجموعه موارد UI [6 دقیقه]
04-11 جمعبندی [1 دقیقه]
05 دستکاری رابط کاربری [52 دقیقه]
05-01 مقدمه [1 دقیقه]
05-02 مشاهده کپسوله کردن [7 دقیقه]
05-03 سوراخ کردن سایه - دور زدن سایه DOM [4 دقیقه]
05-04 ساخت لولههای سفارشی - دستکاری نمایشگر پویا [3 دقیقه]
05-05 انتخابگرهای دستورالعمل - بیش از ویژگیها [6 دقیقه]
05-06 اتصال میزبان - دستکاری والدین از یک کودک [6 دقیقه]
05-07 گوش دادن میزبان - پاسخ دادن به والدین کودک [4 دقیقه]
05-08 NativeElement و Renderer2 بد نیستند [2 دقیقه]
05-09 دریافت و استفاده صحیح از NativeElement [7 دقیقه]
05-10 JQuery به عنوان یک ضد الگوی زاویهای [11 دقیقه]
05-11 جمعبندی [1 دقیقه]
06 ایجاد یک رابط کاربری پویا [47 دقیقه]
06-01 مقدمه [1 دقیقه]
06-02 استفاده از پروجکشن محتوای داخلی [8 دقیقه]
06-03 بستهبندی محتوا در ngContainer [2 دقیقه]
06-04 ساخت قالب با ngTemplate [1 دقیقه]
06-05 ngIf-Else با ngTemplate [3 دقیقه]
06-06 ارائه محتوا با ngTemplateOutlet [2 دقیقه]
06-07 محتوای پویا با ngTemplateOutletContext [6 دقیقه]
06-08 وراثت مؤلفه [10 دقیقه]
06-09 ایجاد مؤلفه پویا [2 دقیقه]
06-10 نمای کلی فریمورک ویجت [3 دقیقه]
06-11 ایجاد اجزای پویا به صورت اعلامی با ngComponentOutlet [5 دقیقه]
06-12 ایجاد کامپوننتهای پویا به صورت برنامه ریزی شده با ComponentFactoryResolver [4 دقیقه]
07 DOM خود را تمیز نگه دارید [16 دقیقه]
07-01 مقدمه [2 دقیقه]
07-02 انتخابگرهای ویژگی مؤلفه [3 دقیقه]
07-03 ngIf برای به حداقل رساندن اندازه DOM [3 دقیقه]
07-04 ngSwitch Bloat [6 دقیقه]
07-05 Shadow DOM [1 دقیقه]
07-06 جمعبندی [1 دقیقه]
08 بهبود عملکرد رابط کاربری [39 دقیقه]
08-01 مقدمه [2 دقیقه]
08-02 رابط کاربری بهتر برای بارگیری غیرهمگام [3 دقیقه]
08-03 لولهها و عملکرد [5 دقیقه]
08-04 A Better ngFor [5 دقیقه]
08-05 حافظه پنهان فوری با حفظ کردن [8 دقیقه]
08-06 اولین نگاه به قلابهای چرخه زندگی Angular [4 دقیقه]
08-07 کار با Angulars Lifecycle Hooks [12 دقیقه]
08-08 جمعبندی [0 دقیقه]
09 امنیت در رابط کاربری Angular [15 دقیقه]
09-01 مقدمه [1 دقیقه]
09-02 درک تهدید [3 دقیقه]
09-03 امنیت پیش فرض [5 دقیقه]
09-04 دور زدن امنیت پیشفرض [6 دقیقه]
09-05 جمعبندی [0 دقیقه]
10 همه چیز را با هم جمع میکنیم- ایجاد فرمهای پویا [36 دقیقه]
10-01 مقدمه آنچه میسازیم [4 دقیقه]
10-02 تعریف فرم در متادیتا [3 دقیقه]
10-03 ایجاد رابط کاربری فیلد [10 دقیقه]
10-04 بارگیری و ذخیره دادهها [9 دقیقه]
10-05 اعتبارسنجی دادههای فیلد [9 دقیقه]
10-06 جمعبندی [1 دقیقه]
11 جمع بندی- از موارد و افکار نهایی استفاده کنید [8 دقیقه]
11-01 مقدمه [2 دقیقه]
11-02 سناریوهای رسیدگی به خطا [3 دقیقه]
11-03 سناریوهای شخصیسازی [1 دقیقه]
11-04 سناریوهای خوب رابط کاربری [2 دقیقه]
دیو یکی از بنیانگذاران و مدیر ارشد فناوری Heirloom Software است، استارت آپی که از فناوری (شامل طراحی تجربه کاربر، توسعه اپلیکیشن و رشتههای کلان داده) استفاده میکند تا دنیای تاریخ خانواده و تبارشناسی را متحول کند. او بیش از 20 سال است که "با کامپیوتر کار میکند"، 11 بار MVP مایکروسافت و توسعه دهنده وب تمام پشته، مربی و نویسنده با تمرکز بر جاوا اسکریپت، NodeJS، DBs اسناد و #C است. او به طور منظم در کنفرانسهای فنی و تبارشناسی ارائه میدهد.