Try for free!
Subscribe and stream all our courses
from just USD19.00 per month
Start my free trial
from just USD19.00 per month
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.
Contents
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 | |
Routing |
||
| 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 | |