تبلیغات

آموزش انگولار (برنامه کامل) با انگولار متریال، Angularfire و NgRx

دسته بندی ها: آموزش انگولار (AngularJS) ، سرویس های گوگل ، آموزش فایربیس (Firebase) ، آموزش طراحی وب ، آموزش های Packtpub

از انگولار، انگولار متریال، AngularFire + Firebase با Firestore و NgRx برای ساخت یک برنامه واقعی استفاده کنید.

این دوره شما را به سفری خواهد برد که در آن شما می خواهید با استفاده از انگولار ، انگولار متریال، AngularFire + Firebase با Firestore و NgRx، یک برنامه انگولار واقعی خواهید ساخت.

Angular یک چارچوب فرانت اند شگفت انگیز است که با استفاده از آن می توانید برنامه‌های قدرتمند وب بسازید. ما عملکردهای بلادرنگ پایگاه داده اضافه خواهیم کرد و تقریباً قبل از انجام بروزرسانی‌ها، آنها در اینجا می بینیم.

بسته کد این دوره ویدیویی در این آدرس قرار دارد.

دانش پایه HTML، JS و CSS مورد نیاز است و یک قسمت معرفی / یادآوری مختصر نیز در دوره ارائه می شود.

مباحث مطرح شده در دوره:

  • انگولار چیست؟
  • راه اندازی پروژه با انگولار CLI
  • نحوه شروع و کارکرد یک برنامه انگولار
  • افزودن کامپوننت‌ها
  • استفاده از Directives مانند ngFor و ngIf
  • مشخصه سفارشی و Event Binding
  • فرم‌ها
  • درک سرویس‌ها و تزریق وابستگی
  • مسیریابی انگولار
  • انگولار متریال
  • Flexbox - یادآوری سریع
  • کنترل چینش با @angular / flex-layout
  • افزودن و پیکربندی دکمه ارسال (Submit)
  • اجرای تذکر (Hint) و اعتبار سنجی خطاها (بر روی فرم)
  • افزودن Datepicker
  • موارد پیشرفته انگولار متریال
  • استایل دادن به Sidenav
  • واکنشگرا کردن صفحه
  • افزودن کامپوننت تب‌ها
  • انتقال داده به دیالوگ
  • کار با داده‌ها و انگولار متریال
  • RxJS 6
  • اداره کردن رویدادهای تکمیل (Complete) و لغو (Cancel)
  • اضافه کردن جدول داده انگولار متریال
  • استفاده از Angularfire و Firebase
  • اتصال جدول داده به Firestore
  • کار با اسناد
  • افزودن ورود کاربر
  • تنظیم قوانین امنیتی Firestore
  • مدیریت اشتراک Firestore
  • بهینه سازی اشتراک‌ها
  • مفاهیم اصلی NgRx
  • استقرار برنامه در Firebase Hosting
  • تم‌های متریال انگولار
آیا این نوشته را دوست داشتید؟
Angular (Full App) with Angular Material, Angularfire and NgRx [Video] Publisher:Packtpub Author:Maximilian Schwarzmüller Duration:10 hours 26 minutes

