Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Getting Started With Angular 5 Using Visual Studio Code

DZone's Guide to

Getting Started With Angular 5 Using Visual Studio Code

In this article, we are going to learn how to set up an Angular 5 web application using Visual Studio Code. Read, set, Angular!

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

In this article, we are going to set up an Angular 5 app using Visual Studio Code. We will be using Angular CLI for our demo.

Agenda

  • Install Node.js.
  • Install Angular CLI.
  • Create our first Angular App.
  • Launch Angular App in the browser.
  • Display our custom message on a web page.
  • Conclusion.

Install Node.js

The first step is to install Node.js. Open the Node.js download page from here. You will see the following display.

Download and install the latest LTS version as per the configuration of your machine. The current version of Node LTS is 8.9.2. Installing Node.js will also install npm (node package manager) on your system.

To check the version of node and npm installed on your machine, run the following commands in the command prompt.

  • node -v 
  • npm -v 

Since node and npm are installed, the next step is to install Angular CLI. Run the following command:

  • npm install -g @angular/cli 

This will start the installation of Angular CLI on your machine. This is going to take some time; so sit back, make some coffee, and relax.


Create Your First Angular App

Once Angular CLI is installed successfully, open VS Code and navigate to View >> Integrated Terminal.

This will open the terminal window, as shown in the image below.

Type the following sequence of commands in the terminal window. These commands will create a directory with name " AngularDemo" and then create an Angular application with the name "myFirstApp " inside that directory.

  • mkdir AngularDemo 
  • cd AngularDemo 
  • ng new myFirstApp 

And that's it. We have created our first Angular app using VS Code and Angular CLI.

Launch Your Angular App in the Browser

The name of our Angular application is myFirstApp which is inside the AngularDemo directory.

So, we will first navigate to our application using the below commands.

  •  cd AngularDemo 
  • cd myFirstApp 

Now, we use the following command to start the web server.

  • ng serve 

After running this command, you can see that it is asking you to open http://localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

We'll leave the web server running while we look into the code of this application. Open another VS Code window by navigating to File >> New Window and run the following set of commands in the terminal.

  • cd AngularDemo 
  • code . 

This will open the code file of our application in a new VS Code window. You can see the following file structure in Solution Explorer.

Displaying Our Custom Message on a Web Page

Now, we need to change the message on the web page from "Welcome to app!" to "Welcome to the world of Angular 5!"

To achieve this, open /src/app/app.component.ts file.

Change the value of the title property in AppComponent class to "the world of Angular 5.″

import {  
    Component  
} from '@angular/core';  
@Component({  
    selector: 'app-root',  
    templateUrl: './app.component.html',  
    styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
    title = 'the world of Angular 5';  
}

Just save the file and navigate to http://localhost:4200 (remember that the web server is still running). You can see the updated web page as shown below.

If the web server is running and you make any changes in the Angular application, then you don't need to refresh the web page. It will automatically update itself as you save the application code file. Try changing the title string to any custom value of your choice without closing the browser and see what happens as you save the application.

Conclusion

We have learned about creating our first Angular 5 app using VS Code and Angular CLI. We have also displayed a custom message on the webpage by changing class property.

You can also find this article at C# Corner

You can check my other articles on Angular here

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:
angular 5 ,visual studio code ,web dev ,web application development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}