Kick Start With Angular 8 For Beginners

Shobana Sundararajan

13 Comments

Join the conversation! Your thoughts help the community grow.

Kishore Chakkirala6y ago
Great Initiative. Keep Adding more concepts and different types of applications can be done using Angular in the same series.
- Shobana Sundararajan6y ago
  Sure sir, Thanks for your feedback.
- Shobana Sundararajan6y ago
  Sure sir, Thanks for your feedback.
Sourav Kumar Das6y ago
Nice Article.
- Shobana Sundararajan6y ago
  Sourav Kumar Das Thank you, sir.
Chittaranjan Swain6y ago
Nice article.....
- Shobana Sundararajan6y ago
  Chittaranjan Swain Thank you, sir.
Vidyadharran G6y ago
Shobana Sundararajan Nice and thanks for sharing and keep contributing more:)
- Shobana Sundararajan6y ago
  Thank you vidyadharran.
Sundaram Subramanian6y ago
Good kick start. Keep sharing
- Shobana Sundararajan6y ago
  Thank you, sir.
Mahesh Alle6y ago
Good start up. Nice Article. Keep it up.
- Shobana Sundararajan6y ago
  Thank you, sir.

Hello, everyone, this is my first article for C# corner, and I would like to share my knowledge and contribute more articles in Azure & Angular. In this article, I will explain about kick-starting with Angular 8 and its new features with the installation of Angular. Before getting started I would like to give a brief explanation about what Angular is. Angular is an open-source client-side framework developed and released by Google for developing web and mobile applications. The first version of Angular is Angular JS and the later Angular versions released are Angular 2, 4, 5, 6, and 7, and now the latest release of Angular is Angular 8.

So Angular 8 is regarded as a core framework by developers because of the usage of a wide range of UI libraries such as Angular materia. There are many third-party UI libraries such as Bootstrap, Prime Ng, and Ng Zorro. Also Angular 8 provides groups of libraries and frameworks which support for the development and testing of web applications. The major advantage of using this framework is to develop Single Page Applications (SPA’s) and it uses an MVC-based structure to perform unit testing before deployment. For more information, you can find out about Angular from the following link.

What’s new in Angular 8?

Ivy: Next-gen Renderer.
Supports Typescript 3.4 and above.
Differential Modern JavaScript Loading and enhanced web worker bundling.
Router backward compatibility.
Dependencies update.
Bazel support.
Builders API.
Router backward compatibility.
Opt-in usage sharing.
Support for location.

Setting up Angular 8

Before installing Angular 8 we need to install Node.js; the recommended version is 10.16 or above, and you can download Node.js from the following link
Recommended IDE’s for developing Angular applications is Visual Studio code or Visual Studio 2015 or above, and you can download the code from the following link
Install typescript 3.4 or above.

Since Angular is based on typescript, we can take an overview of what typescript is. Typescript is an open-source programming language that has been developed and maintained by Microsoft, and it’s totally based on the OOPS concept. The typescript is a superset of JavaScript. You may be wondering how typescript will be supported by a browser? But the actual thing is that the typescript is been treated as a transpiler. The transpiler is used to convert from one language format to another format. So the typescript code will be converted to JavaScript code after compilation so, the compiled JavaScript code will be executed in the browser.

Further, we need to install the dependencies packages of Angular. So, for that open command prompt and follow the steps to kick start with it.

Enter the following command to install Angular 8:

npm install –g @angular/cli

Here,

npm denotes node package manager.
-g states that the packages to be installed globally.
cli represents command line interface.

We have installed the dependency packages and now we can check the installed version of Angular by using the following command

ng version

Creating a new Angular project using Angular CLI

The next step is we are going to create a new Angular project and for creating a new project enter the following command.

ng new project_name
Add ‘Y’ if you want to use Angular routing or put ‘N’ if you don’t use angular routing.
And choose the stylesheet as CSS and press enter.

It will take some time to create a new Angular project. After that, open the project using a terminal and execute the following command to view the output in the browser.

ng serve –o

The above command is used to compile and we can see the output in the browser, that the project is been running.

In this article, we have seen about creating a new Angular project and I hope this article will be useful for beginners. In my next article we will be seeing about components and usage of it.