Watch Angular 17 for Juniors: Building Real World Application Free Online - Full Video Classroom | MJ Accedemy

Udemy – Angular 17 for Juniors: Building Real World Application 2023-9

Download Course (Free)

Lecture 17/277

00:00/00:00

Lecture 17 of 277

Project Architecture

Download Course (Free)

Course Content

0 / 277 completed

Section 1: Introduction4 videos

Introduction

29m

What is Angular

Course Requirements

This is Angular Modules, Components and Services

Section 2: Application Deployment4 videos

Application Build

15m

Deploy to a Standard Host Using FTP

11m

Deploy to Github Pages

18m

Fix Github Pages - Base URL

18m

Section 3: Welcome to Angular World!1 videos

Final Words and Next Steps

11m

Section 4: Environment and Development Tools10 videos

Mac Installing HomeBrew

Extensions To Speed Up The Coding Productivity

Installing NodeJS - NVM

20m

Installing Angular

Creating the Project

Running the Application

10m

Installing Code Editor

Project Architecture

24mNow Playing

Installing Prettier

32m

Installing ESLint

32m

Section 5: Project API5 videos

What is API

JSON Format

Getting the Movies data - API Registration

33m

Triggering API's Requests via ThunderClient

21m

Different API's Resources

14m

Section 6: Application Initialization7 videos

Design Overview and Page Structure

Installing and Configuring Fonts

31m

Styles Initialization - Important

25m

Installing Grid System - PrimeFlex

26m

Application Header Component

38m

Application Logo and Navigation

32m

Application Footer Component - Date Pipe

31m

Section 7: app24 videos

app-routing.module

app.component.spec

app.component

app.module

app-routing.module

app.component.spec

app.component

app.module

app-routing.module

app.component.spec

app.component

app.module

app-routing.module

app.component.spec

app.component

app.module

app-routing.module

app.component.spec

app.component

app.module

app-routing.module

app.component.spec

app.component

app.module

Section 8: banner12 videos

banner.component.spec

banner.component

banner.component.spec

banner.component

banner.component.spec

banner.component

banner.component.spec

banner.component

banner.component.spec

banner.component

banner.component.spec

banner.component

Section 9: show-item12 videos

show-item.component.spec

show-item.component

show-item.component.spec

show-item.component

show-item.component.spec

show-item.component

show-item.component.spec

show-item.component

show-item.component.spec

show-item.component

show-item.component.spec

show-item.component

Section 10: slider12 videos

slider.component.spec

slider.component

slider.component.spec

slider.component

slider.component.spec

slider.component

slider.component.spec

slider.component

slider.component.spec

slider.component

slider.component.spec

slider.component

Section 11: constants6 videos

images-sizes

Section 12: home12 videos

home.component.spec

home.component

home.component.spec

home.component

home.component.spec

home.component

home.component.spec

home.component

home.component.spec

home.component

home.component.spec

home.component

Section 13: movie-list8 videos

movie-list.component.spec

movie-list.component

movie-list.component.spec

movie-list.component

movie-list.component.spec

movie-list.component

movie-list.component.spec

movie-list.component

Section 14: services24 videos

movies.service.spec

movies.service

tvshows.service.spec

tvshows.service

movies.service.spec

movies.service

tvshows.service.spec

tvshows.service

movies.service.spec

movies.service

tvshows.service.spec

tvshows.service

movies.service.spec

movies.service

tvshows.service.spec

tvshows.service

movies.service.spec

movies.service

tvshows.service.spec

tvshows.service

movies.service.spec

movies.service

tvshows.service.spec

tvshows.service

Section 15: footer12 videos

footer.component.spec

footer.component

footer.component.spec

footer.component

footer.component.spec

footer.component

footer.component.spec

footer.component

footer.component.spec

footer.component

footer.component.spec

footer.component

Section 16: header12 videos

header.component.spec

header.component

header.component.spec

header.component

header.component.spec

header.component

header.component.spec

header.component

header.component.spec

header.component

header.component.spec

header.component

Section 17: types21 videos

movie

tvshow

movie

tvshow

movie

tvshow

credits

image

movie

tvshow

video

credits

image

movie

tvshow

video

credits

image

movie

tvshow

video

Section 18: src6 videos

main

Section 19: Application Home Page18 videos

Home Page Component and Routing

37m

