Skip to content

Angular / Overview

Angular is a typescript structural framework for designing dynamic web applications, using the Model-View-Controller (MVC) design pattern. Angular breaks down common web development code into three separate pieces that each represent one portion of the MVC framework:

  1. Data - Model
  2. HTML template - View
  3. Typescript component - Controller (binding Model and View together)

Using the MVC design pattern is much more advantageous over older techniques that binding data and HTML together using JavaScript and JQuery. Angular keeps separate pieces of the code contained to their own files and reduces the amount of code needed.

Another advantage of Angular versus plain JavaScript is that Angular is not generating HTML and then passing it to the browser to have it parsed. Instead, Angular is generating DOM data structures directly. This is much more efficient and much quicker.

Angular applications are made up of many separate components. Each component implements the MVC design pattern within itself. Components are convenient because Angular encapsulates the content within each component, ensuring that the code in one component does not interferes with other components. For example, if two components share the same class names, these will not interfere with each other due to Angular encapsulation.

Next Steps

The remainder of this documentation describes how to install Angular, set up an Angular project, explains elements of Angular design, and explains how to deploy an Angular web application.

Specifically this documentation will recommend the following order:

  • Install Angular
  • Create, Save, and Run a New Angular Project
  • Complete Angular's Getting Started Guide - Tour of Heroes
  • Touch on Unit testing for Angular applications
  • Touch on End to End testing for Angular applications

  • Test Angular's Tour of Heroes Tutorial

  • Deploy an Angular web application