Try for free!
Subscribe and stream all our courses
from just USD30.00 per month
Start my free trial
from just USD30.00 per month
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.
Contents
Having problems? check the errata
Introduction |
||
| 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 | |