Introduction to Building Web Apps with Angular
Lab
Beginner
1 h 0 m
2019-03-31
Lab Overview
In this lab, you will use Angular, TypeScript, and Visual Studio Code to build a simple application for managing a table of widgets. Data will be loaded from a REST service and displayed in an HTML table by Angular components. In addition, the application will fully support CRUD (Create, Read, Update and Delete), allowing widgets to be added and edited as well as viewed and deleted. As you build out the app, you will learn the basics of Angular and get a feel for what Angular programming is all about.
Objectives
  • Create Angular components and services
  • Combine Angular with HTML forms for collecting and editing data
  • Decompose a single UI component into several smaller components
  • Compose rich UIs from Angular components
  • Integrate REST services into Angular apps
Exercises
Rather than start from scratch, you will begin with a "hello world" project that has been created for you. This will enable you to start learning quickly without spending time creating boilerplate infrastructure. In this exercise, you will copy the starter project to a local folder and use Visual Studio Code to modify a simple Angular component included in the starter project to display a table of widgets. As you do, you will get a first look at the Angular component model.
In this exercise, you will add a model to the project and modify AppComponent to use the model. You will also see Angular's ngFor directive for the first time.
In this exercise, you will add an HTML form to the app so users can add widgets to the collection. This will involve importing an Angular module named FormsModule and modifying AppComponent to use the module.
The application component has grown and is now responsible for displaying the widget table AND handling form input for new widgets. This works, but it's not ideal. In this exercise, you will decompose the application component into two smaller components: one for displaying widgets, and another for adding widgets. 
Currently, the app allows new widgets to be added, but lacks a UI for editing and deleting widgets. In this exercise, you will add support for editing widgets using inline table editing, and support for deleting widgets as well. This will involve adding two new components: one to represent edit rows and one to represent "view" rows (rows that are not currently being edited) and modifying existing code to use them.
The app is almost complete. In the final exercise, you will modify it to use a REST service to store widget data. To communicate with the REST service, you will use Angular's HttpModule, which provides HTTP services to applications that require them. And you will implement a service of your own named Widgets to use Angular's HTTP services.
Real-Time Lab
Not Registered?
Create Account
Already Registered?
Login
What are Labs?

Labs provide a live environment to get hands-on experience using the same tools and services in the real world.


Learn More