Modern web applications are quite different from those we had a few decades ago. Older web applications did all the data processing on the server and returned a static web page to the user when it was done. When you submitted a web form, it would require your browser to load a new page to get your results.
Modern web apps make this process seamless by handling data processing, rendering, and retrieval in the browser itself — making the user experience seamless without unnecessary page loads. This is done with JavaScript and, in most cases, with front-end frameworks like Angular.
Below, we’ll take a closer look at front-end frameworks, Angular and some of its defining features, how Angular compares to React, and more.
What is a front-end framework?
A front-end framework makes building and maintaining a front-end web application quicker and easier by providing structure and reusable components and code to a development project.
Frameworks take the burden of creating a structure for an application off of developers by providing a set of standards for development. Since these frameworks are well-known, new developers can get started right away with a familiar framework instead of struggling with a custom application.
Front-end frameworks also provide reusable JavaScript components and code that developers can use in their applications.
What is Angular?
AngularJS was one of the first modern JavaScript front-end frameworks. It came to market in 2010 and rapidly became the most popular JavaScript MVC (Model-View-Controller) framework.
AngularJS quickly became popular because of features like dependency injection, routing, and two-way data binding. It significantly changed how Front-End Developers wrote code. Five years later, Angular 2 (or Angular) was released. Unlike AngularJS, which is written in JavaScript, Angular is written in TypeScript.
Until Angular’s release, jQuery was the main JavaScript library most developers used for front-end web development. This was because jQuery made manipulating the DOM (Document Object Model) of a web page simple and easy across different browsers. Still, its non-binding structure often led to spaghetti code.
Angular adds structure and design patterns to front-end development, allowing developers to create more advanced web applications that are easier to maintain and update.
MVC in Angular
MVC is a code pattern with a long history, and it’s used by many frameworks — both front-end and back-end. In Angular, a web application is broken up into these three parts:
- Model. The model represents the data that populates a web page. This data may eventually be stored in a database. For example, a user profile form will have a model of the user’s data in the memory that gets updated both by the form and API calls to a web server.
- View. The view is the UI (user interface), or what you see in the browser. It represents the data in the model to the user in a viewable format.
- Controller. The controller contains the logic for the web application. When a user saves data in a form, it’ll make the API call to update the data on a server. When a user refreshes the page, an API call retrieves that data from the server and updates the view with the new data.
Routing in Angular
Applications built with Angular are called Single Page Applications (SPAs). SPAs run in a web page without requiring a page reload but require a URL to function. Routing is what translates the URL in the web browser to a specific state in the web app.
So, when you go to http://example.com/users, Angular parses this URL, determines that the view you want is the list of users, and then presents that view. The URL is different than http://example.com, and the same page is loaded, but Angular generates a different view.
Traditionally, in back-end web applications, this URL would be parsed by the web server, which would then determine what page would be generated for this URL and return it to the user.
Two-way data binding
Angular uses two-way data binding, which means the data model and the view are inherently linked. Updating one updates the other. Here’s an example in code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app>
Enter Your Name: <input type="text" ng-model="name" />
<br />
Hello <label ng-bind="name"></label>
</body>
</html>
In the code above, ng-app is what’s called a directive in Angular. It tells Angular that this is the root element for the application.
Below that, we have an input field. It has a directive called “ng-model” that binds the input field’s value to the name
variable. When you enter any value in the field, the name
gets updated to the contents of the field.
Below that, there’s a label with the “ng-bind” directive. This directive tells Angular to replace the content of the label element with the value of the name
variable. This means that as you type in the form, the value of the label will update in real-time with each character change.
What’s the difference between Angular and React?
Both Angular and React are popular front-end JavaScript frameworks, but they do things slightly differently. The biggest difference is that Angular is actually a complete front-end MVC framework while React, though it’s been called a framework, is a JavaScript library for creating user interfaces in web apps.
In other words, React only covers the V (view) part of MVC. For the M (model) and C (controller) parts, you’ll have to use other JavaScript libraries.
Another difference between React and Angular is that Angular interacts with the real DOM (Document Object Model) of a web page. When the data updates, Angular changes what you see on the page.
React, on the other hand, interacts with the virtual DOM — a lightweight copy of the real DOM — and has no power to update what a user sees on the screen. With React, when data updates on a web page, the virtual DOM is updated, the differences between the real DOM and the virtual DOM are compared, and only those differences are updated in the real DOM.
Angular also uses two-way data binding, and React only allows data to flow in one direction. Two-way data binding means that when a user updates data on a page, like with a web form, it’s immediately updated in the data model. And, when the data model is updated from an API call, it’s immediately updated in the view. When a user interacts with a form in React, it updates the data model and then updates the view.
How to get started with Angular
Now, you’ve got a basic idea of why Angular is one of the top JavaScript front-end frameworks in use today. Knowing how to develop web apps in Angular is a skill that’s in very high demand.
If you’re ready to start using Angular, check out our Learn AngularJS course. If you’re new to programming in JavaScript, taking our Learn JavaScript course will prepare you by teaching you the fundamentals of the programming language that powers Angular.