Hello World With Angular 5

Today, I will be discussing how to set up your first application using Angular 5.

Objective

Set up environment for Angular 5
Install Angular CLI
Create the first project
Run the project

Set up environment for Angular5

It’s very important to set up an environment for development before jumping into coding. For Angular to run, we need to install node.js also. Don't worry! You don’t need to learn node.js for creating an Angular application. Node.js is simply used to manage the dependencies in the Angular application. So, if you can manage dependency on your own, then it is not needed.

Let’s get started.

Go to the official website of Node.js.
Click on "Downloads".

It will give you options for Windows, Mac, or Linux systems. Download the one in which you would be developing the application.
Once downloaded, double-click on the installer file and follow the steps.

Let's verify the installation by going to cmd (in Windows). For checking the version, run the following command.

npm -v

Now, the node.js installation is complete for our requirement.

Install Angular CLI

Angular CLI is a tool to initialize, develop, scaffold, and maintain Angular applications. It helps to create different components in an Angular application like Component, Service, Directive, Pipe etc. It helps in running end to end test cases of the Angular application as well.

Let’s install Angular CLI using npm (node package manager).

Following is the command you need to type in npm command prompt.

npm install -g @angular/cli

Angular5

It will install the full package of angular/cli for the application. It will always install the latest version of the package here. Here, in command, “–g” stands for global, which is saying to install the package at the global level. It will take a few minutes to install the packages.

Create the first project

Now, let’s create the first project in Angular 5.

Angular/cli provides scaffolding for creating new project also. Which is very easy and handles all the dependencies from the beginning.

Run nodejs command prompt as Administrator.
Go to the respective folder in the system where you will be creating the project.
cd <folder path> enter
Run the following code to generate a new project in the folder.
ng new <project Name>
like : ng new HelloWorld

It will create the required files for the project in the folder. As seen above, this installation will take 3 to 4 minutes.
Let’s see the code editors that we can use for the Angular application.

There are many good open source code editors for Angular or any JS files. Following are some of the best ones which I prefer to use.

Sublime Text 3
Visual Studio Code
Atom Editor
Webstorm

You can open your project by going to the folder where it is created.

Run the project

Running an Angular project is very simple. There is a command you need to execute in the node command prompt to run your project.

ng serve

It will compile the application first and it will be available in the port of the system to which it will be listening to.

Angular5

It is normally available at http://localhost:4200

Once the compilation will say compilation successful message in the command prompt window.

Angular5

Congrats…. Your first Angular 5 app is up and running.

Angular5

Conclusion

This is the first article on exploring Angular 5. In the next article, we will be looking into the project structure of the "Hello World" project and we will be creating a new Component and Services. Stay tuned.

Please let me know your feedback/questions via the comments section.