Angular 16 For Juniors: Building Real World Application

Harness the Power of Angular 16 with Real World App and RxJS with TypeScript for Seamless Web Development

What you'll 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)

Requirements

Basic Computer Skills

Web Fundamentals: A basic understanding of HTML, CSS, and JavaScript is beneficial.

Motivation and Enthusiasm

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 developmentCourse Highlights: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:Fundamentals of Web Development:Understanding the basics of HTML, CSS, and JavaScript.Setting up a development environment.Introduction to Angular:What Angular is and its importance in modern web development.The Angular architecture and key concepts.Components and Templates:Creating components and templates to build the user interface of web applications.Using data binding to connect components and templates.Directives and Pipes:Understanding directives like ngIf and ngFor.Using pipes for data transformation and formatting.Services and Dependency Injection:Creating and using services to manage data and application logic.Implementing dependency injection to make services available to components.Routing and Navigation:Setting up routing to create multi-page applications.Implementing navigation between different views.Forms and User Input:Building forms to collect user input.Handling form submissions and interactions.HTTP and API Integration:Making HTTP requests to fetch data from external sources.Handling responses and displaying data in the application.Authentication and Security:Implementing user authentication and authorization.Ensuring security best practices in Angular applications.Testing and Debugging:Debugging Angular applications effectively.Optimization and Performance:Strategies for optimizing Angular applications for speed and efficiency.Deployment and Hosting:Deploying Angular apps to web hosting services or platforms like GitHub Pages.Real-World Projects:Applying learned concepts to build real-world web applications.Encouraging students to work on projects that interest them.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!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 What is Angular?

Lecture 3 Course Requirements

Lecture 4 This is Angular: Modules, Components and Services

Lecture 5 If You Get stuck and Having Errors

Section 2: Environment and Development Tools

Lecture 6 Mac: Installing HomeBrew

Lecture 7 Installing NodeJS - NVM

Lecture 8 Installing Angular

Lecture 9 Creating the Project

Lecture 10 Running the Application

Lecture 11 Installing Code Editor

Lecture 12 Project Architecture

Lecture 13 Installing Prettier

Lecture 14 Installing ESLint

Lecture 15 Extensions To Speed Up The Coding Productivity

Section 3: Project API

Lecture 16 What is API?

Lecture 17 JSON Format

Lecture 18 Getting the Movies data - API Registration

Lecture 19 Triggering API's Requests via ThunderClient

Lecture 20 Different API's Resources

Section 4: Application Initialization

Lecture 21 Design Overview and Page Structure

Lecture 22 Installing and Configuring Fonts

Lecture 23 Styles Initialization - Important

Lecture 24 Installing Grid System - PrimeFlex

Lecture 25 Application Header Component

Lecture 26 Application Logo and Navigation

Lecture 27 Application Footer Component - Date Pipe

Lecture 28 Section Code

Section 5: Application Home Page

Lecture 29 Home Page Component and Routing

Lecture 30 Slider Component

Lecture 31 Slider Component Layout

Lecture 32 Slider Styling

Lecture 33 Install Icons Library - Prime Icons

Lecture 34 Getting Popular Movies

Lecture 35 Show the Data in Frontend

Lecture 36 Wrap in a Service

Lecture 37 Use Async Pipe

Lecture 38 Loop Over Items using ngFor

Lecture 39 ngIf for Conditional Rendering

Lecture 40 Loop Over the Movies ngFor To Create the Slides

Lecture 41 Define Movie Model

Lecture 42 Create Slides With Real Data

Lecture 43 Getting the Images in Movies API

Lecture 44 Change Slide Every 5 Seconds

Lecture 45 Slider Animation - Animation Basics

Lecture 46 Code Refactoring

Lecture 47 Section Code

Section 6: Home Page Movies and TV Shows Banners

Lecture 48 Banner Component

Lecture 49 Show Item Component

Lecture 50 Get The Required Services

Lecture 51 Use Inputs for Components

Lecture 52 Call the Banners for Different Movies Types

Lecture 53 Code Refactoring for Services

Lecture 54 Use RxJS Map to Stream Different output

Lecture 55 Limit to Specific Amount of Movies

Lecture 56 TV Shows Banner

Lecture 57 TV Shows Type and Use Same Banner Component

Lecture 58 Section Code

Section 7: Movie and TV Show Detail Page

Lecture 59 Show Detail Component and Routing

Lecture 60 Routing by Movie - TVShow Id

Lecture 61 Reading Route Parameter Value

Lecture 62 Get Movie By Id

Lecture 63 Reuse Slider Component as Header

Lecture 64 Disable Slider Switching for Header Use

Lecture 65 Install PrimeNG Component library

Lecture 66 Resolving Dependency Versions - Update Angular

Lecture 67 Continue Library Installation and Use Tab View Component

Lecture 68 Styling the Tab View

Lecture 69 Overview Tab

Lecture 70 Videos Tab - Videos Service

Lecture 71 Videos Tab - Video Embed Component

Lecture 72 Videos Tab - Bypass URL Security

Lecture 73 Photos Tab - Image Preview on Click

Lecture 74 Cast - Use Carousel Component to Display Actors

Lecture 75 If..else in HTML of Component - Default Actor Image

Lecture 76 Section Code

Section 8: Movies List Page

Lecture 77 Section Overview

Lecture 78 Discover Search Movies/TV Shows API

Lecture 79 Create Search Movies Service

Lecture 80 Create Shows List Component

Lecture 81 Show Search API Results and Use Show Item

Lecture 82 Use Search Component

Lecture 83 Data Binding - ngModel

Lecture 84 Component Events - onChange

Lecture 85 Use Search Value in Search Service

Lecture 86 Use Popular Movies as Default Search Value

Lecture 87 Add Pagination Component

Lecture 88 Pass Page Number to API from Paginator

Lecture 89 Keep Search Value on Pagination

Lecture 90 Get Total Results Value To Paginator

Lecture 91 Section Code

Section 9: Genres Page

Lecture 92 Genres Page Component

Lecture 93 Genres API & Service

Lecture 94 Genres Page Layout

Lecture 95 Display the Genres from API

Lecture 96 Get Movies By Genre API and Service

Lecture 97 Display Movies on Clicked Genre

Lecture 98 Routing to Specific Genre

Lecture 99 Reroute to same component with different Id

Lecture 100 Homework

Lecture 101 Section Code

Section 10: Application Deployment

Lecture 102 Application Build

Lecture 103 Deploy to a Standard Host Using FTP

Lecture 104 Deploy to Github Pages

Lecture 105 Fix Github Pages - Base URL

Section 11: Welcome to Angular World!

Lecture 106 Final Words and Next Steps

Lecture 107 Bonus Lecture

High School Students,College Freshmen,Coding Bootcamp Graduates,Junior Web Developers,Self-taught Programmers,Career Changers, People looking to change their career paths and enter the field of web development,Designers with Coding Interest,Tech-Savvy Teachers,Adults Only (+18)