1.2 Get Started With Angular-CLI

Hello folks, in this lesson, we're going to get the essential components installed, ready for you to follow along with the code examples if you want to, which I'd recommend. You'll need to have Node.js installed, the latest version of the time of writing is 8.10.0. The Angular team recommends using a version of Node greater than 6.9, and NPM v3 and up. If you've already got them installed, you should be good to go. If you don't have them installed, head on over to Nodejs.org and follow the installation instructions for your platform. The easiest and most productive way to work with Angular right now is using the Angular CLI. So the first thing we need to do is get that installed. We can install it globally using this command. Depending on what platform you're using, you might see some errors in the output there. So to test that the CLI has been installed correctly, you can just run the NG command, and that will list all of the commands that can be used. So it looks like everything's working correctly. The Angular CLI lets us create new Angular applications, or new components, services, directives. Or many other of the different building blocks that an Angular application is made of, directly from the command line, and this can save us a lot of time. There aren't any project files for this course. There's a copy of the completed application up on GitHub for reference, but we'll be starting from scratch, and creating everything we need as we go along. So let's create a new project now. The command line should be focused on the directory that you want to create the new project in. I'm creating mine in my users folder. And we can create a new project using this CLI with the following command. So the command starts with ng, all of the Angular CLI commands begin with ng, and then we want to run new in order to create a new application. And we need to specify the name of the directory that the application is going to be created in, so I've called mine js-blackjack. We've also used the style flag, and we've set that to scss because we're going to be using Sass to create styles for our application. Once the new command is finished, we should see a lot of output in the command line, and it should end with projects js-blackjack successfully created. So this will create a new directory in whichever directory the command line is focused on, and it will configure the app to use Sass. Let's take a quick look around the skeleton application. The editor that I'll be using throughout this course is Visual Studio 2017 Community Edition, which is totally free and has many great features. Another popular IDE is VSCode. The editor shouldn't matter too much, so just use whatever you're comfortable with. So inside the root directory of the new application, we should find some existing directories. There will be an e2e directory which will contain end-to-end tests, a node modules directory, and an src directory. There are also a bunch of loose files, which are mostly configuration related. There is a .angular-cli.json file, let's just open that up and have a quick look. So this contains configuration for the CLI itself, it shows where various other configuration files are, such as the schema. And it sets a number of default properties, such as where the test configuration files are, where the styles are located, the environment files and all kinds of other things. Generally, we won't need to make too many changes to this file, but just bear in mind that this underpins a lot of how the CLI works. We also have a .editorconfig file, which provides configuration for the IDE. And also a .gitignore to tell Git, if you're using Git, any files that it should not track, such as all of the files in the node_modules folder. There are two configuration files for testing, the karma.conf.js file, This provides the karma configuration for our unit tests. And there's also a protractor.conf.js file, and this provides the configuration for end-to-end tests. Again, we generally won't need to make too many changes to these files. There's a package.json file, which is common to all applications built using Node.js and NPM. And the readme file, which we can use to tell people about our project. Finally, right at the bottom here, there are some TypeScript configuration files, the tsconfig.json file. So this provides configuration for the TypeScript's compiler when it compiles the TypeScript into JavaScript. Again, we'll rarely need to make any changes here. And lastly, we have a tslint.json file, and this provides all of the literals for the application. So let's take a look at the SRC folder. So this is where the majority of the code that we're going to create ourselves and work on will be kept. So inside here we have a number of other loose files, and we have an app folder, an assets folder, and environments folder. So some of the files in here are just regular kind of web files, we've got a favicon and an index.html page, but we also have some TypeScript files in here. There's one called main.ts, let's just open this up. So this one is used to bootstrap the application. We'll come back and look at this in a bit more detail later in the course. And there is also a file here called test.ts, this is a bit like main.ts, but it is for our unit tests. We don't need to worry too much about what's in here. But what this file does is just makes sure that when we run our unit tests, all of the .spec.ts files get included, and the context and testing environment gets set up correctly. Also included is a polyfills.ts file, which contains some browser polyfills. Mostly the code in this file is commented out, but depending on which browsers we'd like to support, we can come in and uncomment out whatever we need to. You can see the only things that are enabled in here are the reflect-metadata polyfill because that's a part of ES7, and that's not yet supported in most browsers. And also the zone.js file, and that is actually required by Angular itself. Apart from those two things, everything else is commented out. And we're not actually gonna be making any changes in this file. So there are some more configuration files for TypeScript in the SRC folder. Again, these are separated into file-specific for either the application or for testing. And it tells the compiler which files to exclude, and some other options like that. So the app point is for the application, and the spec one is for unit tests. And let's just take a quick look in the app folder here. So this is where the majority of the application that we're building will reside. And in here, we've got an example component and an example module. Now, we're gonna take a look at those files in much more detail very soon. For now, just understand that an Angular application is built of one or more modules, and those modules contain usually one or more components, and a bunch of other things like services, directives, pipes, etc. And we'll be looking at all of those things later in the course, but this is where the CLI post in, in this app folder. We also have an assets folder. And at the moment it's empty, but this is where we can put things like CSS files, or Sass files, images, fonts, and anything else that is Is considered an assets. And lastly, we have this environments folder, and there's a couple of files in here. We've got a production environment file and a development environment file. These are pretty empty at the moment. The production environment just sets the production configuration property to true, and the development version sets the production property to false. So we don't need to worry too much about that, just understand that when we do a production build, Angular will use the environment.prod.ts file. But as we are building the application and running development builds, Angular will use the environment.ts file. So this could be used to specify things like the URLs that we wanna make, HTTP requests too, which are likely to be different in production versus development. So this has been a whistle-stop tour of exactly what Angular CLI installs for us and how it configures the initial seed for the application. There are a number of configuration files. So we've seen that the CLI provides a lot of configuration for us. And this is where it can really save us time. So you can install all of these different things manually and configure them all individually, and it's not completely insane, but it can take a very long time, especially the first time that you need to do it. You need to configure web pack, TypeScript, and all of the other tooling. And it requires a pretty specific configuration that can take a few attempts to get right. Angular CLI takes care of all of that configuration for us, leaving us free to get on with actually building the application. Thanks for watching.