Use Angular, Angular Material, AngularFire (+ Firebase with Firestore), and NgRx to build a real Angular app
This course will take you on a journey where you'll you will learn to build a real Angular app using Angular, Angular Material, AngularFire (+ Firebase with Firestore), and NgRx. Angular is an amazing frontend framework with which you can build powerful web applications; we will add real-time database functionalities and see our updates almost before we make them here. This course offers a brief refresher on Angular, a detailed introduction into Angular Material, and a realistic app that uses many Angular Material components.
The code bundle for this video course is available at https://github.com/PacktPublishing/Angular-Full-App-with-Angular-Material-Angularfire-and-NgRx
Style and Approach
This exhaustive course packed with step-by-step instructions, working examples, and helpful advice is divided into clear chunks so you can learn at your own pace, build entire apps, and see how it all works in practice. Basic HTML, JS, and CSS knowledge is required and a brief introduction/ refresher module is provided in this course.
Released: Friday, October 26, 2018
Getting Started
Welcome & Introduction
What's Inside the Course?
How To Get The Most Out Of This Course
Planning the App
A Brief Angular Refresher (OPTIONAL)
Module Introduction
What is Angular?
Project Setup with the Angular CLI
How an Angular App Starts and Works
Adding Components
Template Syntax
Using Directives like ngFor and ngIf
Custom Property & Event Binding
Forms
Understanding Services & Dependency Injection
Angular Routing
Angular Material
Module Introduction
Understanding Angular Material Components
Adding Angular Material to a Project
Stay Up To Date!
Our First Angular Material Component - The Button
Creating the Course App Structure
Working on The Signup Form
Flexbox - A Quick Refresher
Controlling the Layout with @angular/flex-layout
Adding & Configuring the Submit Button
Implementing Hints and Validation Errors (on Forms)
Adding a Datepicker
Restricting Pickable Dates
Adding a Checkbox
Finishing the Form with Style
Wrap Up
Diving Deeper into Angular Material
Module Introduction
Adding Navigation & a Sidenav
Working on the Sidenav and Toolbar
Styling the Sidenav
Making the Page Responsive
Adding Navigation Items
Splitting the Navigation Into Components
Working on the Welcome Screen
Adding a Tabs Component
Adding some "Cards"
Adding a Dropdown Menu
Adding a Spinner to the Training Screen
Adding a Nice Exercise Timer
Adding a Cancel Dialog Screen
Passing Data to the Dialog
Adding "Exit" and "Continue" Options
Wrap Up
Working with Data and Angular Material
Module Introduction
Important: RxJS 6
Implementing Authentication
Routing & Authentication
Route Protection
Preparing the Exercise Data
Injecting & Using the Training Service
Setting an Active Exercise
Controlling the Active Exercise
Adding a Form to the Training Component
Handling the Active Training via a Service
Handling "Complete" and "Cancel" Events
Adding the Angular Material Data Table
Adding Sorting to the Data Table
Adding Filtering to the Data Table
Adding Pagination to the Data Table
Wrap Up
Using Angularfire & Firebase
Module Introduction
What is Firebase?
Getting Started with Firebase
What is Angularfire?
RxJS Oservables Refresher
Diving into Firebase
Listening to Value Changes (of Firestore)
Listening to Snapshot Changes (of Firestore, incl. Metadata)
Restructuring the Code
How Firebase Manages Subscriptions
Storing Completed Exercises on Firestore
Connecting the Data Table to Firestore
Working with Documents
Adding Real Authentication (Sign Up)
Adding User Login
Understanding Authentication in SPAs
Configuring Firestore Security Rules
Managing Firestore Subscriptions
Reorganizing the Code
Wrap Up
Optimizing the App
Module Introduction
Style Improvements & Error Handling
Adding a Spinner
Adding a Re-Usable Snackbar (Notification)
Improving Error Handling
Splitting the App Into Modules
Optimizing Subscriptions
Creating a SharedModule
Splitting Up Routes
Loading a Module Lazily
Moving the Auth Guard
Wrap Up
Using NgRx for State Management
Module Introduction
NgRx Core Concepts - A First Example
Working with Multiple Reducers & Actions
Dispatching Actions & Selecting State Slices
Adding an Auth Reducer (and Actions)
Adding Auth Subscriptions
Adding the Training Reducer and Actions with Payloads
Lazy Loaded State
Dispatching Training Actions
Selecting Training State
Selecting Single Values Correctly
Connecting the Data Table
Cleaning the Project Up
Adding a small Bugfix
Wrap Up
What is Redux - An Overview
Deploying the App
Introduction & Preparation
Deploying the App to Firebase Hosting
BONUS: Angular Material Themes
Module Introduction
Understanding Angular Material Themes
Customising an Angular Material Theme
BONUS: Angular Material Themes
Course Roundup

پیشنهاد فرادرس