Install The Angular And Create Your First Project In Angular

Angular Introduction
Angular is a totally new version of the AngularJS framework, developed by Google. Angular 5 is completely rewritten of AngularJS and it comes with various improvements including optimized builds and faster compile times. In this article of Angular 5 tutorial, we are going to build a small app from scratch and learn to install the Angular 5 configuration. This article will be helpful for the freshers to Install The Angular And Create Your First Project In Angular.

Angular Version
In Angular two major versions of the framework are introduced For Example AngularJS (version 1) and Angular (version 2+). From the version of Angular 2+, it is no longer a JavaScript framework. It has become a typescript framework. There is a large difference between AngularJS and Angular 2+

Angular 5
Angular 5 was announced to the world on November 1, 2017. The previous angular version was 4.4.0. This release focused on making angular smaller and faster to use. Angular is created and maintained by Google. Angular 5 uses a typescript framework.

Features of Angular 5
The features of the angular 5 are as follows:

  1. Modularity
  2. consistency
  3. Maintainability,
  4. productivity
  5. Good ability to catch errors early
  6. Angular 5 is designed with better mobile support.
  7. In Angular 5, “Everything is a component” so it provides a facility of greater code reusability.
  8. Cross-platform
  9. We can build a Single Page Application.

How to install Angular?
To get started with the installation, we first need to make sure we have Nodejs and NPM installed with the latest version. With the node.js the npm package gets installed.

You can download the Nodejs from it official website. Go to Nodejs site

The Nodejs version 8.11.3 is recommended for the users. Users can check the Nodejs version on the console by writing:

node -v
v8.11.3

You can see the image below:-

Here, we can see the node version as 8.11.3. as we install Nodejs. With Nodejs, npm also get installed. To check Nodejs version, type npm -v in the console we can see it the image below npm version 3.5.2 version is installed.

Now we are done with NodeJs and Npm installed in our system. We can move ahead to install Angular using Angular-CLI commands. You can refer to the official angular website:

All this command user have to run in the command line:

npm install -g @angular/cli //command to install angular 6
ng new Angular 6-app // name of the project
cd my-dream-app
ng serve

Let’s see the command one by one. Create an empty folder say with the name project (You can choose the name as of your choice).
Run the first command i.e,

npm install -g @angular/cli //command to install angular 5

We have used -g to install Angular CLI globally. Now, you can create your Angular 5 project in any directory or folder and you don’t have to install Angular CLI project wise, as it is installed on your system globally and you can make use of it from any directory.

Let us now check whether Angular CLI is installed or not. To check the installation, run the following command in the terminal −

ng –version

You can see the Angular CLI version in the image below:

Till here, we have installed Angular. Now let create our first project in Angular. To create the project using the following command:

ng new projectname

As I am naming the project as  XadminApp, we can see the image of the creation of the project process.

After this. The project XadminApp is created successfully. Now switch to the XadminApp folder through the command line by writing command as

cd XadminApp.

After that, run the ng serve command in the command line, ng serve command builds the application and starts the webserver.
The web server starts on the port 4200 by default. Type the URL http://localhost:4200/ in any browser and we can see the output as of below image:-

If you want to change the default port i.e, 4200 to any other port, you can do so by running the command as

ng server –port 4300.

After this command project will be build and the server will start on port 4300.

Type the URL http://localhost:4300/ in any browser and we can see the output. So till here, you have learned to install the Angular and create your first project in Angular.

That’s all from me about angular. If you find any doubt regarding the topic or you want to share more knowledge about the topic please, feel free to drop a comment in the comment box. Happy Learning!