Learn how to build an Angular and Node.js application that can perform create, read, update and delete (CRUD) operations. Topics covered include building RESTful services with Node.js and Express, manipulating data in MongoDB and consuming services.
Learn how to integrate Angular with Node.js RESTful services. In this course, Integrating Angular with Node.js RESTful Services, you'll learn how Angular and Node.js can be used to build an application that allows users to view customer data, page through it, and then perform insert, update, and delete operations. First, you'll start off by seeing how to get started creating the project structure so that you understand the different technologies and how they will interact with each other. Next, you'll discover how to build a Node.js RESTful service with Express to expose GET, POST, PUT, and DELETE actions to clients. Finally, the RESTful service actions are consumed by an Angular application using a reusable service class, the built-in Http client, and RxJS functionality such as observables. By the end of the course, you'll understand the process involved to not only create RESTful services using Node.js/Express, but also how Angular can be used to consume these services and display and capture data in the user interface.
Course Overview Welcome to the Integrating Angular with Node. js RESTful Services course. My name's Dan Wahlin, and I'm a software developer and trainer, specializing in web technologies. I work a lot with Angular and different server side technologies, so I'm really excited to introduce this course. Now, throughout the course, you'll see firsthand how Angular and Node. js can be used to build an application that allows users to view customer data, page through it, and then perform, insert, update, and delete operations. This includes learning how to move data from a database all the way down to an Angular client, using RESTful services. As data's modified in the client, you're also going to learn different techniques for sending that data to the service, so it can be stored in the database. On the server side, you'll learn about Node. js and Express and how they can be used to define RESTful endpoints. You'll also examine how Angular services and the HTTP client can be used to make async calls to the RESTful service and retrieve data. You'll see how components can subscribe to observables and render data in the user interface, using child components. This includes discussing input and output properties and how they can be used to pass data in and out of components. The course will also discuss different form techniques, including template-driven forms and reactive forms, and highlight the differences between them. So let's get started, and jump right in.
Course Introduction Let's start things off by talking about the overall goals of this course, some of the key technologies we'll learn about, and the sample application that we're going to walk through. So the first thing I'll do is walk you through the prereqs that you need to know so you can maximize the learning process and get through this course and feel like you got something out of it as well. We'll talk about the overall learning goals and what you can expect right up front, and then we're going to clarify some of the key, server-side technologies and concepts that we'll be covering as well as the client-side technologies and concepts. So that'll include things like RESTful services, what that means, observables in Angular and more. From there we'll talk about how to get the sample application that we're going to be building up and running locally on your machine, and I'm also going to show you how you can get it up and running using something called Docker. So let's jump right in.
Exploring the Node.js and Angular Application In this module, we're going to take a moment to explore the Node. js and Angular application and look at things like the project structure, how Node. js and Angular's modules work and how they're configured and even explore some other aspects of Angular such as modules, components and services. So, if you're already very comfortable with how Node. js modules work and how Angular modules work, you could certainly go through this module, maybe skim it and jump right to the next one, but if you are new at all to some of the concepts we're going to cover, I would definitely recommend that you take a moment to go through it because I'm just going to provide a quick overview of how everything's put together, and that way in the next module when we start building out the code you'll understand the base behind the application that's making it possible to run. So, in this module here's what we're going to cover. We're going to talk about the project structure first off, and I'm just going to walk through some of the key files, some of the folders so you know the lay of the land, if you will. From there we're going to talk about the Node. js and Angular modules that are needed and just a quick overview of how they're used in the app. I have kind of a unique way of configuring my Express Node. js routes. So, we're going to talk about a convention-based routing technique that can be used. We'll also go into the fundamentals of ES6 module loaders. In this particular application, I'll be using SystemJS. There are many options out there though. So, I'm going to go through how SystemJS is configured. Make sure that you understand how it's all working under the covers, and then finally, we're going to create the basic building blocks that are going to be used later in the course as we start building our get and put and post requests and things to the restful service. So, I'm going to show an Angular module, a component in a service, and I'll show you the fundamentals of how all that works together if you're new to that at all. So, let's go ahead and get started by jumping into the project structure and walking through what it has as far as folders and files.
Retrieving Data Using a GET Action This module is all about learning how to expose data through a RESTful service, and then how we could consume that data using Angular Services, and even data-bind the data into our templates and components. Now we're going to start off with a look at the different GET actions we need for the apps. We'll learn how to get customers, get a single customer, as well as how to get states. We'll also talk about how we can make GET requests with an Angular service, and we'll talk about observables again, and review how those are going to be used and the role they play. From there we're going to switch gears to using the Angular service to consume the data, get that observable back, and subscribe to it in a component, and then render the data in a grid. And then we'll wrap up by looking at some different techniques that can be used to render a single customer in a form. We're going to talk about a template-driven approach, and a reactive forms approach. So let's go ahead and get started by building out pieces of our RESTful service.
Inserting Data Using a POST Action As you're working with data, you'll reach a point where you need to insert that data into some type of a data source. So in this module we're going to talk about posting data and how we can handle a POST operation in our restful service and how we can actually send data through a POST action up to the server with Angular. So we're going to start off by talking about the RESTful service again, and we'll first create a POST action. I'll show you how we can define that route, and then hook it up to a function that'll get called. Which then will take the Customer's Repository you've seen up to this point, and use it to insert a customer into the database. From there we're going to then switch to the client side, and we're going to use the Http client in Angular to post a customer up to the newly created route that we're going to be dealing with. We'll talk about how we can then use that service in our template driven form. And we'll also revisit the Reactive version of the form. So we'll get some reuse going with our data service class. So let's go ahead and start things off in this module by first creating our POST action in our Express RESTful Service.
Updating Data Using a PUT Action We've seen how we can get data from our RESTful service and even how we can insert data, but we haven't looked at updating data. And that's what we're going to do in this module. This module's all about issuing and working with PUT actions, or PUT requests, that are going to flow up from the Angular application to the NodeJS Express RESTful service. Now, as we move through the course, we're going to start off by talking about how do we define a PUT request in our Express type of service. So we'll talk about that and it's going to be very similar to what you've seen up to this point, in fact, the concepts are almost identical. So it's pretty quick and easy to work with. From there, we'll move back to the Angular service and we'll add the ability to use the HTTP client to call up and make the PUT request to the RESTful service. We'll then go into our template driven form and go into the component code and see how we can then call from the component into our data service. And then we'll explore our Reactive form again and enhance it slightly to also handle the ability to update a customer and do the PUT request to the service, which then would get that data up to the RESTful service. So let's go ahead and get started by talking about adding a PUT request into our RESTful service using Express code.
Deleting Data Using a DELETE Action In this module, we're going to look at how we can add DELETE functionality into the application. So we'll work on DELETE functionality, of course, on the server side and the RESTful service, and then we'll go back to the Angular application and add DELETE functionality there as well in our data service that we have, and in our different forms. So as a quick overview, we'll start off with a DELETE action added using Express, we're going to create a route that takes an ID, and then we'll map that to a function that's going to be called, which will then handle deleting that customer from our MongoDB database. We'll then take a look at how we can use our Angular service to issue a DELETE request using an Http client. From there, we'll then modify our customer form to support deletes, make that delete request, which then calls the RESTful service. And then we'll also explore our Reactive form, and see how we can get that going with the DELETE operation as well. So let's kick things off again by starting on the server side, and getting DELETE functionality into our RESTful service.
Data Paging, HTTP Headers, and CSRF In this module, we're going to take a look at headers and the role they can play when it comes to working with data and also some security features to prevent different types of hacker attacks. So we're going to start off by talking about how we can add a paging header into our RESTful service so that the response that comes back can say the total number of customers available, even if only a handful of customers are retrieved by the client. That way we can start to build out some paging functionality, access the headers in our Angular service, and then build a component that can handle paging, and I'm going to show first off how we can add the paging support from a code standpoint, then we'll talk about how we can add a custom paging component to allow the user to select which page of records they'd like to access. From there we're going to talk about something that all RESTful services and really any service that allows users to change data should have in place. We're going to first talk about CSRF, Сross-Site Request Forgery, and explain what it is, and then I'm going to talk about how we add in some functionality to block these types of attacks, using a node. js module called csurf. From there we're going to talk about how we can access a csurf token in Angular and how Angular supports using CSRF tokens and working with them out of the box. I'll show you how to get all of that going and how it works. So let's go ahead and get started by switching to our RESTful service and see how we can add some paging functionality.