Loop Over Items using ngFor

23m

ngIf for Conditional Rendering

12m

Loop Over the Movies ngFor To Create the Slides

39m

Define Movie Model

37m

Create Slides With Real Data

37m

Getting the Images in Movies API

25m

Change Slide Every 5 Seconds

39m

Slider Animation - Animation Basics

1h 12m

Code Refactoring

45m

Slider Component

18m

Slider Component Layout

21m

Slider Styling

1h 11m

Install Icons Library - Prime Icons

33m

Getting Popular Movies

50m

Show the Data in Frontend

26m

Wrap in a Service

49m

Use Async Pipe

19m

Section 20: Home Page Movies and TV Shows Banners10 videos

Banner Component

44m

TV Shows Type and Use Same Banner Component

52m

Show Item Component

1h 27m

Get The Required Services

21m

Use Inputs for Components

30m

Call the Banners for Different Movies Types

43m

Code Refactoring for Services

15m

Use RxJS Map to Stream Different output

23m

Limit to Specific Amount of Movies

15m

TV Shows Banner

31m

Section 21: Movie and TV Show Detail Page17 videos

Show Detail Component and Routing

38m

Styling the Tab View

54m

Overview Tab

Videos Tab - Videos Service

50m

Videos Tab - Video Embed Component

23m

Videos Tab - Bypass URL Security

48m

Photos Tab - Image Preview on Click

45m

Cast - Use Carousel Component to Display Actors

1h 8m

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

22m

Routing by Movie - TVShow Id

19m

Reading Route Parameter Value

28m

Get Movie By Id

33m

Reuse Slider Component as Header

38m

Disable Slider Switching for Header Use

13m

Install PrimeNG Component library

15m

Resolving Dependency Versions - Update Angular

27m

Continue Library Installation and Use Tab View Component

21m

Section 22: video-embed6 videos

video-embed.component.spec

video-embed.component

video-embed.component.spec

video-embed.component

video-embed.component.spec

video-embed.component

Section 23: show-detail6 videos

show-detail.component.spec

show-detail.component

show-detail.component.spec

show-detail.component

show-detail.component.spec

show-detail.component

Section 24: Movies List Page14 videos

Section Overview

Use Popular Movies as Default Search Value

26m

Add Pagination Component

22m

Pass Page Number to API from Paginator

21m

Keep Search Value on Pagination

14m

Get Total Results Value To Paginator

24m

Discover Search MoviesTV Shows API

Create Search Movies Service

15m

Create Shows List Component

13m

Show Search API Results and Use Show Item

27m

Use Search Component

Data Binding - ngModel

16m

Component Events - onChange

Use Search Value in Search Service

16m

Section 25: shows-list4 videos

shows-list.component.spec

shows-list.component

shows-list.component.spec

shows-list.component

Section 26: Genres Page8 videos

Genres Page Component

17m

Genres API & Service

11m

Genres Page Layout

12m

Display the Genres from API

16m

Get Movies By Genre API and Service

23m

Display Movies on Clicked Genre

20m

Routing to Specific Genre

41m

Reroute to same component with different Id

28m

Section 27: genres2 videos

genres.component.spec

genres.component

About this Lecture

Section: Environment and Development Tools • Size: 51.74 MB • Duration: 24m

Course Summary

