Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:15Length:2.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Setup

Hi, folks. In this lesson, we're going to get everything set up and ready to build the example project. We'll be starting from scratch and building everything manually as we go through the course. There is a repository up on GitHub which contains the complete source code, as it will be at the end of the course. This is provided for reference purposes only. I'd strongly encourage you to follow along with me as we go through the course. So first of all then we're going to need NodeJS installed. We're going to be using the Angular CLI in this course and this requires to be NodeJS version 6.9 or above and NPM version 3 or above. If you meet these requirements already, great, you probably don't need to do anything. If you don't meet the requirements or you're not sure, head on over to the nodejs.org site and follow the installation instructions for your platform. To check which versions you have, you can run these commands in the command line. Once we're sure we have the relevant versions installed we can also install the Angular CLI. This will instill the Angular CLI globally which is recommended because it means that we can then run the ng command from anywhere on our system. We can verify that it's been installed correctly using this command. So this should be all the setup that we need to do. During the course then we're going to build a small UI for an example web application using Angular and Angular Material. We can use the Angular CLI to scaffold out a new project for us and we can also use it to add Angular Material. Let's create the new project first. We use the new command and specify the name of our project. In this case, it's example-material-app. And we can use the style option to set SCSS as the default style for the project. The new command takes a little while to run, as it's got a bunch of stuff to do. It's got things to download, it needs to initialize Git, and a bunch of other stuff like that. So it normally takes a minute or two. Once it's done, we can then CD into the new project folder that the CLI created for us. If you've used these CLI before, you know how much it does for you. We should at this point have a fully working application with example tests, development and production web pack configurations, and even a built-in development server that we can use to preview the app as we go. To see the basic app so far then, let's run this command. We should see some activity in the console, and once it says it's complied successfully, we can open up a browser and paste in the dev servers URL. As long as you see the big Angular logo in the middle of the screen, everything should be configured and working correctly. So if you haven't have used this CLI before, I don't wanna go too deeply into it in this course, I do cover it in much more detail in my Angular fundamental course which has whole section dedicated to it. But let's just have a really quick look at what we get by default in our example application. Inside the project folder then we get a .git folder which we can't see in the editor here but which does exist and which contains all of the git files. We get an E to E folder, and this contains the end to end test, which are written using protractor. So there is some configuration here and an example test. We won't be looking at end to end tests in this course. We also get a node modules folder and that contains all of the NPM packages that the CLI has installed for us. There are many, many packages in here. We get some configuration files mostly in the root of the application, all of the regular node files like the package,json. And also some configuration files like the typescript configuration and the tslint configuration. The SRC folder will contain all of the source files for the application. Again, there's some more configuration files here. There's a global styles.scss file and there are entry points for the application and the unit tests, so these are the main.ts and test.ts files. All of the code for the application will reside in the app folder and in here we get the application module and we also get a small application component and that's what we saw running in the browser just a moment ago. We also get an assets folder. By default, this is empty except for a getkeep file, which just makes sure that get tracks the empty folder. And we get an environments folder, and this contains configuration for the production and development environments. So last of all in this lesson then, let's get Angular Material installed as well. We can also use the CLI for this and this is a new feature of the Angular CLI which was added with the recent 6.0 release of Angular. So we can either stop the development server or we can open up a new tab in the console if the commandline that you're using supports tabs. Let's now use the add command to add Angular Material to our projects. We're going to install the 6.2.1 version. I want to install a specific version here just in case Angular Material changes drastically in the future. Material is usually very good at maintaining backwards compatibility just like Angular itself. But let's install the current stable version just in case. We should see some activity in the console, but it shouldn't take as long as the new command that we ran to create the app. Outside of the node_modules folder we won't get any new files in our application, but it will install some tooling for us, which we'll make use of in the next lesson. And it will make some changes to some of the files that already exist in the application. It will add Angular Material as a dependency in our package and package lock JSON files. We also have this angular.json configuration file, and it will add a default material theme style sheet as an inputs in this file. It will also add references to the angular material icons and the Roboto font from the Google APIs CDN. It will update the styles.scss global style sheet. And it will just remove the margin from the body for us. And it will also add a new module to the module for our application. And that's the browser animations module. So it does a number of things for us. And it installs a bunch of tooling in the node_modules folder. And we move on to actually start using Angular Material in the next lesson. So in this lesson, we've got Node JS and NPM installed along with the Angular CLI, which we then used to scaffold out a new web application project, which we then installed Angular Material to. Thanks for watching.

Back to the top