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 Angular JS.
Angular JS is an open-source, JavaScript-based, front-end web development framework that aids in developing single-page applications.
After the release, Angular JS was incorporated by some of the biggest brands for their web app development.
But we know that the technologies are ever-evolving, there are new improvements made in every aspect of the technology. Angular is a case in point here.

Watch this What is Angular 7 video

Note: Starting from Angular 2 and all later versions after that are written in TypeScript which is basically a superset of JavaScript.
Angular 6, yet another improved version of Angular, was released by Angular team on 5th May 2018. In this tutorial, we will be discussing the highlights of Angular 6, the key features and, much more about Angular.
We assume that if you have a basic knowledge about previous versions of Angular.
Following is the list of all the topics that we are going to cover in this tutorial.

In this part of the tutorial, we will look at the Evolution in Angular, then we will look at The Application Shell and how we can perform angular Installation and Setup.

Watch this What is Angular 8 video

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 to not get left behind. The angular team had also run out of improvements to make in the initial version of Angular thus they had to build the framework from scratch to solve difficult problems they were facing while building large and cross-platform applications. And so they rewrote the whole framework using TypeScript. And from there came Angular 2.
  • The angular team kept improving the framework by introducing new features and fixing various bugs and a few years later came Angular 4.
  • Note that there is no Angular 3. Not because they forgot to name the next version, Angular 3, but because they skipped it. Here’s why, The Angular codebase has various libraries with their own versions such as core, animations, router, etc. Now while all other libraries were at 2.3 versions, the router was at version 3. The next version would have been 2.4 but for a router, coming back to 2.4 from 3 was not correct. So to avoid any confusion, Google decided to skip version 3 altogether and the next version was named Angular 4.
  • Angular became a blanket term for Angular 2 and all other versions that were released after Angular JS.
  • Then the next version, Angular 5 came. The main purpose of Angular 5 was to make angular faster. Google has managed to improve the loading time and the execution time with Angular 5.
  • Angular 6, which was released in March 2018, is the next version. In Angular 6, Google focused on a toolchain, for example, Angular CLI, ngAngular Elements etc.

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

The Application shell

Installation and setup
In this section of this tutorial, we will install Angular 6 step by step and then create a demo application.
Downloading and Installing Node.js
Step 1: We are going to start by downloading the Node.js environment. Click Here to download.
Step 2: After downloading the installer, you can start the installation making sure that you include the npm packages as shown in the following screenshot.
Installing npm
Step 3: Type in the following command in your terminal to make sure Node.js is correctly installed.

node -v
npm -v

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

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 in an existing Angular application. After installing Angular CLI, you 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:

  • ng new ProjectName

To create a project named ProjectName

  • ng serve –o

ng serve –open
This command is used when you want to open your project in a web browser.

  • ng serve –port 4201

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

  • ng build

To compile your Angular project into an output directory

  • nf config

To retrieve or send Angular configuration values in angular.json file

  • ng run ProjectName

To run the project with an optional custom builder

  • ng generate

ng g
This helps in adding elements to your applications

  • ng test

This command runs unit tests in your projects
You 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, let’s now install angular CLI.
Step 1: Type in the following command to install or upgrade the latest Angular 6 CLI

npm install -g @angular/cli

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

ng  v

After running the above command you will see an output screen like the following screenshot.
Angular CLI version
Now that we have all the necessary packages and modules let’s start by running a demo application.

Table of Contents

Angular Architecture

Angular Application Creation and Architecture

We will be creating a demo Angular application, generating components and running our application using Angular CLI. In this tutorial, we will be guiding you through the Architecture. You can find the following content in this module: Creating a demo Application Architecture Components & Templates NgModules Metadata Data Binding Directives Services Dependency Injection Creating a Read More

Angular 6 Feature

Fundamentals of Angular and its latest feature

In this tutorial, we will be discussing Angular Fundamentals. This part of the tutorial highlights the following content: Fundamentals Observables HttpClient Routing and Navigation Animations Upgrading from AngularJS What’s new in Angular Fundamentals Some of the Angular Fundamentals are: Observables   Observables in Angular applications offer support for transferring the messages between publishers Read More

Angular Bootstrap

How to Create an Angular Bootstrap

In this section of the tutorial we will be creating an Angular Application and integrating Bootstrap in it. When we are done with this, we will be able to give an input as a user into the application and after the click of a button that input will be displayed on the screen. So, Read More


Recommended Videos

Leave a Reply

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