Creating your first Angular application : Hello World

Table of contents

No heading

No headings in the article.

This guide aims to give you a quick start on how to set up your development environment and create your first Angular Application.

After reading this post you will be able to set up your Angular Application easily, it does not require any prior knowledge in Angular at all.

• What is Angular?

Angular is an open-source, JavaScript framework written in typescript. Google maintains it, and it’s primary purpose is to develop single-page applications. As a framework Angular has clear advantage while also providing a standard structure for developers to work with.

The Angular framework comes with features like data-binding, change-detection, forms, routing, navigating and also Http implementation.

• Prerequisites –

To install Angular or use angular-cli on your local system, you need the following

  • Node.js

Angular is built on top of node.js, Node.js is a JavaScript runtime environment that enables you to run js code outside of a browser Install it from here - nodejs.org.

blog-1.png

  • NPM

Npm is a package manager used to download JavaScript packages built to run on node. They come bundled together when you install node.js Install it from here - nodejs.org.

Now after installing node and npm we can use the angular-cli command to develop our first Angular application.

• Why use angular-cli?

Fortunately, the angular-cli can resolve all our issues by generating all the required files for us. When it is done we have a basic angular project that is runnable and contains pretty much everything to get started.

To use the angular-cli you need to install it using npm, type the following command in your command line to install it

  • npm install -g @angular/cli

The above command tells the npm to install angular-cli on your machine globally and is accessible from every directory on your system.

Now we can move forward and can create a new project.

For that open command line in the directory you want to create your project in. Now using the ng new command we can create a new project. After the ng new keyword type the name you want for your project.

  • ng new angular-project

If you are prompted to enforce stricter type checking, you can respond with yes.

Hurray, our first Angular Application is now ready.

Now to run it locally navigate into your new project with the following cd command

  • cd angular-project

To run your angular-project application use the command ng serve

  • ng serve

This will navigate you to your browser and on localhost:4200 you will see your new starter application

blog-2.png

Thanks a lot for reading, if you got any questions or doubt, feel free to ping me on Twitter twitter.com/GoyalMonesh

I hope it was a great read for you. If you have any feedback please share it in the comments below.