Angular Module 1: Creating a simple Angular App

Try for free!

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

Angular Module 1: Creating a simple Angular App

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

Approx. 3 hours

  • This is part 1 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 first module, we'll understand what Angular is, install Angular and set up a development environment, and build our first simple application.
Basic HTML and experience of web development with Spring is assumed. No prior Javascript / Typescript knowledge is needed.


Having problems? check the errata


Introduction 5m 49s Preview

What is Angular?

How angular sites differ from traditional web technologies 5m 11s Preview
How angular can create a fast, responsive user experience 2m 51s Watch
What an angular application looks like 4m 15s Watch

Setting up the environment

The software needed to build with Angular 1m 41s Watch
Installing Node.js 0m 53s Watch
Installing the Angular CLI 2m 7s Watch
Testing Angular with a hello world application 5m 31s Watch
Running the hello world application 2m 21s Watch
Configuring the Intellij Idea IDE 2m 45s Watch
Installing and configuring Visual Studio Code 4m 2s Watch

Introducing Angular architecture

An overview of our first example site 2m 45s Watch
What is a component? 1m 50s Watch
index.html and styles.css 2m 21s Watch
Component selectors 2m 42s Watch
The 4 component files 3m 40s Watch
How angular can construct a page 4m 36s Preview
Angular doesn't assemble the HTML 7m 17s Watch
How to open a project from the sample files 4m 54s Watch

Creating a component

Creating a new project 2m 19s Watch
Running the project 2m 33s Watch
Creating the component with the CLI tool 4m 33s Watch
Editing the Component's HTML and making it appear 1m 54s Watch
Exercise 1 - creating components 1m 57s Watch
Exercise 1 - solution walkthrough 2m 21s Watch

Template Expressions

An overview of the Component Class structure 7m 56s Watch
Template expressions 3m 11s Watch
Template expressions are dynamic 4m 17s Watch

Simple event binding

Event binding 6m 25s Watch
Exercise 2 - event binding 3m 0s Watch
Exercise 2 - solution walkthrough 2m 12s Watch

Component interaction - reading properties

Using the hidden HTML attribute 4m 44s Watch
Accessing properties of a child component 6m 44s Watch
The *ngIf structural directive 4m 33s Watch

Component interaction - property binding

Setting up the scenario 4m 36s Watch
Accessing properties from code 7m 13s Watch
The @Input Decorator 6m 23s Watch

Component interaction - event binding

Why we need custom events 5m 25s Watch
Creating an event emitter 7m 28s Watch
Triggering an event 2m 27s Watch
Sending data with events 2m 38s Watch
Revisiting *ngIf and hidden 5m 5s Watch
Copyright ©2024