Setup Environment for Angular and Create First Angular Application


In this article, we will setup Environment for angular using CLI Command. So Before we start up this article we will first learn about what is angular. Angular 6 is the latest released of angular. So now Angular announced that it is the stable version of angular.

What is Angular?

Angular is the front-end web application framework that’s actually based on TypeScript. It is an open-source framework and maintains by Angular Team at Google Community. Angular 5 is the stable version of 2017. In 2018 angular released there Angular 6.0 Version on 4 May 2018. Now the Angular 6 was released with most of the new features.

If you look back to angular js version you can find the scope and controller concept. After released angular 2.0 angular drop out this concept and work on the hierarchy of the component. So the concept was change but angular has improved with more functionality. Angular is based on TypeScript led by Microsoft Community. TypeScript enables you to use Class-based Object-Oriented Programming, Static Typing, Generics and much more.

Setup Environment for Angular 6 Using CLI

To set up an Environment we need to install Node.js on our local machine. Go to this Node.js link and download node js. Make sure you download the capable version for your system base on x64 and x32 bit. Especially, Node.js is using for install node packages. we will discuss it later.

So after downloading node.js Install it on your local machine. it is the same process which we use for daily routine software installation. Go back to your desktop.

Open up Visual Code editor. This one is the very comfortable editor to work with angular. if it is not installed on your system then download it from this Visual Code link and just install it.

Create a folder on your local machine. Open this folder in the visual code editor. Just go to the file menu and select open project folder.

 

We are using the visual code terminal for creating the angular app. So just press Ctrl+~ to open the terminal. if you are not comfortable with this terminal you can choose the command line also. To use command line interface just go to your start menu on windows and type cmd.

On the visual code terminal, you will write some command to check node latest version is install or not. So check this out just write this code

This will return the version of the Node.js. if you are using the latest version then move forward if not then install the latest version first.

Then insert an command for Creating angular app.

So this command will create your angular app. ng is the directive of angular and new command will create a new project and then specify the name of your project.

it will take some time to create build up the entire project. So wait.

After installation completed you can see the file hierarchy of angular. it will look like this.

After that, we will run our angular application.

To run your angular application you need to move into your application directory. you can use the cd command to get into the directory.

we will show you how to do that.

This command will execute a live server on the default 4200 port. So if you make some changes in your project and save it then automatically will apply. So you don’t need to run your project again and again.

Now you successfully run your angular application.

So now we will make some changes in the angular file and make that more attractive.

In the file, hierarchy finds out the app.component.html file and import this code.

and Then make insert style in the style.css file. This is the global style file.

That’s it. Save all the files.

Now go back to your browser. You will see all the changes are applied and your project looks like this.

Done.

Your Angular application is ready. Now we will Setup Environment for Angular 6 Using CLI.

If you have any question then comment us in the comment section and share this article with your friends. and also Follow us on Youtube, Instagram, and Facebook.

Thank you.

Leave a Reply

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