Angular in Arabic The Complete Guide (2023)

Name: Angular in Arabic The Complete Guide (2023)
Rating: 4.4 (133 reviews)

Master Angular platform in Arabic and build awesome, reactive web apps.

Created byOsama Magdy, Talaat Ahmed

Last updated 4/2024

Arabic

What you'll learn

Develop modern, complex, responsive and scalable web applications with Angular
Use the gained, deep understanding of the Angular fundamentals to quickly establish yourself as a frontend developer
Fully understand the architecture behind an Angular application and how to use it
Create single-page applications with one of the most modern JavaScript frameworks out there

Course content

22 sections • 316 lectures • 27h 35m total length

Introduction0:35
What is Angular1:57
Project setup and first app6:04
Editing the First App10:35
The Course Structure4:27

Basic Project Setup using Bootstrap for Styling7:01
Where to find the Course Source Code0:41
How an Angular App gets Loaded and Started6:28
What is Components !5:46
Creating a New Component6:20
Understanding the Role of AppModule and Component Declaration5:25
Using Custom Components2:57
Creating Components with the CLI & Nesting Components5:54
Working with Component Templates3:24
Working with Component Styles5:35
Fully Understanding the Component Selector4:39
What is Databinding3:10
String Interpolation6:46
Property Binding5:30
Property Binding vs String Interpolation2:43
Event Binding4:05
Bindable Properties and Events0:21
Passing and Using Data with Event Binding.7:35
Important: FormsModule is Required for Two-Way-Binding!0:11
Two-Way-Databinding5:02
Combining all Forms of Databinding2:07
Understanding Directives3:04
Using ngIf to Output Data Conditionally5:40
Enhancing ngIf with an Else Condition2:24
Angular 17: Alternative "if" Syntax0:36
Styling Elements Dynamically with ngStyle6:59
Applying CSS Classes Dynamically with ngClass3:59
Outputting Lists with ngFor4:17
Angular 17: Alternative "for" Syntax0:42

Course Project - The Basics1:17
Planning the App6:01
Creating a New App Correctly0:19
Setting up the Application7:43
Creating the Components7:26
Using the Components5:37
Adding a Navigation Bar8:00
Creating a Recipe Model4:17
Adding Content to the Recipes Components9:01
Outputting a List of Recipes with ngFor5:59
Displaying Recipe Details8:50
Working on the ShoppingListComponent2:00
Creating an Ingredient model3:56
Creating and Outputting the Shopping List4:36
Adding a Shopping List Edit Section5:04
Wrap Up & Next Steps1:07

Notes for the last version of Angular and Typescript0:40
Module Introduction0:38
Splitting Apps into Components8:43
Property & Event Binding Overview2:05
Binding to Custom Properties9:39
Assigning an Alias to Custom Properties Binding to Custom Properties2:22
Binding to Custom Events13:52
Assigning an Alias to Custom Events1:25
Custom Property and Event Binding Summary2:31
Understanding View Encapsulation.mp44:28
More on View Encapsulation4:26
Using Local References in Templates6:29
@ViewChild() in Angular 8+0:22
Getting Access to the Template & DOM with @ViewChild6:01
Projecting Content into Components with ng-content4:43
Understanding the Component Lifecycle4:39
Seeing Lifecycle Hooks in Action21:42
Lifecycle Hooks and Template Access5:18
Getting Access to ng-content with @ContentChild5:09
Warm Up0:45

Notes for the last version of Angular and Typescript0:43
Intorduction2:46
Why would you Need Services3:52
Creating a Logging Service6:10
Injecting the Logging Service into Components8:21
Alternative Injection Syntax0:34
Creating a Data Service12:36
Understanding the Hierarchical Injector4:13
How many Instances of Service Should It Be6:04
Injecting Services into Services5:58
Using Services for Cross-Component Communication6:20
Try Different Way Of Injecting Services0:31
If you're using Angular 6+ , you can provide application-wide services in a different way.
Instead of adding a service class to the providers[] array in AppModule , you can set the following config in @Injectable() :
@Injectable({providedIn: 'root'})export class MyService { ... }
This is exactly the same as:
export class MyService { ... }
and
import { MyService } from './path/to/my.service'; @NgModule({ ... providers: [MyService]})export class AppModule { ... }
Using this syntax is completely optional, the traditional syntax (using providers[] ) will also work.
The "new syntax" does offer one advantage though: Services can be loaded lazily by Angular (behind the scenes) and redundant code can be removed automatically. This can lead to a better performance and loading speed - though this really only kicks in for bigger services and apps in general.

Notes for the last version of Angular and Typescript2:11
Module Introduction2:30
Why do we need a Router1:41
Understanding the Example Project0:10
Setting up and Loading Routes11:59
Navigating with Router Links6:54
Understanding Navigation Paths8:20
Styling Active Router Links5:50
Navigating Programmatically4:53
Using Relative Paths in Programmatic Navigation6:38
Passing Parameters to Routes3:59
Fetching Route Parameters4:40
Fetching Route Parameters Reactively11:03
An Important Note about Route Observables3:41
Passing Query Parameters and Fragments8:19
Retrieving Query Parameters and Fragments4:35
Practicing and some Common Gotchas13:25
Setting up Child (Nested) Routes6:00
Using Query Parameters - Practice10:18
Configuring the Handling of Query Parameters5:23
Redirecting and Wildcard Routes7:13
Important: Redirection Path Matching0:37
Outsourcing the Route Configuration6:02
An Introduction to Guards2:08
Protecting Routes with canActivate13:37
Protecting Child (Nested) Routes with canActivateChild4:49
Using a Fake Auth Service2:58
Controlling Navigation with canDeactivate25:27
Passing Static Data to a Route9:26
Resolving Dynamic Data with the resolve Guard13:35
Wrap Up0:48

Requirements

Basic HTML and CSS knowledge helps, but isn't a must-have
Basic JavaScript knowledge is required

Description

Get a very deep understanding of how to create Angular applications

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.

This course starts from scratch, you neither need to know Angular 1 nor Angular 2!

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!

Why Angular?

Angular is the next big deal. Being the successor of the overwhelmingly successful Angular.js framework it’s bound to shape the future of frontend development in a similar way. The powerful features and capabilities of Angular allow you to create complex, customizable, modern, responsive and user friendly web applications.

Angular 15 simply is the latest version of the Angular framework and simply an update to Angular 2.

Angular is faster than Angular 1 and offers a much more flexible and modular development approach. After taking this course you’ll be able to fully take advantage of all those features and start developing awesome applications immediately.

Due to the drastic differences between Angular 1 and Angular (=Angular 15) you don’t need to know anything about Angular.js to be able to benefit from this course and build your futures projects with Angular.

Who this course is for:

Newcomer as well as experienced frontend developers interested in learning a modern JavaScript framework
Taking this course will enable you to be amongst the first to gain a very solid understanding of Angular
This course is for everyone interested in learning a state-of-the-art frontend JavaScript framework

Angular in Arabic The Complete Guide (2023)

What you'll learn

Explore related topics

Course content

Getting Started5 lectures • 24min

The Basics29 lectures • 1hr 59min

Course Project - The Basics16 lectures • 1hr 21min

Components & Databinding Deep Dive20 lectures • 1hr 46min

Course Project - Components & Databinding6 lectures • 46min

Directives Deep Dive10 lectures • 44min

Course Project - Directives3 lectures • 10min

Services and Dependency Injection12 lectures • 58min

Course Project - Services and Dependency Injection8 lectures • 51min

Changing Pages with Routing31 lectures • 3hr 29min

Requirements

Description

Who this course is for: