1. Introduction

1.1 Introduction

Hi folks. In this course we are going to learn about Angular's template driven form capabilities and see how to add a simple registration form. Will see how to add the base markup and some light styling for the form. As well as how to make use of Angular's era classes to add era styling. We'll see how to add two-way bindings to the form controls so that the data entered by the user is easily captured. And we'll learn about Angular's own internal form model that keeps track of all of the controls, their values, and whether they are valid or not. Also covered in the course will be working with validation in Angular. We'll see how to use regular HTML file validation attributes with Angular. And also cover slightly more advanced scenarios where we want to trigger validation manually. Let's get started.

1.2 Set Up the Dev Environment

Hi, folks. In this lesson, we can get our development area setup ready to work through the coding examples. To follow along with the coding examples which I'd strongly recommend, you'll need to have Node.js installed. So if you don't have that already, head on over to nodejs.org and follow the installation instructions for your platform. You'll also need to have Git installed to be able to clone this starter repository. Again, if you don't have this installed already, head on over to the downloads page at git-sem and follow the appropriate installation instructions for your system. Once those two things are installed, let's install the latest version of the Angular CLI globally. We're now ready to clone the starter repository to our local machine. The repository can be found up on GitHub, And you can get the URL from this clone or download button here. The command line should be focused on the directory where you would like the project saved. I'm putting mine in my user directory. You can clone it from the command line with this command. So now let's open the projector in an editor. I'm using VS Code here, it´s a free IDE from Microsoft, which is ideal for building front-end projects. So most of the files and the folder structure should be familiar to anyone that's used Angular before. Inside the root of the project, there´s a license file. And within that, there´s a folder called registration-app. In the root of this directory are some configuration files for the editor for Git and for the project itself. And there are some type script specific things, the tsconfig.json file and the tslint.json file. The project has an e2e directory, that comes standard with all Angular applications created using the Angular CLI. We won't be using that directory in this course. But it also contains an src directory. And in here is where the actual application code resides. So in the root of this directory, again, there are some configuration files for type script again and for karma which is used to run the unit tests. We won't be running or adding any new tests in this course. The bulk of the application code resides in the app folder. In here, we have the application module, that's the root module for the entire application. And we also have a simple application component which contains the shell for the application. So before we can run the example application, we just need to install its dependencies. I'm just gonna open up a new terminal right here in VS Code to do that. We first need to change into the relevant directory, which is the registration-app directory. And now let's run an MPN install to install all of the project's dependencies. This will give us a node_modules folder and that contains all of the third party dependencies that we'll be using including Angular itself. That should take a couple of minutes to complete. And then we can test the app by running the ng serve command. This will compile all of the typescript into JavaScript, the SaSS into CSS and will start up a very simple local development server that we can use to preview the application end. It will give us a URL in the terminal output, and if we Ctrl+click on that, it will open up the application in a browser. And we can see the basic application shell here as well as the code as it is at the start of the course right now. The repository also contains a branch called completed solution containing the code as it will be at the end of the course. If you run into any difficulties during the course, you can try switching to this branch and seeing if you can spot where things are going wrong. So in this lesson, we got our local development area set up, ready to add the example registration form in. Thanks for watching.