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.
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.
What is Angular?
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?
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