Angular development – an introduction to the popular JS framework

What are the front-end framework’s strengths, weaknesses, and what kind of web applications is it used for?

Web Development • UPDATED ON June 3, 2021

John Adam

Author

As of 2021, the JavaScript-based Angular framework is chosen for more front-end web development projects than any other technology other than React.js. According to the 2020 State of JavaScript report, 56% of front-end JS developers were actively using Angular, compared to 80% using React and 46% using Vue.js, the third most popular option.

Why is Angular development such a popular choice for dynamic web applications? What are the frameworks strengths and drawbacks? And what are examples of the kind of applications Angular might be a good choice for and others it may be less well suited to?

Angular as part of the JS ecosystem for front-end web development

Before going into more detail on Angular as a front-end technology choice, let’s quickly cover some fundamentals:

Static websites

The web page content is static or does not change. Static pages are created using HTML and CSS.

Dynamic websites

Dynamic or interactive websites change the content being served to the user without needing to be refreshed by being reloaded in the browser. For example, a Facebook or LinkedIn feed will load comments made by another user in real-time.

JavaScript

Real-time updates to websites or web-based apps require client-side rendering. Javascript, a lightweight interpreted programming language, is the programming language of choice for web applications that need to make use of client-side rendering.

DOM

Document Object Model. The object-level representation of a web page. You can write JS code to manipulate web page objects within the DOM.

Front end (of website)

The part of a website that the user interacts with directly. It can also be referred to as the ‘client side’. The front end includes items that users experience directly: text fonts, colour and styles, images, graphs and tables, buttons, navigation menu and so on. The languages used to develop the front end of a website are HTML, CSS, and JavaScript.

The structure, design, behaviour, and content of everything seen on browser screens when websites, web applications, or mobile apps are opened, is implemented by front-end developers. A good front end must have high performance (load quickly) and be responsive. A responsive page appears correctly on devices of all sizes from computer monitor to smartphone. All key parts of the website’s front end should render in a way that is appropriate to the screen size.

SPA

Single Page Client Applications – the entire web application or website is available under a single URL.

JavaScript framework

A JavaScript framework is an application framework written in JavaScript where programmers can manipulate the available library functions within templates. JS frameworks allow you to create, modify, and delete UI elements like lists, tables, etc. Frameworks can be for the front end or back end.

Front-end JS frameworks

Some of the more popular front-end JS Frameworks are:

Angular

An open-source web application framework. Angular is a component-based framework that uses declarative HTML templates. The framework’s compiler translates the templates to optimized JavaScript instructions.

React

React is not technically a framework; it’s a library for rendering UI components. React is used in combination with other libraries to make applications eg. React and ReactDOM. Because React and ReactDOM are so often used together, React is colloquially referred to as a JavaScript framework.

Vue

Vue, like Angular, extends HTML with some of its own code. Apart from that, it mainly relies on modern, standard JavaScript.#

About Angular

Angular is a JavaScript open-source front-end framework that is mainly used to develop single-page web applications (SPAs) and dynamic web applications.

Google released Angular.js, as earlier versions of the framework were known, as an open-source framework in 2009. It has since been maintained and further developed by a combination of developer communities and continued Google support. Versions after Angular 2 are referred to as just Angular.

Angular is a framework that uses HTML and TypeScript to build single-page client applications. It extends HTML attributes with directives. Angular implements the Model-View-Controller (MVC) and Model-View-View Model (MVVM ) architectural patterns that form a solid basis for application performance.

The MVVM separates data, the model and the controller. the separation of data from design and visual representation makes complex web applications easier to manage. Data binding ensures changes that happen on the website initiate changes to the DOM. If you make changes to the design, those changes are reflected on the site thanks to the two-way data binding.

Angular is supported by all modern web browsers like Safari, Chrome, Mozilla, Opera, and Internet Explorer, etc. It is also compatible with mobile browsers. Angular development is fully JavaScript and completely client-side. It is compatible with desktop and mobile browsers. It is not a plugin or a native browser extension.

Angular development basics

Briefly, Angular consists of:

Data Models

A data model is a collection of data used by the application.

Views

Angular Views represent this data. A view can also be said to be a group of display elements that can be created or modified together. Views can have hierarchies. They are represented with an HTML template and a component class. A view can access the data model and you can have several ways of displaying model data, using views.  Angular renders a view under the control of one or more directives.

Controllers

Controllers present some of the data from the Model. Angular controllers control the data of Angular applications. They are regular JavaScript Objects.

Data binding

Data binding is a process that allows applications to display data values or changes to data, and also respond to user actions like a mouse click, keystrokes or a touch. It is the mechanism that binds the applications User Interface (UI) to the data models.

