• Post category:StudyBullet-17
  • Reading time:13 mins read

Angular 17 for Juniors: Building Real World Application
Harness the Power of Angular 17 with Real World App and RxJS with TypeScript for Seamless Web Development

What you will learn

Fundamentals of Web Development

Introduction to Angular

Building Full Real-World Project for Your Portfolio

Use PrimeNG library

Services and Dependency Injection

Routing and Navigation

HTTP and API Integration

Deployment and Hosting

Best Practices and Industry Standards

TypeScript and Fully Typed Application

Purchase by adults only (+18)

Description

Are you ready to embark on an exciting journey into the world of web development? Our “Introduction to Angular for Juniors” course is the perfect starting point for young learners interested in building dynamic and interactive web applications. Designed with beginners in mind, this course will equip students with the essential skills to create modern web experiences using Angular, one of the most popular front-end frameworks in the industry.

The course is intended for purchase by adults only (+18) due to the possibility of display adult content during project development

Course Highlights:


Get Instant Notification of New Courses on our Telegram channel.


  • Learn the Basics: We’ll begin with a solid foundation in web development, covering HTML, CSS, and JavaScript fundamentals to ensure every student is on the same page.
  • Master Angular Concepts: Dive into Angular’s powerful features, including components, templates, data binding, and more, through hands-on exercises and real-world projects.
  • Build Real-World Application: What sets our course apart is the opportunity to work on real-world project. You won’t just be learning theory; you’ll be building practical, hands-on web applications that can be showcased in your portfolio.
  • Collaborative Learning: Engage with your peers, share ideas, and work on group projects to foster teamwork and problem-solving skills.
  • Instructor Guidance: Our experienced instructors are dedicated to your success. They’ll provide clear explanations, answer questions, and offer valuable insights throughout the course.
  • Prepare for the Future: Gain skills that are in high demand in the tech industry, setting a strong foundation for future career opportunities.

Here’s a breakdown of what they can expect to learn:

  1. Fundamentals of Web Development:
    • Understanding the basics of HTML, CSS, and JavaScript.
    • Setting up a development environment.
  2. Introduction to Angular:
    • What Angular is and its importance in modern web development.
    • The Angular architecture and key concepts.
  3. Components and Templates:
    • Creating components and templates to build the user interface of web applications.
    • Using data binding to connect components and templates.
  4. Directives and Pipes:
    • Understanding directives like ngIf and ngFor.
    • Using pipes for data transformation and formatting.
  5. Services and Dependency Injection:
    • Creating and using services to manage data and application logic.
    • Implementing dependency injection to make services available to components.
  6. Routing and Navigation:
    • Setting up routing to create multi-page applications.
    • Implementing navigation between different views.
  7. HTTP and API Integration:
    • Making HTTP requests to fetch data from external sources.
    • Handling responses and displaying data in the application.
  8. Testing and Debugging:
    • Debugging Angular applications effectively.
  9. Optimization and Performance:
    • Strategies for Optimizing Angular applications for speed and efficiency.
  10. Deployment and Hosting:
    • Deploying Angular apps to web hosting services or platforms like GitHub Pages.
  11. Real-World Projects:
    • Applying learned concepts to build real-world web application.
    • Encouraging students to work on projects that interest them.
  12. Best Practices and Industry Standards:
    • Teaching coding best practices and adherence to industry standards in Angular development.

Join me on this exciting journey into the world of web development with Angular. Whether you’re just starting or looking to expand your skills, this course will empower you to create dynamic and engaging web applications while actively working on real-world projects that demonstrate your proficiency. Enroll now and take your first step towards becoming a web development pro!

English
language

Content

Introduction

Introduction
What is Angular?
Course Requirements
This is Angular: Modules, Components and Services
If You Get stuck and Having Errors

Environment and Development Tools

Mac: Installing HomeBrew
Installing NodeJS – NVM
Installing Angular
Creating the Project
Running the Application
Installing Code Editor
Project Architecture
Installing Prettier
Installing ESLint
Extensions To Speed Up The Coding Productivity

Project API

What is API?
JSON Format
Getting the Movies data – API Registration
Triggering API’s Requests via ThunderClient
Different API’s Resources

Application Initialization

Design Overview and Page Structure
Installing and Configuring Fonts
Styles Initialization – Important
Installing Grid System – PrimeFlex
Application Header Component
Application Logo and Navigation
Application Footer Component – Date Pipe
Section Code

Application Home Page

Home Page Component and Routing
Slider Component
Slider Component Layout
Slider Styling
Install Icons Library – Prime Icons
Getting Popular Movies
Show the Data in Frontend
Wrap in a Service
Use Async Pipe
Loop Over Items using ngFor
ngIf for Conditional Rendering
Loop Over the Movies ngFor To Create the Slides
Define Movie Model
Create Slides With Real Data
Getting the Images in Movies API
Change Slide Every 5 Seconds
Slider Animation – Animation Basics
Code Refactoring
Section Code

Home Page Movies and TV Shows Banners

Banner Component
Show Item Component
Get The Required Services
Use Inputs for Components
Call the Banners for Different Movies Types
Code Refactoring for Services
Use RxJS Map to Stream Different output
Limit to Specific Amount of Movies
TV Shows Banner
TV Shows Type and Use Same Banner Component
Section Code

Movie and TV Show Detail Page

Show Detail Component and Routing
Routing by Movie – TVShow Id
Reading Route Parameter Value
Get Movie By Id
Reuse Slider Component as Header
Disable Slider Switching for Header Use
Install PrimeNG Component library
Resolving Dependency Versions – Update Angular
Continue Library Installation and Use Tab View Component
Styling the Tab View
Overview Tab
Videos Tab – Videos Service
Videos Tab – Video Embed Component
Videos Tab – Bypass URL Security
Photos Tab – Image Preview on Click
Cast – Use Carousel Component to Display Actors
If..else in HTML of Component – Default Actor Image
Section Code

Movies List Page

Section Overview
Discover Search Movies/TV Shows API
Create Search Movies Service
Create Shows List Component
Show Search API Results and Use Show Item
Use Search Component
Data Binding – ngModel
Component Events – onChange
Use Search Value in Search Service
Use Popular Movies as Default Search Value
Add Pagination Component
Pass Page Number to API from Paginator
Keep Search Value on Pagination
Get Total Results Value To Paginator
Section Code

Genres Page

Genres Page Component
Genres API & Service
Genres Page Layout
Display the Genres from API
Get Movies By Genre API and Service
Display Movies on Clicked Genre
Routing to Specific Genre
Reroute to same component with different Id
Homework
Section Code

Application Deployment

Application Build
Deploy to a Standard Host Using FTP
Deploy to Github Pages
Fix Github Pages – Base URL

Welcome to Angular World!

Final Words and Next Steps
Bonus Lecture