From the course: Learning Angular

Using the Angular CLI - Angular Tutorial

From the course: Learning Angular

Start my 1-month free trial

Using the Angular CLI

- [Speaker] Something pretty common in modern frameworks is to provide a quick way to set up your projects. Angular does this using something called the Angular CLI. So let's take a look at what it is and how it works. A CLI is a command line interface, or a set of tools that you access using a terminal application and that allow you to perform a variety of common tasks. The Angular CLI is mainly used to scaffold an application. That means creating an app with common settings quickly using simple commands. Angular CLI is highly opinionated, so the basic scaffolding command is going to set up an application that may not be the way you would set up your own application, but it's pretty common to use to get started, and I'll walk you through what it does and how to customize things. Using the CLI requires a separate installation, and you have to make sure that you've already installed Node.js, as well as Git. Within Node.js, you'll also be using NPM, or the Node Package Manager, which means you should be familiar with those technologies. The CLI has several commands that you can use to create, serve, build, generate components, and much more. They all start with the NG prefix. So let's take a look at the most common commands, some of which we'll be using in this course. The first command that you'll get used to is the NG New command. It allows you to create or scaffold a new application. It creates all the files you're going to need for a basic project and then some. We'll cover that file structure in the next video. You use it by typing in NG New, and then the name of the project. After NG New, you'll probably want to see what your application looks like while in development. For that, you use the NG Serve to run the application in development mode. This will use Webpack, which is a tool that processes the code in your application and runs a temporary live server that will add a update as you make changes to your project. Once you are done developing your application, you'll probably want to publish it to a server. The NG Build command will process your files and get them ready for deploying. This is a slightly different process than using NG Serve because it produces files that you can push or pass onto a server. Finally, the Angular CLI provides a set of commands that will automatically generate different pieces of angular code for you. The NG G command can be used with different types to generate the code for things like comments, types, and other pieces that you can use in your application. Let's go ahead and install the CLI and then try some of these commands. To install the Angular CLI, we're going to type in NPM install -G, because this will be a global installation, and then @angular, and then /CLI. Alright, let's go ahead and clear this out so we can have a clean screen. And then, we're going to create a new application by first switching to the desktop. So I'll do a CD and then a ~/Desktop. And then, I'm going to create a new app using the NG New command, and then typing in the name of my application. I'm going to call this learnangular5. Once that's done, let's go ahead and clear out the screen again. And we'll open this folder up in my favorite editor. For this course, I'm using Visual Studio Code. And you'll notice that inside this Learn Angular folder, we have a lot of folders as well as other sub-folders. Now let's go ahead and see what this application looks like in a browser. To do that, I'm going to switch back up to my terminal. And now I need to switch to the learnangular5 folder that I created. And then, I can issue any of the NG commands. So the one that you're going to use most often is the NG Serve command. Now that has a -o option, which will open up a browser while it's serving a copy of the application. Alright, so let's take a look at what we get when we install Angular JS. So I'm going to open this up in my favorite text editor. I'm using Visual Studio Code for this course. You can see all the different folders are right here. And we're going to be covering those in the next video, but before I do that, I wanted to show you a slightly different command that you can run. Let's go ahead and hit Ctrl C and clear this out. And now we're going to run the NG Build command. NG Build is going to generate a new folder, and in that folder, this DIST folder, are going to live all the files that you would use to upload to a server if you were putting this somewhere on the Web. The Angular CLI is going to save you a lot of time when creating projects. Now it is highly opinionated, so you can see that there are a lot of different folders as well as configuration files.

Contents