Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:9Length:59 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Set Up the Dev Environment

In this lesson, I'll show you which technologies we'll be using in the course and get everything set up and ready for the coding examples. I'll also show you how to download the example code and how to view the final code if you get stuck.

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.

Back to the top