With data binding, Angular handles the details of changes in data from the page, listening to events, updating application data and so on. You just have to declare the relationship between an HTML widget and a data model and let the framework handle the details.

You must learn data binding concepts to fully understand Angular.

Components

Angular applications use components to display items in the browser or application. A component consists of the following parts:

1. TypeScript class called the component class.
2. An HTML file is the template for the component.
3. A CSS file (optional) for style and format.

Angular development pros

Some of the advantages of using Angular in web development projects are:

• Two-way data binding
• DOM Manipulation
• Improved Server Performance
• Faster Application Prototyping
• Responsive web
• Highly testable products
• Use of directives
• Plain HTML templates
• Fast development

Angular development cons

• JavaScript support mandatory
• Requires knowledge of MVC and MVVM patterns
• Complexity of features like scopes, directives

Applications developed using the Angular framework

Angular can be used to create applications that span various domains and categories such as

• Communication
• Developer Tools
• Education
• Food & Drink
• Health & Fitness
• Sports
• Transportation
• Travel

Some popular apps based on angular development:

• YouTube for PS3
• Netflix
• Upwork
• Paypal
• DoubleClick
• Gmail
• com
• istock

Examples of applications Angular probably isn’t a good choice for

As with any web development technology, Angular isn’t suitable for any kind of front end you might want to build. Some examples would be:

Websites with static content

Angular development generally doesn’t make sense for simple applications such as company websites designed to deliver static content. Using Angular to develop such sites will only add additional code and functionality that will not be used as well as unnecessarily increasing costs build and maintenance costs.

Projects with limited resources

Angular applications should be built and maintained by skilled Angular developers. Because Angular developers are more expensive than developers in PHP and other languages that great static websites can be built using,it the framework probably isn’t a good choice for smaller projects with corresponding budget constraints.

Gaming Applications and heavy analytical applications

Angular is not effective for the development of higher interactive UIs such as those found in gaming applications.  Angular tests every DOM object before it changes its position. Also, gaming apps require a lot of mathematical analysis, which Angular can’t handle.

Getting started with Angular

Because Angular is a JavaScript framework, it can be added to an HTML page with a <script>tag. Angular extends HTML attributes with Directives and binds data to HTML with Expressions.

The quickest way to get started is to point your HTML <script>tag to a Google CDN URL. This way, you don’t have to download anything or maintain a local copy.

To point your code to an Angular script on the Google CDN server, use the following template:

<!doctype html>
<html ng-app>
  <head>
    <title>My First Angular App!!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  </head>
  <body>
  </body>
</html>

Angular Directives

Angular extends HTML with the use of directives. Directives are markers on a DOM element used to specify custom behaviour for that element. Angular directives begin with the prefix “ng”. Some of the in-built directives in Angular are: “ng-app”, “ng-init”, “ng-model”, “ng-bind”, “ng-repeat”  and so on.

Some of the commonly used directives are:

ng-app

This directive defines an Angular application. It defines the root element of the application.

ng-model

This directive binds the value of HTML controls like the text, select, or text area to application data. It binds the value entered to an application variable name.

ng-bind

This directive binds application data to the HTML view. The ng-bind directive is used by Angular to replace the content of an HTML element with the value of the specified variable or expression. If the value of the variable changes, the content of the specified HTML element also changes.

Downloading and hosting Angular files locally

This option is for those who want to work with Angular offline or host the files on their own servers.

Angular Components

As you get started with Angular, you must learn about modules, controllers, expressions, directives, scopes, filters, DOM, forms, ajax, validation, services, animation, dependency injection, views, w3.css  and so on.

We have covered briefly some topics like directives and views. A detailed explanation of all components is out of scope for this article but you can read more at the Angular.io guide.

Angular code example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

Compile and Link process used in Angular development

Angular’s HTML compiler allows the use of directives to attach new attributes to any HTML element. Angular compilation takes place in the web browser automatically. It does not have any pre-compilation or server-side process.

Angular uses the <$compiler> service to compile an HTML page. The compilation process triggers once the HTML page (static DOM) is completely loaded.

It occurs in two phases:

Compile: Checks the entire DOM and collects the directives

Link:  Connects the directives with a scope and produces a live view

IDEs used in Angular development

Some of the Integrated Development Environments (IDEs) used by Angular include:

• Aptana
• Eclipse
• Sublime Text
• Visual Studio
• WebStorm

Further resources

The Angular documentation includes the Developer Guide covering concepts and the API Reference for syntax and usage.

In summary

This blog covered the fundamentals of Angular development Angular is used to build interactive websites that can be easily tested and maintained.  It is easy to use, simplifies the development process, and supports the latest standards of JavaScript (ES6).