Following is the list of all topics that are covered in this tutorial:

Watch this video on ‘What is Angular 7?’ video:

Angular 6 Tutorial – Learn Angular 6 from Experts

Evolution of Angular

Angular JS was the first one of its kind, written in JavaScript and released in 2010 by Google. Later on, a few versions of Angular JS were released such as 1.1, 1.2, and so on.

Then came the ‘great rewrite’ phase. When new standards and advancement were introduced in JavaScript, the whole scenario of web development started changing. The Angular team had to come up with new versions so as not to get left behind. They had to build the framework from scratch to solve difficult problems they were facing while building large and cross-platform applications. So, they rewrote the whole framework using TypeScript and thus came Angular 2.

The Angular team did not stop there. They kept on improving the framework by introducing new features and fixing various bugs, and a few years later came Angular 4.

Certification in Full Stack Web Development

Note: There is no Angular 3, not because they forgot to name the next version, Angular 3 but because they skipped it. Why? Let’s see. The Angular codebase had various libraries with their own versions such as core, animations, router, etc. Now while all the other libraries were at their 2.3 version, the router alone was at Version 3. The next version had to be 2.4, but for the router going back to Version 2.4 from 3 was not correct. Therefore, to avoid confusion, Google decided to skip Version 3 altogether, and the next version was named Angular 4. ‘Angular’ gradually became a blanket term for Angular 2 and all the other versions released after Angular 2.

Then came the next version, Angular 5. The main purpose of Angular 5 was to make Angular faster. Google managed to improve the loading time and the execution time with Angular 5.

Angular 6, which was released in March 2018, was the next version. In Angular 6, Google focused on a toolchain, for example, Angular CLI, Ng Angular Elements, etc.

Now, moving further in this tutorial, let’s learn more about Angular 6 starting with its installation.

Preparing for a Job interview? Check out our Top Angular Interview Questions!

Application Shell

Installation and Setup

In this section of the Angular 6 tutorial, we will install Angular 6 step by step and then will create a demo application.

Downloading and Installing Node.js

Step 1: We are going to start the whole process by downloading the Node.js environment. Click here to download.

Step 2: After downloading the installer, we can start the installation by making sure that we include the ‘npm package manager’ as shown in the following screenshot:

Installing npm

Step 3: Type in the following command in the terminal to make sure if Node.js is correctly installed:

node -v
npm -v

After running the above, we will see the versions of Node and NPM like in the following screenshot:
node version

To learn more about Angular check out Intellipaat’s Angular certification course.

Installing Angular CLI

Before starting with the installation of Angular CLI, let’s first get fully acquainted with it.

Angular CLI is a command-line interface that is used to Scaffold and build angular applications using Node.js style modules. It helps in creating Angular applications, from scratch as well as adding new elements to an existing Angular application. After installing Angular CLI, we will be able to use all of the ng commands. These commands can save us a lot of time since it practically helps in creating and running projects in a matter of minutes. Some of these commands are listed below:

Youtube subscribe

To create a project named ‘ProjectName’, we can use this command:

ng new ProjectName

The below command is used when we want to open our project in a web browser:

ng serve --o


ng serve --open

When we use the serve command without specifying the port like in the previous command, the project runs on Port 4200 by default. The below command is used when we want to run the project on a specified port (In this case, Port 4201):

ng serve --port 4201

To compile our Angular project into an output directory, we make use of this command:

ng build

To retrieve or send Angular configuration values from/to the angular.json file, we use the following command:

ng config

We use the below command to run the project with an optional custom builder:

ng run ProjectName

This helps in adding elements to our applications:

ng generate


ng g

The below command runs unit tests in our project:

ng test

We can also display a list of all the available commands in Angular CLI along with their short descriptions using the ng help command.

Getting back to the installation part, after the installation of Node JS, let’s now install angular CLI.

Youtube subscribe

Step 1: First, we will type in the following command to install or upgrade the latest Angular 6 CLI:

npm install -g @angular/cli

Step 2: After the installation, we need to type in the following command to make sure if Angular CLI is successfully installed or not:

ng  v

After running the above command, we will see an output screen like the following:
Angular CLI version
Now that we have all the necessary packages and modules with us, in the coming-up section of this Angular 6 tutorial, we will start running a demo application.

Watch this video on ‘What is Angular 8?’ video:

Angular 6 Tutorial – Learn Angular 6 from Experts

Creating an Angular Bootstrap


When Angular was first released, it became an instantaneous success among developers. It was initially designed by a Google employee for the purpose of making it easier to build web applications for their internal projects. This was the birth of AngularJS.

AngularJS is an open-source, JavaScript-based, front-end web development framework that aids in developing single-page applications. After the release, AngularJS was incorporated by some of the biggest brands for their web app development.

However, we know that technologies are ever-evolving. There are new improvements made in every aspect of these technologies continuously. Angular is not different.

Note: Starting from Angular 2, all later versions were written in TypeScript which is basically a superset of JavaScript.

Angular 6, yet another improved version of Angular, was released by the Angular team on May 5, 2018. In this tutorial, we will be discussing the highlights of Angular 6, its key features and, much more about Angular. We assume here that you have a basic knowledge about the previous versions of Angular.

We will start the tutorial with the evolution of Angular, then we will look at the Application Shell, and then we will learn how we can perform Angular installation and setup.

Having doubts? Drop it on our Web Technology Community!

Course Schedule

Name Date
Web Development Courses 2022-05-21 2022-05-22
(Sat-Sun) Weekend batch
View Details
Web Development Courses 2022-05-28 2022-05-29
(Sat-Sun) Weekend batch
View Details
Web Development Courses 2022-06-04 2022-06-05
(Sat-Sun) Weekend batch
View Details

Leave a Reply

Your email address will not be published. Required fields are marked *

Find Best AngularJS Training in Other Regions

Bangalore Hyderabad Chennai Mumbai