Creating your first Angular application : Hello World
Table of contents
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.
- 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
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.