Start your first Angular 4 Project

Recently I started learning Angular JS, it was very difficult for me to find some good detailed articles or beginner tutorials on Angular JS. I have to read from many different articles, books and tutorials. So I decided to put step by step help for beginners like me, so that they get complete required help from one single channel. Since AngularJS is a very rich framework so I decided to write in a series of post that will help beginners who want to learn or work on SPA(Single Page Application) using AngularJS. So lets start with a short but detailed AngularJS tutorial where you will be able to quickly understand the power of AngularJS.

First you need to configure your machine to be able to work with Angular JS framework. For that you have to install Node JS to your computer.

If you are a Windows user, click here to go to download page. Download the suitable installer and install it. Then both Node JS and npm will be installed on your machine.

If you are a Linux user, open your terminal and type the following commands.

sudo apt-get update

sudo apt-get install nodejs

sudo apt-get install npm

After installing Node JS and npm, you can check their versions using a command. Open your cmd or terminal and type node -v to check whether node js is installed or not. Then type npm -v to check the availability of npm. If they are available now, you will get the versions of them on your cmd or terminal.

Then you have to istall Angular CLI(Command Line Interface) to work easy with Angular. The Angular CLI makes it easy to create an application that already works, right out of the box. Type the following command to install CLI.

npm install -g @angular/cli

If you want to check the CLI version, enter this command on your cmd. - ng --version

You will get this kind of output.

Now you are ready to go with Angular JS! Let's create a project first.

Go to a folder where you wish to place the project. It should not be the htdocs or www folder. But I place in htdocs folder as I place all projects there. Angular JS framework uses cmd or terminal heavily to create the needed parts for a project. Even for creating a new project we ahve to use cmd/terminal. We can not create a project manually since Angular projects are connected with so many dependencies and files. So we are going to start a project called sampleApp.

Create a new project : ng new sampleApp

Then you must go inside the project folder from cmd, to run the project.

Navigate into the project : cd sampleApp

Run the project : ng serve --open OR ng serve

Then the browser will be automatically opened and run the project.
If you enter just ng serve on cmd, browser will not be automatically opened. You have to run the project manually entering URL to the browser!

Go to the cmd and check whether it is running or not. It it is ok, output is like this.

The cmd is telling us what to type in the URL bar of the browser. Look at the first line! So now you have to type  http://localhost/4200 in you browser URL bar, to display the project.
However, finally when the project runs without any trouble, you will get the default page created by Angular JS like this.

That's all! Now you have created a new project and ready to go ahead. My next articles will be based on working with Angular JS framework. I'm not an expert and just started to learn Angular. So I will try my best to give you some knowledge.

Good Luck!