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

آموزش کامل فریمورک Angular 5

دسته بندی ها: آموزش های Packtpub ، آموزش طراحی وب ، آموزش تایپ اسکریپت (TypeScript) ، آموزش جاوااسکریپت (Javascript) ، آموزش انگولار (AngularJS)

فریمورک Angular 5 آخرین نسخه Angular 2 است. در این دوره با تمام نکات این فریمورک از راه اندازی تا استقرار، کامپوننت ها، Directives، سرویس ها، فرم ها، Http Access، تایید هویت، بهینه سازی اپلیکیشن Angular با ماژول ها و کامپایل آفلاین، نحوه استقرار اپلیکیشن، نحوه استفاده از Angular CLI، ویژگی های یک پروژه کامل، مبانی Angular و غیره آشنا می شوید. Angular یکیاز جدیدترین فریمورک های مدرن، عملکردی و قدرتمند است که می توانید امروز یاد بگیرید. با آن می توان اپلیکیشن های وب ساخت که تجربه کاربری بسیار جذاب ارائه می دهد. TypeScript زبان اصلی استفاده شده توسط تیم Angular  و زبان این دوره آموزشی است. این یک سوپرست برای جاوا اسکریپت است و باعث می شود نوشتن اپلیکیشن های Angular  بسیار آسان شود.

سرفصل:

  • معرفی دوره
  • راه اندازی پروژه
  • Angular چیست؟
  • Angular و Angular 2 و Angular 4
  • TypeScript چیست؟
  • کامپوننت ها و ایجاد آنها
  • Databinding چیست؟
  • درک Directives
  • اعمال کلاس های CSS به صورت پویا با ngClass
  • برنامه ریزی اپلیکیشن
  • اضافه کردن یک نوار ناوبری
  • کار با ShoppingListComponent
  • اشکال زدایی
  • درک پیام های خطای Angular
  • ایجاد Properties سفارشی
  • درک View Encapsulation
  • درک چرخه عمر کامپوننت
  • ngFor و ngIf Recap
  • درک ngSwitch
  • اضافه کردن مسیرهای ویرایش
  • و غیره
آیا این نوشته را دوست داشتید؟
Angular 5 (formerly Angular 2) - The Complete Guide [Video] Publisher:Packtpub Author:Maximilian Schwarzmüller Duration:24 hours 57 minutes

