Creating an Angular Application

Bytneustaedter
  1. Launch Visual Studio Code using the pinned “code” folder described during Setup and Installation.
  1. We’re going to use the terminal window to create our first Angular application.
  2. The Angular CLI is accessed by using “ng” followed by a command such as “ng version“.
  3. In the terminal window type “ng new MyFirstAngularApp” and press ENTER.
  4. When asked which stylesheet format to use, as shown below, click the down arrow key and select “Sass (SCSS)” by clicking ENTER . More on this later.
  1. You’ll then be asked if you want server side rendering (SSR). Simply hit ENTER to select the default of NO.
  2. Angular will now auto-generate a stub application for you as shown below.
  3. Notice on the left hand side under the “Code” section, your new application name MyFirstAngularApp is listed. Click the arrow to the left to expand it as shown below. Clicking the arrow again will collapse the application tree.
  1. This application tree is the navigation or folders tree.
  2. In order to get started using this application, let’s open the MyFirstAngularApp folder by clicking “File/Open Folder“.
  3. Now type “C:\code\MyFirstAngularApp” as the folder name and click “Select Folder“.
  1. After VSCode refreshes, we’ll now see that MyFirstAngularApp is at the root of the folders tree, and after opening the terminal window, we can see that the current directory is “C:\code\MyFirstAngularApp“.
  2. We are now ready to run our application.
  1. Using Angular CLI from the terminal, we can type “ng serve” and hit ENTER to start our application.
  2. Angular CLI will start by building the application and then will make it available to use under the URL “http://localhost:4200/“.
  3. If you look at the screenshot, you’ll notice that in the terminal window Angular CLI provides us with a way to launch the web application by clicking on the URL in the terminal window.
  1. Hold down your CTRL key while clicking on this link to launch your browser and see what the default application looks like. Alternatively you can click the link above, or type the URL in a new tab in your web browser yourself, whichever you like.
  1. Congratulations! You’ve just created and run your first Angular application.
  2. Oh, one last thing, please remember to pin your application to the VSCode menu so you can get back to it easily in the future.