Angular Module 3: Building a real site

Try for free!

Subscribe and stream all our courses
from just $19.00 per month
Start my free trial

Angular Module 3: Building a real site

Become a full-stack developer building front-ends with Angular

Approx. 5 hours

  • This is part 3 of 5 modules which cover building Angular front ends for Java applications.
  • Become a full-stack developer by learning how to build responsive and reactive front-ends with Angular.
  • In this third module, we'll build a full responsive, functioning front-end application.
Basic Java knowledge is assumed. No prior Javascript / Typescript knowledge is needed. You should complete the earlier modules of this course before starting this module.


Having problems? check the errata

Using external resources

Introducing the case study 5m 39s Watch
Using Bootstrap in our project 6m 2s Watch
Installing Bootstrap using NPM 10m 57s Watch
Exercise 1 - Referencing CSS and Javascript files 3m 0s Watch


Preparing the application 4m 18s Watch
Setting up basic routing 7m 5s Watch
Creating a 404 page 5m 57s Watch
Making links work with routing 7m 38s Watch
Using a separate routing file 4m 37s Watch

Models and views

The concepts of Data, Models and Views 3m 42s Watch
Creating a model 5m 27s Watch
Creating the data service 6m 52s Watch
Binding data to a view and looping with *ngFor 5m 42s Watch
Creating a sub-component view 9m 14s Watch
Using routing for sub-components 10m 59s Watch
Exercise 2 - Creating models, data and views 1m 41s Watch
Exercise 2 - solution walkthrough 9m 22s Watch

Using observables for data

Why we should use observables with data 7m 33s Watch

Template forms

How template driven forms work 1m 10s Watch
Setting up navigation to show a form 8m 39s Watch
Creating a form 5m 3s Watch
Binding a form 10m 24s Watch
Saving the form data 4m 37s Watch
Finishing the form 9m 3s Watch

Template form validation

Dynamic classes applied to form elements 7m 24s Watch
Validation messages and controlling the submit button 5m 2s Watch
Custom validation rules 4m 31s Watch
Exercise 3 - Implementing custom validation 2m 37s Watch
Exercise 3 - Solution walkthrough 8m 50s Watch

Reactive forms

Setting up navigation to show a form 8m 14s Watch
Creating a reactive form 9m 52s Watch
Setting and reading form control values 3m 50s Watch
Programatically adding controls 11m 0s Watch

Going further with reactive forms

Using the FormBuilder 6m 58s Watch
Implementing validators 3m 11s Watch

Completing the case study

Fixing a lifecycle bug 14m 32s Watch
Implementing the delete functions 9m 55s Watch
Displaying data with pipes 5m 25s Watch
Exercise 4 - Displaying the calendar component 3m 44s Watch
Exercise 4 - Solution walkthrough 10m 31s Watch
Exercise 5 - Create the add, edit and delete functionality 1m 21s Watch
Exercise 5 - Solution walktrough part 1 8m 33s Watch
Exercise 5 - Solution walktrough part 2 13m 57s Watch
Responding to the calendar click event 6m 44s Watch
Copyright ©2024