Introduction to Angular
Getting Started
Historically, it all started with AngularJS, a JavaScript-based open-source front-end web application framework first released in 2010. We know, the terminology can sometimes be a mouthful.
However, as web applications grew in complexity, AngularJS couldn't keep up with the demands of modern web development. That's why Google decided to rewrite AngularJS and create a new framework that would meet the needs of today's web development landscape: Angular.
So, what sets apart Angular from AngularJS? The new version was designed to be faster, easier to use, and more scalable. It uses a component-based architecture, enabling better code reuse and the possibility of modular applications.
We mustn't forget a crucial integration. Angular was written in TypeScript, a statically-typed language that transpiles to JavaScript. TypeScript brings many benefits to Angular in terms of improved type checking, better error handling and much more.
The Prerequisites for Learning Angular
The process is quite similar to jumping into any present-day JavaScript framework. If you're already familiar with JavaScript, you'll find Angular to be relatively straightforward. But if you're new to the language, you might need to spend some time brushing up on your JavaScript skills.
These core concepts include:
The DOM (Document Object Model)
Variables and data types (let, const, number, string, boolean, etc.)
Arrays and objects (bracket notation, dot notation, destructuring, etc.)
Functions and arrow functions
Template literals
Modules and imports/exports
Classes and inheritance
Promises and async/await
As always, feel free to brush up on these on our JavaScript resource page.
Along with JavaScript, there are a few other technologies you'll need to be familiar with to effectively use Angular. These include Node.js, after all, Node is the foundation that the framework is built upon, npm (Node Package Manager), and of course, HTML and CSS.
Angular Components
In Angular, components define the structure, behavior, and data for a particular piece of the user interface.
Another similarity of frameworks is that each component is a self-contained unit of functionality that can be easily reused and composed with other components. In Angular, they control the view and behavior of a portion of the user interface. A component is defined as a class with a decorator that provides metadata, and a template that defines the HTML for the component.
Let's take a look at a basic use case.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Hello, {{ name }}!</h1>
`
})
export class AppComponent {
name = 'Angular';
}
As we can see, we import the Component symbol from the @angular/core package and use the @Component decorator to define a new component. Then, the selector property defines the HTML tag we use for the structure. Next, the template property defines the HTML template for this component, which can include expressions like {{ name }} that will be evaluated and replaced with data from the component's class.
Templates in Angular
Simply put, templates define the HTML structure and content for a component. They have a custom syntax that combines regular HTML with Angular-specific expressions and directives which we'll explain in the sections below. In addition, Angular uses a powerful template engine that updates the view when the underlying data changes.
Below, we have an example of a template that lists a set of heroes:
<h2>My Heroes</h2>
<ul>
<li *ngFor="let hero of heroes">
{{ hero.name }}
</li>
</ul>
Pay close attention. Here, we use the *ngFor directive to iterate over the heroes array and display each hero as a separate list item. To expand on that, the ngFor directive adds or removes elements from the DOM based on the value of an expression. Syntax-wise, the asterisk (*) in front of ngFor is a shorthand for the <ng-template> element, used to wrap the directive and provide a context for the expression.
Explaining Directives
We can view directives as special attributes that can change the behavior or appearance of an element in the DOM. Structural directives, like ngFor we already saw, add or remove elements from the DOM, while attribute directives, like ngClass, change the appearance or behavior of an element by adding or modifying its attributes.
Observe how we use an attribute directive to dynamically add a CSS class to an element based on the value of a component property:
<h1 [ngClass]="{ special: isSpecial }">Hello, Angular!</h1>
Here, the ngClass directive binds the value of the special class to the value of the isSpecial property. The ngClass directive takes an object that maps CSS class names to boolean expressions and adds or removes the classes from the element based on the evaluated expressions.
Dependency Injection
As a design pattern, dependency injection manages the relationships between components and their dependencies. In Angular, components, and services can declare their dependencies, and the framework will automatically provide the necessary instances at runtime.
The following sample is a demonstration of a component accessing a service via dependency injection:
import { Component } from '@angular/core';
import { HeroService } from './hero.service';
@Component({
selector: 'app-heroes',
template: `
<h2>Heroes</h2>
<ul>
<li *ngFor="let hero of heroes">
{{ hero.name }}
</li>
</ul>
`
})
export class HeroesComponent {
heroes;
constructor(private heroService: HeroService) {
this.heroes = heroService.getHeroes();
}
}
The HeroesComponent class declares a dependency on the HeroService class in its constructor. Most importantly, Angular will automatically provide an instance of HeroService when it creates an instance of HeroesComponent. The component can then use the heroService property to access the methods and properties of the service.
Modern-Day Usage
Outside Google, the framework's birthplace, Angular is adopted by many of the world's leading companies and organizations. Some of the most popular and well-known applications built with Angular include Google AdWords, Google Analytics, Microsoft Office Online, and IBM Cloud. What's more intriguing is that the framework is still used by many smaller startups and independent communities to build smaller-scale solutions for a variety of purposes.
Arguably, Angular’s growth has come to a halt but it's still a popular choice because of the ecosystem that includes powerful tools, libraries, and a large enough community of developers who are constantly working to improve it.
Final Thoughts
Despite efforts to make the developer experience better, part of the community still considers Angular to have a steep learning curve. Regardless, the framework is still a worthy solution when we take into account its use of TypeScript and reactive programming techniques that make it ideal for building web applications of all sizes and types.
As the industry continues to evolve, Angular will continue to be among the usual top five choices for many companies and developers. If you find the approach of Angular alluring and practical, we suggest you dive into the basics instead of ruminating on which framework to choose.