Building a Real Site with Angular (Angular for Java Developers - Part 3)

Video description

Learning to build beautiful front ends and working as a full stack developer is one of the best ways to move up the career ladder. In Angular for Java Developers Part Three: Building a real site you’ll work hands-on to create a fully responsive, functioning front-end application using Angular. All examples are related to the kind of Java development you’re familiar with, making it easy to expand your skills. In the third of a running series of five courses, you’ll learn how to incorporate resources like Bootstrap, and how to use template and reactive forms.


about the subject

The Angular framework is used by millions of developers, powering frontends from simple prototypes to Google’s own web apps. Prized for its scalability, Angular also offers lightning fast speed and response times and the chance to reuse code for both web and mobile. Best of all, it can be integrated with backends built in Java.


about the video

Angular for Java Developers is a five course series that teaches Java programmers how to use Angular and JavaScript to build applications that are maintainable, testable, and secure. In Part Three, you’ll build a fully responsive, fully functioning Angular frontend. You’ll learn about routing, the concepts of Data, Models and Views, and how to programmatically add controls with reactive forms.

Inside:

  • The third course in the Angular for Java Developers series
  • Incorporating external resources like Bootstrap
  • Using observables for data
  • Template form validation
  • Using the FormBuilder
  • Fixing a lifecycle bug

prerequisites

For viewers with basic Java experience.


about the instructor

Matt Greencroft has over twenty years of experience as a programmer, primarily working in the banking sector. Matt now teaches for Virtual Pair Programmers. His specialties are Microservices, Spring Boot, Apache Spark and Kotlin.

Table of contents

  1. 1. USING EXTERNAL RESOURCES
    1. Introducing the case study 00:05:39
    2. Using Bootstrap in our project 00:06:02
    3. Installing Bootstrap using NPM 00:10:57
    4. Exercise 1 - Referencing CSS and JavaScript files 00:03:01
  2. 2. ROUTING
    1. Preparing the application 00:04:19
    2. Setting up basic routing 00:07:06
    3. Creating a 404 page 00:05:58
    4. Making links work with routing 00:07:39
    5. Using a separate routing file 00:04:38
  3. 3. MODELS AND VIEWS
    1. The concepts of Data, Models and Views 00:03:43
    2. Creating a model 00:05:28
    3. Creating the data service 00:06:53
    4. Binding data to a view and looping with *ngFor 00:05:42
    5. Creating a sub-component view 00:09:15
    6. Using routing for sub-components 00:11:00
    7. Exercise 2 - Creating models, data and views 00:01:41
    8. Exercise 2 - solution walkthrough 00:09:22
  4. 4. USING OBSERVABLES FOR DATA
    1. Why we should use observables with data 00:07:34
  5. 5. TEMPLATE FORMS
    1. How template driven forms work 00:01:11
    2. Setting up navigation to show a form 00:08:39
    3. Creating a form 00:05:03
    4. Binding a form 00:10:25
    5. Saving the form data 00:04:37
    6. Finishing the form 00:09:03
  6. 6. TEMPLATE FORM VALIDATION
    1. Dynamic classes applied to form elements 00:07:24
    2. Validation messages and controlling the submit button 00:05:02
    3. Custom validation rules 00:04:32
    4. Exercise 3 - Implementing custom validation 00:02:36
    5. Exercise 3 - Solution walkthrough 00:08:50
  7. 7. REACTIVE FORMS
    1. Setting up navigation to show a form 00:08:15
    2. Creating a reactive form 00:09:53
    3. Setting and reading form control values 00:03:51
    4. Programatically adding controls 00:11:01
  8. 8. GOING FURTHER WITH REACTIVE FORMS
    1. Using the FormBuilder 00:06:58
    2. Implementing validators 00:03:11
    3. Validation messages and controlling the submit button 00:10:36
  9. 9. COMPLETING THE CASE STUDY
    1. Fixing a lifecycle bug 00:14:33
    2. Implementing the delete functions 00:09:55
    3. Displaying data with pipes 00:05:25
    4. Exercise 4 - Displaying the calendar component 00:03:45
    5. Exercise 4 - Solution walkthrough 00:10:31
    6. Exercise 5 - Create the add, edit and delete functionality 00:01:22
    7. Exercise 5 - Solution walktrough part 1 00:08:34
    8. Exercise 5 - Solution walktrough part 2 00:13:57
    9. Responding to the calendar click event 00:06:45

Product information

  • Title: Building a Real Site with Angular (Angular for Java Developers - Part 3)
  • Author(s): Matt Greencroft
  • Release date: April 2020
  • Publisher(s): Manning Publications
  • ISBN: 10000MNHV201928