Master Angular (Angular 2+, incl. Angular 5) and build awesome, reactive web apps with the successor of Angular.js
This course starts from scratch, you neither need to know Angular 1 nor Angular 2! Angular 5 is simply the latest version of Angular 2. Join the most comprehensive and popular Angular course, because now is the time to get started! From Setup to Deployment, this course covers it all! You'll learn all about Components, Directives, Services, Forms, Http Access, Authentication, Optimizing an Angular App with Modules and Offline Compilation and much more - and in the end: you'll learn how to deploy an application! But that's not all! This course will also show you how to use the Angular CLI and features a complete project, which allows you to practice the things learned throughout the course! Angular is one of the most modern, performance-efficient and powerful frontend frameworks you can learn as of today. It allows you to build great web apps which offer awesome user experiences! Learn all the fundamentals you need to know to get started developing Angular applications right away. TypeScript is the main language used by the official Angular team and the language you'll mostly see in Angular tutorials. It's a superset to JavaScript and makes writing Angular apps really easy. Using it ensures, that you will have the best possible preparation for creating Angular apps. Check out the free videos for more information.
Style and Approach
This course will teach you all the fundamentals about modules, directives, components, databinding, routing, HTTP access and much more! We will take a lot of deep dives and each section is backed up with a real project. All examples showcase the features Angular offers and how to apply them correctly.
Released: Monday, April 23, 2018
Getting Started
Course Introduction
What is Angular?
Angular vs Angular 2 vs Angular 4
Project Setup and First App
Editing the First App
The Course Structure
How to get the Most out of the Course
What is TypeScript?
A Basic Project Setup using Bootstrap for Styling
The Basics
Module Introduction
How an Angular App gets Loaded and Started
Components are Important!
Creating a New Component
Understanding the Role of AppModule and Component Declaration
Using Custom Components
Creating Components with the CLI & Nesting Components
Working with Component Templates
Working with Component Styles
Fully Understanding the Component Selector
What is Databinding?
String Interpolation
Property Binding
Property Binding vs String Interpolation
Event Binding
Passing and Using Data with Event Binding
Two-Way-Databinding
Combining all Forms of Databinding
Understanding Directives
Using ngIf to Output Data Conditionally
Enhancing ngIf with an Else Condition
Styling Elements Dynamically with ngStyle
Applying CSS Classes Dynamically with ngClass
Outputting Lists with ngFor
Getting the Index when using ngFor
Course Project - The Basics
Project Introduction
Planning the App
Setting up the Application
Creating the Components
Using the Components
Adding a Navigation Bar
Creating a "Recipe" Model
Adding Content to the Recipes Components
Outputting a List of Recipes with ngFor
Displaying Recipe Details
Working on the ShoppingListComponent
Creating an "Ingredient" Model
Creating and Outputting the Shopping List
Adding a Shopping List Edit Section
Wrap Up & Next Steps
Debugging
Understanding Angular Error Messages
Debugging Code in the Browser Using Sourcemaps
Using Augury to Dive into Angular Apps
Components & Databinding Deep Dive
Module Introduction
Splitting Apps into Components
Property & Event Binding Overview
Binding to Custom Properties
Assigning an Alias to Custom Properties
Binding to Custom Events
Assigning an Alias to Custom Events
Custom Property and Event Binding Summary
Understanding View Encapsulation
More on View Encapsulation
Using Local References in Templates
Getting Access to the Template & DOM with @ViewChild
Projecting Content into Components with ng-content
Understanding the Component Lifecycle
Seeing Lifecycle Hooks in Action
Lifecycle Hooks and Template Access
Getting Access to ng-content with @ContentChild
Wrap Up
Course Project - Components & Databinding
Introduction
Adding Navigation with Event Binding and ngIf
Passing Recipe Data with Property Binding
Passing Data with Event and Property Binding (Combined)
Allowing the User to Add Ingredients to the Shopping List
Directives Deep Dive
Module Introduction
ngFor and ngIf Recap
ngClass and ngStyle Recap
Creating a Basic Attribute Directive
Using the Renderer to build a Better Attribute Directive
Using HostListener to Listen to Host Events
Using HostBinding to Bind to Host Properties
Binding to Directive Properties
What Happens behind the Scenes on Structural Directives?
Building a Structural Directive
Understanding ngSwitch
Course Project – Directives
Building and Using a Dropdown Directive
Using Services & Dependency Injection
Module Introduction
Why would you Need Services?
Creating a Logging Service
Injecting the Logging Service into Components
Creating a Data Service
Understanding the Hierarchical Injector
How many Instances of Service Should It Be?
Injecting Services into Services
Using Services for Cross-Component Communication
Course Project - Services & Dependency Injection
Introduction
Setting up the Services
Managing Recipes in a Recipe Service
Using a Service for Cross-Component Communication
Adding the Shopping List Service
Using Services for "Push Notifications"
Adding Ingredients to Recipes
Passing Ingredients from Recipes to the Shopping List (via a Service)
Changing Pages with Routing
Module Introduction
Why do we need a Router?
Setting up and Loading Routes
Navigating with Router Links
Understanding Navigation Paths
Styling Active Router Links
Navigating Programmatically
Using Relative Paths in Programmatic Navigation
Passing Parameters to Routes
Fetching Route Parameters
Fetching Route Parameters Reactively
An Important Note about Route Observables
Passing Query Parameters and Fragments
Retrieving Query Parameters and Fragments
Practicing and some Common Gotchas
Setting up Child (Nested) Routes
Using Query Parameters – Practice
Configuring the Handling of Query Parameters
Redirecting and Wildcard Routes
Outsourcing the Route Configuration
An Introduction to Guards
Protecting Routes with canActivate
Protecting Child (Nested) Routes with canActivateChild
Using a Fake Auth Service
Controlling Navigation with canDeactivate
Passing Static Data to a Route
Resolving Dynamic Data with the resolve Guard
Understanding Location Strategies
Wrap Up
Course Project – Routing
Planning the General Structure
Setting up Routes
Adding Navigation to the App
Marking Active Routes
Fixing Page Reload Issues
Child Routes: Challenge
Adding Child Routing Together
Configuring Route Parameters
Passing Dynamic Parameters to Links
Styling Active Recipe Items
Adding Editing Routes
Retrieving Route Parameters
Programmatic Navigation to the Edit Page
One Note about Route Observables
Understanding Observables
Module Introduction
Analysing a Built-in Angular Observable
Building & Using a First Simple Observable
Building & Using a Custom Observable from Scratch
Unsubscribe!
Where to learn more
Using Subjects to Pass AND Listen to Data
Understanding Observable Operators
Wrap Up
Course Project – Observables
Improving the Reactive Service with Observables (Subjects)
Handling Forms in Angular Apps
Module Introduction
Why do we Need Angular's Help?
Template-Driven (TD) vs Reactive Approach
An Example Form
TD: Creating the Form and Registering the Controls
TD: Submitting and Using the Form
TD: Understanding Form State
TD: Accessing the Form with @ViewChild
TD: Adding Validation to check User Input
TD: Using the Form State
TD: Outputting Validation Error Messages
TD: Set Default Values with ngModel Property Binding
TD: Using ngModel with Two-Way-Binding
TD: Grouping Form Controls
TD: Handling Radio Buttons
TD: Setting and Patching Form Values
TD: Using Form Data
TD: Resetting Forms
Introduction to the Reactive Approach
Reactive: Setup
Reactive: Creating a Form in Code
Reactive: Syncing HTML and Form
Reactive: Submitting the Form
Reactive: Adding Validation
Reactive: Getting Access to Controls
Reactive: Grouping Controls
Reactive: Arrays of Form Controls (FormArray)
Reactive: Creating Custom Validators
Reactive: Using Error Codes
Reactive: Creating a Custom Async Validator
Reactive: Reacting to Status or Value Changes
Reactive: Setting and Patching Values
Course Project – Forms
Introduction
TD: Adding the Shopping List Form
Adding Validation to the Form
Allowing the Selection of Items in the List
Loading the Shopping List Items into the Form
Updating existing Items
Resetting the Form
Allowing the the User to Clear (Cancel) the Form
Allowing the Deletion of Shopping List Items
Creating the Template for the (Reactive) Recipe Edit Form
Creating the Form for Editing Recipes
Syncing HTML with the Form
Adding Ingredient Controls to a Form Array
Adding new Ingredient Controls
Validating User Input
Submitting the Recipe Edit Form
Adding a Delete and Clear (Cancel) Functionality
Redirecting the User (after Deleting a Recipe)
Adding an Image Preview
Providing the Recipe Service Correctly
Deleting Ingredients and Some Finishing Touches
Using Pipes to Transform Output
Introduction & Why Pipes are Useful
Using Pipes
Parametrizing Pipes
Where to learn more about Pipes
Chaining Multiple Pipes
Creating a Custom Pipe
Parametrizing a Custom Pipe
Example: Creating a Filter Pipe
Pure and Impure Pipes (or: How to "fix" the Filter Pipe)
Understanding the "async" Pipe
Making Http Requests
Introduction & How Http Requests Work in SPAs
Example App & Backend Setup
Sending Requests (Example: POST Request)
Adjusting Request Headers
Sending GET Requests
Sending a PUT Request
Transform Responses Easily with Observable Operators (map())
Using the Returned Data
Catching Http Errors
Using the "async" Pipe with Http Requests
Course Project – Http
Introduction
Setting up Firebase as a Dummy Backend
Sending PUT Requests to Save Data
GETting Back the Recipes
Transforming Response Data to Prevent Errors
Authentication & Route Protection in Angular Apps
Module Introduction
How Authentication Works in Single-Page-Applications
Creating a Signup Page and Route
Setting up the Firebase SDK
Signing Users Up
Signin Users In
Requiring a Token (on the Backend)
Sending the Token
Checking and Using Authentication Status
Adding a Logout Button
Route Protection and Redirection Example
Wrap Up
Using Angular Modules & Optimizing Apps
Module Introduction
The Idea behind Modules
Understanding the App Module
Understanding Feature Modules
Creating a Recipe Feature Module
Registering Routes in a Feature Module
Understanding Shared Modules
Creating a Shared Module
Creating a Shopping List Feature Module
Loading Components via Selectors vs Routing
A Common Gotcha
Creating the Auth Feature Module
Understanding Lazy Loading
Adding Lazy Loading to the Recipes Module
How Modules and Services Work Together
Understanding the Core Module
Creating a Basic Core Module
Restructuring Services to use the Child Injector
Using Ahead-of-Time Compilation
How to use AoT Compilation with the CLI
Preloading Lazy Loaded Routes
Wrap Up
Deploying an Angular App
Module Introduction
Deployment Preparations and Important Steps
Example: Deploying to AWS S3
Bonus: The HttpClient
Module Introduction
The Documentation
Unlocking
Request Configuration and Response
Requesting Events
Settings Headers
Http Parameters
Progress
Interceptors
Modifying Requests in Interceptors
Multiple Interceptors
Wrap Up
Bonus: Working with NgRx in our Project
Module Introduction
State Challenges
Getting Started with Reducers
Adding Actions
Finishing the First Reducer
Registering the Application Store
Selecting Data from State
Dispatch Actions
More Actions and Adding Ingredients
Dispatching Update and Deleting Shopping List Actions
Expanding App State
Editing the Shopping-List via NgRx
Managing all Relevant State
Authentication and Side Effects – Introduction
Setting up the Auth Store Files
The Reducer
Adding Reducer Logic & Actions
Adjusting the App Module Setup
Using Authentication
Dispatch Actions
Getting State Access in Http Interceptor
Handling the Auth Token
Only React to Actions Once via take(1)
A Closer Look at Effects
Auth Effects and Actions
Effects - How they Work
Adding Auth Signup
Adding Auth Signin
Navigation as a Side Effect
Handling Logout via NgRx
Additional Fixes
Redirecting Upon Logout
What's Next?
The Router Store Package
Store Devtools
Lazy Load and Dynamic Injection
Adding Recipe Actions
Adding Recipe Reducers
Dispatching and Selecting State
Viewing and Deleting Recipes via NgRx
Editing and Updating Recipes via NgRx
Recipes Side Effects - Fetching from Server
Recipes Side Effects - Storing Recipes on Server
Cleaning Up
Wrap Up
Bonus: Angular Universal
Module Introduction
A Look at the Prequisites
Creating the Server Main File (main.server.ts)
Working on the tsconfig Configuration
Handling SSR as a New App (in .angular-cli.json)
Creating the Server
Wrap Up
Angular Animations
Introduction
Setting up the Starting Project
Animations Triggers and State
Switching between States
Transitions
Advanced Transitions
Transition Phases
The "void" State
Using Keyframes for Animations
Grouping Transitions
Using Animation Callbacks
A Basic Introduction to Unit Testing in Angular Apps
Introduction
Why Unit Tests?
Analysing the Testing Setup (as created by the CLI)
Running Tests (with the CLI)
Adding a Component and some fitting Tests
Testing Dependencies: Components and Services
Simulating Async Tasks
Using "fakeAsync" and "tick"
Isolated vs Non-Isolated Tests
Course Roundup
Course Roundup
Custom Project & Workflow Setup
Introduction
Initializing the Project
Setting up the Basic Project Files
Installing the Core Dependencies
Filling the Project Files with Some Life
index.html & Polyfills
Installing Development Dependencies
Setting up a Development Workflow
Finishing & Using the Development Workflow
Setting up a Production Workflow
Adding Types & Fixing Bugs
Finishing Touches

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