Let us learn everything about the Angular framework and especially why is Angular required. Also, we’ve described step by step process to install Angular on your machines.
What is Angular?
Angular is a framework for building client applications in HTML, CSS, and either Javascript or Typescript that compiles to Javascript. Typescript is more common in the Angular community because Angular itself is written using Typescript.
Why do we need Angular?
Can we not use simple javascript and jquery to create Web Applications?
- As we build complex applications the Javascript and Jquery code becomes hard to maintain. A mechanism to build an application in a structured/moduled manner is essential.
- There are javascript patterns that can help us with structuring but they are hard to understand for beginners.
- Javascript and Jquery applications are hard to test.
Above mentioned problems led web developers to build various frameworks that made web development easier.
Benefits of Angular
- Gives your applications a clean structure.
- Lots of reusable code.
- Makes our applications easier to test.
Web Applications have two parts:
Front-end:
- HTML
- CSS
- Typescript
- Angular
The front end is also called the Client. It Runs on the Web Browser and is also called the User Interface (UI) of an application. The data is not stored in the client or front end or web browser as the data gets cleared when a user closes the browser or uses a different computer. The Front end of an application is all about the presentation, responding to user actions.
Back-end:
- MongoDB / Postgre SQL
- Node JS
The Backend is on a Web Server and responsible for storing data and processing the data, this is where the business logic is written. Backend gets the data from the front end and then the data is stored in the server, here we have one or more databases, as well as HTTP services or APIs to make this data available to the client.
HTTP (Hypertext Transfer Protocol) services or APIs (Application Programming Interface) are endpoints that are accessible via the HTTP protocol so we can access the data by calling the HTTP request.
Let’s set up your Environment for Installing Angular
Step 1: You need to install the latest version of Node from nodejs.org.
Node is a runtime environment for executing javascript code outside the browser. We won’t be needing any knowledge of Node to build an Angular Application.
- Go to nodejs.org
- Download the latest stable version of Node
- Run the setup file and click install
Step 2: Check the Node version you have installed
Windows:
- Open up the command prompt and type: node –version
Mac:
- Open up the terminal and type: node –version
The minimum version required for building angular applications is version 6.9. So you should have a version that is above version 6.9.
Step 3: Installing Angular from Node Package Manager (NPM)
Windows:
- Open up the command prompt and type: npm install -g @angular/cli
Mac:
- Open up the command prompt and type: sudo npm install -g @angular/cli
Abbreviations:
- npm – Node Package Manager
- -g – Global
- Cli – Command Line interface
Node Package Manager is a tool used to install third-party libraries, we install the Angular library with the command “npm install”, “-g” is used to install it globally and “angular/cli” is the name of the package and “cli” is used for Command Line Interface.
If you don’t use “-g”, angular will be installed only in the current folder and won’t be accessible anywhere else.
Step 4: Check if the installation was successful
- On the command prompt type: ng –version
On this command, you’ll get to know the version of your Angular/cli.
Step 5: Create your first angular project “hello-world”
- On the command prompt type : ng new hello-world
Congratulations, you have successfully created your first angular project. This command creates your angular project and creates a folder “hello-world”. This project has a default code in it.
Step 6: Run your first Angular Project.
- Type “cd hello-world” and go into the folder you just created named hello-world
- On the command prompt type: “ng serve”
- You have to also type “ng serve” inside the folder “hello-world”
- Focus on the highlighted code: ”ng serve”, “localhost:4200”, “Compiled successfully”
“ng serve” is the command used to run your project.
“localhost:4200” is where your project is hosted.
“Compiled successfully” to check if there were any errors.
This will run the default code in the angular project.
We hope you were able to install and run Angular cli latest version on your Windows or Mac machines. In case of any concerns, please let us know in the comments section and we will be happy to help you.
This article is authored by Ajay Sawant and you can get to know more about him and connect with him on our About Us page.