In this tutorial, we will learn about one of the most promising and widely used front-end frameworks called Angular. We will explore its multiple use cases and finally move towards a simple guide through which we can set up an Angular project on our machine. 

Front-end frameworks have revolutionized the web development industry by enabling developers to seamlessly work in an extremely development-friendly environment. These front-end frameworks practically implemented the concept of Single Page Applications (SPAs) especially to ensure code re-usability, structured development, speed, and responsiveness.

What is Angular?

Angular is a frontend framework that facilitates in building Single Page Applications. It follows a highly structured approach towards frontend development and provides various performance benefits when the code interacts with the browser. Most developers fall into the misconception of perceiving Angular as the same as AngularJS. This is not the case; note that AngularJS and Angular are completely different approaches to front-end development. The details are as follows. 

Angular was originally developed by Google in 2009 and was called AngularJS back then. AngularJS used JavaScript to interact with the browser. Sooner, when further versions were released, there was a shift in the development of Angular itself and the underlying programming language was shifted from JavaScript to TypeScript. Since then, the formerly well-known AngularJS got a revised name as Angular. 

Why Angular?

Why should we use Angular when we can develop the exact same application using vanilla JavaScript and its libraries such as jQuery? When developing an application using vanilla JS, you will agree that the developers have to write a lot of code to interact with the browser and its elements. There is a frequent jumping to and from the DOM. Angular wraps up the DOM interaction in such a way that there is very little code that developers need to write for this purpose. Most of the stuff Angular engine takes care of by itself. Doesn’t it sound cool? 

Angular is a component-based front-end framework. We can make re-usable components in such a manner that each component handles its own HTML, CSS and TypeScript code for rendering and dynamic operations. There is a very light responsibility on the application as a whole as the responsibilities are distributed across components. We can talk much more about the advantages of Angular and why we should use it for front-end application development but let’s leave it for some other time as a matter of detailed discussion. 

Setting Up Angular Project

Following is a detailed guide on how you can set up an Angular project on your machine ready for development. 

Before moving towards Angular, we need to make sure that we have Node and npm installed in our system. We will use these prerequisites to install the Angular CLI.

Node and npm Installation

In order to install Node and npm, navigate to the Node.js website in your browser window and click on the option according to your operating system and its configuration. For example, if you’re using a Windows operating system with a 64-bit machine configuration, you’ll choose the following option to download the installer.

After downloading the installer, just run the recently downloaded .msi file and install the setup with default settings.

The above installer will install both Node and npm on your machine. To verify your installation, execute the following two commands:

node -v
npm -v

These commands should display the version of Node and npm respectively. If running these commands results in an error, this means that the installation was not done successfully.

Angular Installation

Once you complete all the Node and npm setup, install the Angular CLI by running the following command.

npm install -g @angular/cli@latest

Running the above command should install the latest version of Angular CLI on your machine. To verify the installation, run the ng -v command. It should successfully display the information about Angular CLI and its prerequisites. 

At this point, we have successfully set up the Angular development environment. Now we can move towards creating a new project. To create a new project, navigate to the directory in which you want to create your project and run the following command:

ng new <your-project-name>

Running the above command will initiate the project creation and Angular will start downloading the required packages for your project. You should be able to see the package installations and project creation as follows. 

Once the command has finished execution, navigate to the project directory. You should see a bunch of folders and files in the project directory as follows. 

To ensure that your project is created successfully, run ng serve in project directory. Running this command will host the Angular application on localhost. By default, port 4200 is the hosting port for every Angular application. Open your browser and type localhost:4200 in the URI bar. You should be able to see your application up and running. 

Congratulations! You have successfully created and hosted your first Angular project. Now you can start the application development using the cool features which Angular provides. 

Angular Building Blocks

There are some mandatory building blocks that lay the foundation of every Angular project; components, routes, services, pipes, etc. You can read about them in detail here. These are the most essential architectural styles which Angular provides to enable small re-usable application elements (components) and the communication between them as well as external services/APIs. 

We can generate each of the core features using ng-generate command.

By now, we have completely set up our Angular project and can play with multiple Angular features which can help us develop a smooth running Single Page Application for our requirements. 

Happy coding!

Key Note

Although you might feel a big overhead to set up and follow the Angular hierarchies to develop an application, in the long run, it is a journey worth investing. When the code base grows, it is extremely easy to code, manage and maintain it using the Angular concepts and architectural patterns. Debugging is easy as the application works on the Single Responsibility Principle. Each service or a component is responsible to do its own task without intervening in others. Communication among in-house elements as well as external services is structured and can be tracked easily. We highly recommend using a framework such as Angular to develop your front-end web infrastructure. 

If you wish to learn more about Angular, you can check out our collection of Angular tutorials.