Introduction to Angular
Web development is a dynamic field where it is a common phenomenon to see updates and changes being released every now and then. In fact, we can safely say that the methodology and framework that are being followed today are completely different from what was followed a decade ago.
Now let us pause and think why has there been such monumental changes in this field? Most experts will say the same ‘To cater to a better user experience’. And to achieve this, they state that the application has to be lightweight and should be able to process large data easily. Not just that, it has to be easy to develop and maintain for the developers.
In this blog, we are going to discuss in detail one such change in the web development arena - a modern web development frameworks called Angular. We are also going to see how to create a sample project using it.
Table of contents
- Introduction to Angular
- What is a Single Page Application?
- Features in Angular
- Create a sample application using Angular
- Wrapping up
Introduction to Angular
Angular is a JavaScript-based open-source framework used for building client-side dynamic web applications. It was introduced by Google in the year 2012.
The angular framework can be used to develop single-page applications. Angular code is structured and helps the developers/users to understand the application easily. Also, it supports various platforms like mobile, web, and desktop natives.
What is a Single Page Application (SPA)?
As the name suggests, it has only one page through which the entire application runs. It doesn't require the reloading of the entire browser content as it works within the browser.
Consider the website https://angular.io, and start clicking on the options that are available on the page, on navigating around the page, you would have noticed that the entire page is not reloading on clicking on the options. Only the requests are passed to retrieve the data as you navigate through the application.
In general, the SPA does not rely completely on the servers. It can maintain state on the client-side completely. Moreover, in a traditional application, once the users access the page and perform some operation, the entire page gets reloaded based on the response from the server-side.
In the case of SPA, on performing any kind of operations on the page, the code makes an AJAX call and the response comes as JSON data. The UI content that is required to be displayed on the page is already present on the client-side, whereas the data required to be displayed on the page will be retrieved from the server-side.
Features in Angular
Here are some key features of Angular -
Angular CLI
The Command-line interface that comes in with angular makes it easier to create the applications, create/ add a new component, and can be used to debug and deploy them.
Less code
In a traditional application, more lines of code are required to design an application while performing the document object model (DOM) operation. But in the case of Angular, very minimal code changes are enough to manipulate the DOM.
Unit testing
Testing the angular application helps to check the app's status as well as reduces the time in performing the unit testing. Testing framework - Karma was developed by the Google team for testing Angular applications.
Server-side connectivity
Angular can connect with server-side technologies like node.js, .NET, PHP. This makes angular as a universal client-side application.
MVC Architecture
MVC stands for the Model View Controller. It's an architectural pattern that is being used for developing applications. Usually, developers can split the code as per the MVC pattern and are required to connect the same. But in Angular, if developers segregate the application, it does connect it on its own and this saves a significant amount of time. In general, the data required for the application is managed by the Model, the View is used to display the data, and the Controller acts as a connector between View and Model layers.
Data binding
In Angular, the view layer and data layer are in perfect synchronization. The view layer exactly displays the data layer. Which helps the developers to save a considerable amount of time.
Speed and performance
Speed and performance is another important aspect that makes Angular as our go-to front end framework. The loading time of Angular apps is much faster than many other front end frameworks. Further, the code gets separately automatically based on the user's loading and rendering requirements.
Creating a sample application using Angular
In this section, let's see how to create a sample application using Angular.
Step 1
The first step is to install Node.js which enables the NPM (node package manager) in your machine. NPM helps in installing and setting up libraries that are needed for running an Angular project. To install Node.js, go to https://nodejs.org/en/, then download and install the latest available LTS version of Node.js in your local machine.
Step 2
Once the setup of Node.js is complete, the next step is to install Angular CLI (command-line interface) through which we will be creating applications, components, etc., for our project. To install Angular CLI open the command prompt, and run the below command.
npm install -g @angular/cli
Step 3
The next step is to create our application. To do so, run the below command from the command prompt window. Before running the command, change the directory of your choice and then run it. The application will be created in the directory from which the command is triggered.
ng new my-application-name
My-application-name can be replaced with the name of your application. After executing the command, users will be prompted to choose whether Angular routing is required or not, after choosing that, users will be required to choose the type of stylesheet. Please refer to the above image.
Step 4
Now the application is created and stored in the local machine. To work on the Angular application, IDEs are required. There are plenty of IDEs that are available in the market to develop angular based applications. In this article, we are using MS Visual Studio Code. In the Visual studio code, open the folder that has the angular application.
Wrapping Up
The angular framework is a powerful and user-friendly framework for building responsive web applications. The built-in features of Angular are one of the major reasons for the success of this framework.