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.
However, we know that technologies are ever-evolving. There are new improvements made in every aspect of these technologies continuously. Angular is not different.
Watch this ‘What is Angular 7?’ video:
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.
Following is the list of all topics that are covered in this tutorial:
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.
Watch this ‘What is Angular 8?’ video:
Evolution of Angular
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.
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.
The 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:
Step 3: Type in the following command in the terminal to make sure if Node.js is correctly installed:
After running the above, we will see the versions of Node and NPM like in the following screenshot:
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, 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:
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:
To retrieve or send Angular configuration values from/to the angular.json file, we use the following command:
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:
The below command runs unit tests in our project:
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.
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:
After running the above command, we will see an output screen like the following:
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.
Table of Contents
Angular Application Creation and Architecture: In this tutorial section, we will be creating a demo Angular application, generating components, and running our application using Angular CLI. Here, we will be guiding you through the architecture. You can find the following content in this module: Creating a Demo Application Architecture Components and Templates NgModules Metadata Data Binding Directives Services Dependency Injection Read More
Angular 6 Features
Fundamentals of Angular and Its Latest Features: In this tutorial, we will be discussing Angular fundamentals. This part of the tutorial highlights the following content: Angular Fundamentals Observables HttpClient Routing and Navigation Animations Upgrading from AngularJS What’s new in Angular? Watch this video on 'What is Angular 8?' from Intellipaat: [videothumb class="col-md-12" id="K5FL6-6Wmjw" alt="What is Angular 8" title="What is Angular Read More
How to create an Angular Bootstrap?: In this section of the Angular 6 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 with a single click the input will be displayed on the screen. Watch Read More