Angular 17 for Juniors course: Building Real World Application. Are you ready to start an exciting journey into the world of web development? Our “Introduction to Angular for Youth” course is a great starting point for young learners interested in building dynamic and interactive web applications. Designed with beginners in mind, this course equips students with the skills necessary to create modern web experiences using Angular, one of the most popular front-end frameworks in the industry. Course Highlights: Learn the basics: We’ll start with a solid foundation in web development, covering the basics of HTML, CSS, and JavaScript to ensure every student is on the same page. Angular Core Concepts: Dive into Angular’s powerful features, including components, templates, data binding, and more, through hands-on exercises and real-world projects. Building a real-world application: What sets our track apart is the opportunity to work on a real-world project. You won’t just learn the theory. You will be building practical and functional web applications that can be showcased in your portfolio. Collaborative learning: Engage with your peers, share ideas and work on group projects to strengthen teamwork and problem-solving skills. Coach Guide: Our experienced coaches are dedicated to your success. They provide clear explanations, answer questions and provide valuable insights throughout the course. Prepare for the future: Gain skills that are in high demand in the tech industry and build a strong foundation for future career opportunities. Here’s a summary of what they can expect to learn: Principles of web development: Getting to know the basics of HTML, CSS and JavaScript. Setting up a development environment Familiarity with Angular: What is Angular and its importance in modern web development Angular architecture and key concepts Components and templates: Creating components and templates to build the user interface of web applications. Use data binding to connect components and templates. Instructions and tubes: Understanding directives like ngIf and ngFor. Using pipes to transform and format data. Service and dependency injection: Create and use services to manage data and application logic. Implement dependency injection to make services available to components. Routing and navigation: Setup routing to create multi-page applications. Implement navigation between different views. HTTP and API Integration: Create HTTP requests to retrieve data from external sources. Manage responses and display data in the program. Testing and troubleshooting: Effective debugging of Angular applications. Optimization and performance: Strategies to optimize Angular applications for speed and efficiency. Deployment and hosting: Deploy Angular applications to web hosting services or platforms such as GitHub Pages. Real world projects: Apply the concepts learned to build web applications in the real world. Encourage students to work on projects that interest them. Best practices and industry standards: Teaching the best coding practices and complying with industry standards in Angular development. Join me on this exciting journey into the world of web development with Angular. Whether you’re just starting out or looking to expand your skills, this course will enable you to create dynamic and engaging web applications while actively working on real-world projects that will test your skills. it shows. Sign up now and take your first step towards becoming a web development professional!

Course Content

0 / 277 completed

Section 1: Introduction4 videos

Introduction

29m

What is Angular

Course Requirements

This is Angular Modules, Components and Services

Section 2: Application Deployment4 videos

Application Build

15m

Deploy to a Standard Host Using FTP

11m

Deploy to Github Pages

18m

Fix Github Pages - Base URL

18m

Section 3: Welcome to Angular World!1 videos

Final Words and Next Steps

11m

Section 4: Environment and Development Tools10 videos

Mac Installing HomeBrew

Extensions To Speed Up The Coding Productivity

Installing NodeJS - NVM

20m

Installing Angular

Creating the Project

Running the Application

10m

Installing Code Editor

Project Architecture

24mNow Playing

Installing Prettier

32m

Installing ESLint

32m

Section 5: Project API5 videos

What is API

JSON Format

Getting the Movies data - API Registration

33m

Triggering API's Requests via ThunderClient

21m

Different API's Resources

14m

Section 6: Application Initialization7 videos

Design Overview and Page Structure

Installing and Configuring Fonts

31m

Styles Initialization - Important

25m

Installing Grid System - PrimeFlex

26m

Application Header Component

38m

Application Logo and Navigation

32m

Application Footer Component - Date Pipe

31m

Section 7: app24 videos

app-routing.module

app.component.spec

app.component

app.module

app-routing.module

app.component.spec

app.component

app.module

app-routing.module

app.component.spec

app.component

app.module

app-routing.module

app.component.spec

app.component

app.module

app-routing.module

app.component.spec

app.component

app.module

app-routing.module

app.component.spec

app.component

app.module

Section 8: banner12 videos

banner.component.spec

banner.component

banner.component.spec

banner.component

banner.component.spec

banner.component

banner.component.spec

banner.component

banner.component.spec

banner.component

banner.component.spec

banner.component

Section 9: show-item12 videos

show-item.component.spec

show-item.component

show-item.component.spec

show-item.component

show-item.component.spec

show-item.component

show-item.component.spec

show-item.component

show-item.component.spec

show-item.component

show-item.component.spec

show-item.component

Section 10: slider12 videos

slider.component.spec

slider.component

slider.component.spec

slider.component

slider.component.spec

slider.component

slider.component.spec

slider.component

slider.component.spec

slider.component

slider.component.spec

slider.component

Section 11: constants6 videos

images-sizes

Section 12: home12 videos

home.component.spec

home.component

home.component.spec

home.component

home.component.spec

home.component

home.component.spec

home.component

home.component.spec

home.component

home.component.spec

home.component

Section 13: movie-list8 videos

movie-list.component.spec

movie-list.component

movie-list.component.spec

movie-list.component

movie-list.component.spec

movie-list.component

movie-list.component.spec

movie-list.component

Section 14: services24 videos

movies.service.spec

movies.service

