Back when Angular was first released, it became an instant hit 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.
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.
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 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.
Learn Angular in 16 hrs from experts
Now, moving further in this tutorial, let’s learn more about Angular 6 starting with the installation.
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.
Step 3: Type in the following command in your terminal to make sure Node.js is correctly installed.
After running the above commands you 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, 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:
To create a project named ProjectName
ng serve –open
This command is used when you want to open your project in a web browser.
When we use serve command without specifying the port like in 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)
To compile your Angular project into an output directory
To retrieve or send Angular configuration values in angular.json file
To run the project with an optional custom builder
This helps in adding elements to your applications
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
Step 2: After the installation, type in the following command to make sure Angular CLI is successfully installed or not
After running the above command you will see an output screen like the following screenshot.
Now that we have all the necessary packages and modules let’s start by running a demo application.
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 [cf7mail id="1" Read More
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 [cf7mail id="1" btntxt="Get Started" heading="Learn Angular in 16 hrs from experts"] Fundamentals Some of the Angular Fundamentals are: Observables Observables Read More
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
Download Interview Questions asked by top MNCs in 2019?