Home / Tutorials / Angular / Introduction

Introduction to Angular

In this introductory lesson we learn what Angular is, the benefits of using Angular, the learning difficulty and prerequisites before starting this course.

Lessons in this course

If you're new to Angular, start from the beginning.

First Steps
Angular Architecture Development Environment Setup
Basics
First App & Bootstrapping Components Databinding Custom Databinding Directives Custom Directives Services & Dependency Injection Pipes
Routes
Pages & Routing Route & Query Parameters Route Security & Guards
Intermediate
Observables
HTTP
HTTP & Get Requests
Forms
Reactive Forms

What is Angular

Angular is a Javascript framework that allows us to create reactive, component-based Single-Page Applications (SPAs).

A single-page application only contains one HTML file. The content on the webpage is displayed by Javascript manipulating the DOM.

This gives the user a fast, reactive experience similar to mobile or desktop applications because Javascript is faster than reaching out to the server for a new page render.

The following is an example of what an Angular app’s HTML file would look like.

Example: 
<!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">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <app-root></app-root>

<script src="runtime.js" defer></script>
<script src="polyfills.js" defer></script>
<script src="styles.js" defer></script>
<script src="vendor.js" defer></script>
<script src="main.js" defer></script>
</body>
</html>

Angular and TypeScript

Angular is written in TypeScript and requires us to use TypeScript for all of our application logic.

Typescript is a powerful Javascript transpiler. The code we write in Typescript gets converted into Javascript when our Angular application compiles.

To demonstrate how TypeScript is not all that different from Javascript, see the following example of a TypeScript function.

Example: 
// traditional function
function isEven(num:number) : void {

  if (num % 2 == 0) {
    console.log(num, "is an even number");
  } else {
    console.log(num, "is an odd number");
  }
}

isEven(5);
isEven(8);

// arrow function
var isOdd = (num:number) : void => {

  if (num % 2 != 0) {
    console.log(num, "is an odd number");
  } else {
    console.log(num, "is an even number");
  }
}

isOdd(-2);
isOdd(14);
isOdd(7);

While it’s not strictly necessary to know TypeScript for this course, it would be better if you know at least the basics.

We offer a full TypeScript course available for free. The course covers everything from beginner concepts to advanced.

What are the benefits of using Angular

There are many benefits to using a framework like Angular.

  • Cross-platform

    Progressive web applications: Angular provides us with modern platform capabilities that deliver high performance, zero-step installation apps. PWA’s are the most common apps built with Angular.

    Native applications: We can build native applications by using frameworks like Apache Cordova or Ionic .

    Desktop applications: We can create desktop apps for multiple operating systems like Windows, Mac or Linux with a framework like Electron .

  • High speed, excellent performance

    Code splitting: Angular apps use the new Component Router, which delivers automatic code-splitting so that end users only load the code required to render the view they request.

    Code generations: Angular generates templates in highly optimized code for current Javascript virtual machines, which gives us the benefits of hand-written code.

    Universal support: Angular can be used as a front-end web development tool for other languages like .Net, PHP , Java Spring etc. for near-instant rendering in HTML and CSS. As a bonus, it optimizes for better SEO.

  • Productivity

    Powerful templating: Angular provides simple but powerful template syntax to create a UI view quickly.

    Angular CLI: Angular provides command line tools to start building and adding components fast, test our code and deploy it.

    Integrated Development Environment: Angular provides intelligent code completion, instant error display and other feedback in popular editors and IDEs.

  • Full-stack development

    Complete framework: Angular is a complete framework and provides full stack development along with Node.js, Express.js and MongoDB .

    Testing: Angular uses Karma and Jasmine for unit testing to check code each time we save. Jasmine is the testing framework for doing actual tests in Angular and Karma is the test runner that provides helpful tools to call our Jasmine tests.

    Accessibility: Angular allows us to create accessible applications with ARIA-enabled components, developer guides and built-in a11y infrastructure.

    Animation: Through Angular’s intuitive API we can create complex, high-performance animation sequences with very little code.

Angular Versioning: AngularJS vs Angular 2 vs Angular 12

Something that can be confusing when you’re starting to learn Angular is the amount of Angular versions.

1. AngularJS (Angular 1)

When Angular 1 was released, it was a big new and exciting thing. However, it had many issues that could lead to things like bad performance.

The development team decided to do a complete rewrite of the framework and call it Angular 2.

2. Angular 2

Angular 2 was rewritten from the ground up to fix all the issues that Angular 1 had.

Since Angular 2 we’ve had several versions like Angular 4, 5, 6 etc. and now we have Angular 11.

3. Angular 12

So why do we have all these versions since Angular 2, does it mean that Angular was reinvented each time? The answer is no.

Since the release of Angular 2, the Angular team adheres to a versioning system where a new version of Angular is released every six months.

Each new version is not a complete rewrite. Most new versions simply add some new features or change some behind-the-scenes stuff without breaking existing features.

In fact, Angular 12 is very similar to Angular 2. It just has more features and a few small changes.

AngularJS and Angular

These days, Angular 1 is referred to as AngularJS and any Angular version from 2 is just referred to as Angular.

You can see Angular’s latest version and the changes & updates it provides on the official Github Angular Changelog .

Is Angular hard to learn

Angular is just a framework and isn’t that hard to learn if you already know the underlying technologies HTML, CSS and Typescript/Javascript.

We have courses on both Javascript and TypeScript available if you don’t know it already.

We can also recommend Mozilla's free HTML & CSS course .

Prerequisites

Before we proceed, please note that we make the following assumptions:

  • You know how to install software on whichever operating system you use.
  • You can create and navigate directories and files on your computer.
  • You know at least the basics of HTML, CSS, Javascript.
  • As mentioned before, TypeScript is not strictly required but helpful to know.
  • We cover the command line where needed in this course, but it’s helpful to know it as well.

While this tutorial course is for beginners with no knowledge of Angular, students coming from other frameworks like React or Vue may also find it very helpful.

This tutorial course covers many topics of Angular, ranging from beginner concepts to advanced.

Next
Angular Architecture