An Introduction to Angular


Angular is a TypeScript development platform and framework that's used to create single-page applications.

Angular has a complex history. The developers used JavaScript to build the first version of this framework (AngularJS). The Angular developers later used TypeScript to build all the successive versions of Angular (due to the number of bugs in the first version).

As of 2021, the latest version of Angular is 12.0. In this article, you’ll learn all you need to know about the Angular framework.

What Is Angular?

Many people describe Angular as a framework, and though this definition isn’t incorrect, Angular is not just a framework. Angular is also a development platform. This means that it has a hardware and software system, which runs Angular applications.

Though it’s built on TypeScript, you can write most of the platform’s code in JavaScript. Like most frameworks, Angular is component-based. This means that each section of an Angular user interface is treated as an independent entity, which leads to the creation of reusable code and scalable applications.

To use Angular, you’ll need to be familiar with HTML, CSS, and JavaScript (knowing TypeScript is an asset, but not a requirement). Angular is frequently compared to VueJS and ReactJS, and one of the main complaints is that Angular has a steeper learning curve.

This is no surprise, as Angular (being a development platform), has a greater number of core structures for you to become familiar with. These structures include:

  • Modules
  • Components
  • Templates

And understanding these core features will ensure that you’re well on your way to becoming an Angular developer.

Exploring Angular Files

The Angular application generates many files within your new project folder (as you can see in the image below). Check Angular's official website for instructions on how to install Angular on your computer.

Angular's main folder

One of the more important files within the main project folder is the package.json file. This file tells you the name of your project, how to start your project (ng serve), how to build your project (ng build), and how to test your project (ng test) among other things.

Your main project folder also contains two folders—node_modules and src. The src folder is where you’ll do all of your development; it contains several files and folders.

The src Folder

Angular's src folder

The styles.css file is where you’ll put all of your global styling preferences, and the index.html file is the single page that renders in your browser.

Exploring the index.html File

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>MyApp</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"></head><body><app-root></app-root></body></html>

The only thing that you’d want to change in the index.html file above is the title of the application. The <app-root> tag in the body of the HTML file above links to the app.component.ts file, which is located within the app folder (as you can see in the image below).

Angular's app folder

Exploring the app.component.ts File

import {Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})export class AppComponent {title = 'my-app';}

The app.component.ts file uses the app-root selector, which is located in the index.html file above. It uses the app.component.html file as a template and the app.component.css file for style.

The app.component.css file is empty when it’s generated because all the styling preferences, along with the HTML layout, are within the app.component.html file.

Running the Angular application with the ng serve –open command will display the following in your browser:

Angular's initial browser output

To change what displays in your browser, you’ll need to edit the app.component.html file.

Replacing the content of this file with the following code:

<h1>Hello World</h1><router-outlet></router-outlet>

Will produce the following output in your browser:

Angular's updated browser output

Understanding Angular Modules

Every Angular application is built on a foundational module system, known as NgModules. Each application contains at least one NgModule. Angular generates two modules from the ng new command (app-routing.module.ts and app.module.ts).

The app.module.ts file contains the root module, which must be present for the application to run.

Exploring the app.module.ts File

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }

The file above uses the JavaScript import statement to import the NgModule, the BrowserModule, the AppComponent, and the AppRoutingModule (which is the second NgModule in the project).

The @NgModule decorator comes after the imports. It indicates that the app.module.ts file is indeed a NgModule. The @NgModule decorator then configures several arrays: the declarations, the imports, the providers, and the bootstrap.

The declarations array stores the components, directives, and pipes that belong to a specific NgModule. However, in the case of a root module only the AppComponent is stored in the declaration array (as you can see in the code above).

The imports array imports the other NgModules that you’re using in the application. The imports array in the code above imports the BrowserModule (which allows it to use browser-specific services, such as DOM rendering), and the AppRoutingModule (which allows the application to use the Angular router).

The providers array should contain services that components in other NgModules can use.

The bootstrap array is very important because it contains the entry component that Angular creates and inserts into the index.html file in the main project folder. Every Angular application launches from the bootstrap array in the root NgModule by bootstrapping the NgModule (which involves a process that inserts each component in the bootstrap array in the browser DOM).

Understanding Angular Components

Each Angular component is generated with four specific files. If you take a look at the app folder image above, you’ll see the following files:

  • app.component.css (a CSS file)
  • app.component.html (a template file)
  • app.component.spec.ts (a testing specification file)
  • app.component.ts (a component file)

All the files above are associated with the same component. If you use the ng generate command to generate a new component, four similar files to the ones above will be generated. The app.component.ts file contains the root component, which connects the different aspects of the component (such as the template and the style).

Exploring the app.component.ts File

import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})export class AppComponent {title = 'my-app';}

The app.component.ts file uses the JavaScript import statement to import “Component” from Angular’s core. Then the @Component decorator identifies the class as a component. The @Component decorator contains an object comprised of a selector, a templateUrl, and a styleUrls array.

The selector tells Angular to insert an instance of the app component in any HTML template that has a tag corresponding to the selector (so the <app-root> tag). And if you take a look back at the code in the index.html file above you’ll find the <app-root> tag.

The main app component file also links to the template file, using the templateUrl property. This is the app.component.html file, which outlines how a specific component should be rendered in an Angular application.

The final property in the object is the styleUrls. This property references an array of style sheets, which means that you can apply multiple style sheets to a single component (so you can add the global style sheet in the src folder to the styleUrls array as well).

Understanding Angular Templates

The app.component.html file is an example of an Angular template. This file is an HTML file as well as a component file (the app component). Therefore, every component must have an HTML template, simply because it outlines how a component renders in the DOM.

What’s Next?

Understanding the DOM is your next best move. Taking on the Angular platform and framework is undoubtedly challenging. However, it’s possible, and given that Angular renders its components in the DOM, learning about the DOM—as you try to master Angular—is another great move.


How to Build and Host a WordPress Website in 5 Simple Steps

Previous article

Enhance Your Creative Projects With Shutterstock

Next article

You may also like


Leave a reply

Your email address will not be published. Required fields are marked *


Login/Sign up