• Post category:StudyBullet-4
  • Reading time:11 mins read




Your Best and Fastest Guide to Learn Angular with Real-World Practical Example

What you will learn

 

Build a Great Movies Web Application with Angular, PrimeNG and Real Movies API

 

An actual real-world project built in a linear and progressive manner

 

Great Division of the course for busy developers

 

Understand the terminology and concepts of Angular Architecture

 

Build Angular Components and Make them reusable.

 

Services and grab data from real-world API

 

Discover Web design patterns used by experienced engineers

Description

Angular is a great frontend JavaScript & TypeScript framework which helps you to build powerful web applications for any goal.

There are big amount of courses that dive deeply into Angular which theory and hard to follow but sometimes you just want to build an entire app and see how it all works in practice. And this how I am building my courses always and my motto is LEARN BY DOING , this how I built my experience as a developer,

I don’t like to do theoretical things, I like to do something Practical!

I always develop Real-World Applications and I want you to try that with me. Because sometimes you want to build the app and use all these great third-party packages that can add a lot of awesome functionalities to your Angular app!

This course covers exactly that!

We’ll build an entire, real app which looks absolutely beautiful, uses PrimeNG Components Library and is extremely fast!

 

So the main technologies which we are going to cover are: 

– Angular 13, And Structuring your Project

– PrimeNg Material Library

– RXJS

– SCSS

– TypeScript

 

What will you learn in this course?

– Setting up the environment which will help you to be 99% productive while coding.


Get Instant Notification of New Courses on our Telegram channel.


– The right extensions which you need to use for your code editor.

– Learn What are Angular Modules, Components, Pipes and Services.

– How to use Angular CLI (Command Line Interface).

– How to Structure you Angular Code in efficient way.

– How to build Angular Components and Make them reusable.

– Build Angular Services and grab data from real-world API

– Learn how to use API’s and how to read data from them.

– Use HTTP services and Methods (GET, POST)

– Angular Routers and how to pass parameters through URL’s

– How to make everything Typed and avoid run time errors.

– Create your own UI-Components from scratch to be able to use them any where (eg. Slider)

– Discover Web design patterns used by experienced engineers

– Building Responsive Application using a CSS Grid System

– Install and use PrimeNG Component Library and use Amazing Components for the Application.

– How to create a pagination for your data and load the data as page blocks.

– Tabs, Carousel, Sliders, Pagination, Video Player and Image Gallery.

– Build a Search feature for data in your app

– Build and Deploy Angular applications.

 

English
language

Content

Introduction
Introduction
What is Angular?
How to Use this Course
If You Get stuck and Having Errors
Components, Modules, Services in Angular
Tools and Environment
Installing our Coding Editor (IDE)
Installing NodeJs
Installing Angular
Creating the Project
Running the Application
Extensions To Speed Up Our Coding Productivity
Discovering the API
Getting The Movies Data – Movies API Registration
Installing Thunder Client and Discovering the API
Start Building the Movies Catalog
Normalize.css – Reset Browser CSS
Installing Fonts
Installing a Grid System
Configure Prettier
Code
Application Shell
Angular Components – Application Header
Templating Header Component
Styling Header Component
Application Footer
Home Page and Movies Pages
Add Routes
Create Movies Service
Service for Getting Popular Movies
Display the API Data in Home Page
Section Code
Home Page Slider Banner
Silder Component
Silder Component Layout
Silder Banner Styling – Background
Silder Banner Styling – Meta
Using Material Icons
Use Component Inputs to Pass the Movies Data
Loop Over the Movies ngFor To Create the Slides
Define Movie Model
Replace Slider Fields With Real Movies Data
Slider Animation – Install Angular Animation
Slider Animation – Animation Basics
Show and Hide Slides Based on Index
Setting Slide Timer
Section Code
Home Page Movies – TV Shows
Items Banner Component
Item Component
Get The Required Services
Renaming a Component – What to Consider
Rendering with Real Data
Getting Smaller Poster Sizes for Fast Loading
Adjust Types for Movie and MovieDto
Adjust the Services to Return Specific Number of Movies
Section Code
Movies Page
Movies Page Layout
Add Movies Pagination To Service
Install PrimeNG Components Library
Add Pagination Component
Navigate Through Pagination
Section Code
Movie Detail Page
Movie Detail Component
Movie Page Router and Pass Movie ID as Parameter
Get Movie ID from the URL
Movie Detail Service
Use the Slider as a Top Banner
Use Tabs Component
Override Styling of the Tabs
Movie Overview Tab
Movie Trailers Service
Embed YouTube Player For Trailers
Switch Between Video Trailer Resources
Don’t Use Functions in Angular Templates!
Movie Photos and Image Preview
Show Movie Actors in Carousel Component
Finishing The Subscription to Avoid the Memory Leak
Section Code
Movies Categories
Movies Categories Page
Route and Get Movies By Category
Get Movies By Category Service
Section Code
Search Movies
Search Movie Input
Reading the Search Value
Adjust Search Movie Service
Section Code
Finishing Up!
Build the Application for Production
Upload The App to Server
Before Finishing the Course – Apply the Same on TV Shows
Full Project Code
Bonus