tvshows.service.spec

tvshows.service

movies.service.spec

movies.service

tvshows.service.spec

tvshows.service

movies.service.spec

movies.service

tvshows.service.spec

tvshows.service

movies.service.spec

movies.service

tvshows.service.spec

tvshows.service

movies.service.spec

movies.service

tvshows.service.spec

tvshows.service

movies.service.spec

movies.service

tvshows.service.spec

tvshows.service

Section 15: footer12 videos

footer.component.spec

footer.component

footer.component.spec

footer.component

footer.component.spec

footer.component

footer.component.spec

footer.component

footer.component.spec

footer.component

footer.component.spec

footer.component

Section 16: header12 videos

header.component.spec

header.component

header.component.spec

header.component

header.component.spec

header.component

header.component.spec

header.component

header.component.spec

header.component

header.component.spec

header.component

Section 17: types21 videos

movie

tvshow

movie

tvshow

movie

tvshow

credits

image

movie

tvshow

video

credits

image

movie

tvshow

video

credits

image

movie

tvshow

video

Section 18: src6 videos

main

Section 19: Application Home Page18 videos

Home Page Component and Routing

37m

Loop Over Items using ngFor

23m

ngIf for Conditional Rendering

12m

Loop Over the Movies ngFor To Create the Slides

39m

Define Movie Model

37m

Create Slides With Real Data

37m

Getting the Images in Movies API

25m

Change Slide Every 5 Seconds

39m

Slider Animation - Animation Basics

1h 12m

Code Refactoring

45m

Slider Component

18m

Slider Component Layout

21m

Slider Styling

1h 11m

Install Icons Library - Prime Icons

33m

Getting Popular Movies

50m

Show the Data in Frontend

26m

Wrap in a Service

49m

Use Async Pipe

19m

Section 20: Home Page Movies and TV Shows Banners10 videos

Banner Component

44m

TV Shows Type and Use Same Banner Component

52m

Show Item Component

1h 27m

Get The Required Services

21m

Use Inputs for Components

30m

Call the Banners for Different Movies Types

43m

Code Refactoring for Services

15m

Use RxJS Map to Stream Different output

23m

Limit to Specific Amount of Movies

15m

TV Shows Banner

31m

Section 21: Movie and TV Show Detail Page17 videos

Show Detail Component and Routing

38m

Styling the Tab View

54m

Overview Tab

Videos Tab - Videos Service

50m

Videos Tab - Video Embed Component

23m

Videos Tab - Bypass URL Security

48m

Photos Tab - Image Preview on Click

45m

Cast - Use Carousel Component to Display Actors

1h 8m

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

22m

Routing by Movie - TVShow Id

19m

Reading Route Parameter Value

28m

Get Movie By Id

33m

Reuse Slider Component as Header

38m

Disable Slider Switching for Header Use

13m

Install PrimeNG Component library

15m

Resolving Dependency Versions - Update Angular

27m

Continue Library Installation and Use Tab View Component

21m

Section 22: video-embed6 videos

video-embed.component.spec

video-embed.component

video-embed.component.spec

video-embed.component

video-embed.component.spec

video-embed.component

Section 23: show-detail6 videos

show-detail.component.spec

show-detail.component

show-detail.component.spec

show-detail.component

show-detail.component.spec

show-detail.component

Section 24: Movies List Page14 videos

Section Overview

Use Popular Movies as Default Search Value

26m

Add Pagination Component

22m

Pass Page Number to API from Paginator

21m

Keep Search Value on Pagination

14m

Get Total Results Value To Paginator

24m

Discover Search MoviesTV Shows API

Create Search Movies Service

15m

Create Shows List Component

13m

Show Search API Results and Use Show Item

27m

Use Search Component

Data Binding - ngModel

16m

Component Events - onChange

Use Search Value in Search Service

16m

Section 25: shows-list4 videos

shows-list.component.spec

shows-list.component

shows-list.component.spec

shows-list.component

Section 26: Genres Page8 videos

Genres Page Component

17m

Genres API & Service

11m

Genres Page Layout

12m

Display the Genres from API

16m

Get Movies By Genre API and Service

23m

Display Movies on Clicked Genre

20m

Routing to Specific Genre

41m

Reroute to same component with different Id

28m

Section 27: genres2 videos

genres.component.spec

genres.component