Angular - Introduction to Front End Framework

 In my opinion Web Development is such a broad limitless avenue of possibilities. Of course, you can say that about anything involving programming in general what with all the programming languages, frameworks, and APIs that are out there and many more that will come out in the future. However, when I learned HTML, CSS, and JavaScript in my second semester at SAIT I felt that JavaScript was chaotic compared to the strongly typed approach of Java.  Furthermore, there were numerous libraries, tools, and frameworks that could be used with it that it was all too overwhelming. But that is not even the most daunting part of it, it was the front-end that exhausted me. I would rather spend hours trying to figure out how to handle data in the back end than figuring out the padding, margins, pixels, or whatever else just to make a website look presentable and not something that was carelessly built by a preschooler. Which brings me to the fateful day I discovered Angular.

What is it?

Angular is a powerful tool for creating responsive and sophisticated single-page applications developed by Google. At its creation Angular was originally a JavaScript based front-end framework aimed at building client-side applications. From version 2 and onwards Angular was rewritten for TypeScript, a superset of JavaScript created by Microsoft. This resulted in two different versions commonly referred to as AngularJS which refers to Angular version 1 written in JavaScript, and Angular (Angular2+) which refers to Angular version 2 and later versions written in TypeScript. At its core, Angular takes a modular approach by constructing applications through components that control the view. The logic for the view is written in TypeScript and HTML with optional functionalities imported from angular libraries.  This results in reusable code, quicker and easier development, and a unit testable application. The final product results in well-known websites such as Gmail and PayPal.

How to get started?

Before you can even start learning Angular, having a great grasp of HTML, JavaScript, and TypeScript is important and therefore a prerequisite. After the foundations have been established the next step is to set up the development environment. There are many IDEs to choose from, I prefer using Visual Studio Code as my IDE for developing websites. Next, Nodejs will be used as the runtime environment for executing the code and downloading the Angular CLI. The Angular CLI is a command-line interface which supports the creation of Angular projects. It will be clear later how useful this tool is.

Creating a project

Once the set up is complete new Angular projects can be created and launched to a server using Angular CLI. Three folders are created, e2e which contains end to end user testing, node_modules for installing third party libraries, and src where the source code is contained and where most of our coding will take place.  Within the src folder is the app folder which contains all the modules and components of the application. It also has main.ts, the starting point of the application that bootstraps the main module similar to a main method, and index.html which is where everything in the application will be displayed.  Angular CLI uses a webpack which combines all the scripts and stylesheets into bundles. When a change is made on one of the files, the webpack automatically refreshes the browser compiles them into one of the four bundles polyfills.js, styles.js, vendor.js, and main.js which are added to index.html.

From the command line use Angular CLI to create a new Angular project (ng new <project name>).

Angular CLI generates the required files.

Building blocks of Angular apps

Components

As mentioned earlier Angular takes on a modular approach, essentially this means that parts of a page are broken down into multiple components. Angular components encapsulate the data, HTML, and logic for a view which is written in TypeScript. Every application has at least one component called the app component or root component which may have child components resulting in a tree of components as the app grows. Angular CLI can be used to make new components to generate all the necessary files.

The Angular framework arranges the parts of the application into components which are grouped into modules.

In the src/app folder there is a TypeScript, HTML, and CSS file for each component which all have the word component in their names by convention. Each component class has the @Component decorator that classifies them as Angular components. The selector identifies what the element, class, id, or attribute name for the component that is to be used in the html. 

Angular CLI allows generation of components with all the required files (ng g c <component name>).

The templateUrl and styleUrl provides the HTML and CSS files to be used for the component, however these can be coded inline using backticks as well. The class contains all the code for the logic to control how things in the component will be presented. For example, we can use interpolation to use a variable that was defined in the class and place it in the template.  

Component TypeScript with the templateURL.

The HTML file provided in the templateURL.

Component TypeScript using inline HTML for the template.

Inline html displayed to the page using interpolation.

Modules

Modules are a group of related components and services. Similar to components every application has at least one module called the app module and as the application grows modules are broken down into smaller modules. In the src/app folder the script for the root module is often called app.module.ts and has the @NgModule decorator to classify it as an Angular module.  The declarations section is where any components that are going to be used in the app will be declared, imports are for libraries, providers are for services which will be discussed later on, and bootstrap is which component will be used when the app is first launched. 

TypeScript for the app module. 

Services

A service is a type of component that provides a specific service for other components. It is different to a component in that a component provides the logic on how data is presented to the user while a service is a class which performs a task that may be used by any component in the application. An example would be processing http requests and responses to retrieve data which can be supplied to the rest of the application’s components.

Angular CLI allow generation of service components with all the necessary files.

Important concepts that help simplify code

Data Binding 

Besides interpolation another way to present data is using data binding. Attributes, properties, and events in the HTML can be bound by the data declared in the class through two-way binding. With this technique properties are reflected in both the view and the class. Furthermore, objects are POJOs (Plain Old JavaScript Object) which can be accessed and manipulated easily. 

Structural Directives 

Angular provides several directives that provides ease of access to data found in the view or the model reducing the amount of code required to control the view. Structural directives are a group of these directives. HTML elements can be removed or added dynamically through the use of built-in structural directives. Elements can be rendered conditionally or rendered as a list providing a dependable interface to code.

Example of two way binding using event binding and structural directive using the *ngIf directive.

Dependency Injection

When creating a class, the class may require dependencies that have to be made before the class is created. This makes the code not flexible and harder for testing. However, with dependency injection a class can receive its dependencies from external resources and then take them as parameters in the constructor.  To implement this framework a class is first defined as a service. In the service class the @Injectable decorator tells Angular that the class is a service and that the service itself may have dependencies.

TypeScript for a service class/component.

Depending on which components will be using the service will determine where the service is registered. To be used by all components of the app, it is better to register it with the root module (app.module.ts). The last step is to declare the dependency in the constructor of the component that needs the service.

The service is registered with the app module in the providers array.

The service is declared in the component that wants access to it.

Routing

Often when a user clicks on a link this means that the application will be directed to another page or something in the page is changed therefore the view is changed. In Angular the navigation to different views is handled by the Router that is instructed to change the view by using a URL. The routing option is enabled either through creating the project with the routing switch or adding a routing module in the existing app. The routing module specifies an array of URLs and the components they are associated with. Both methods require the use of the AppRoutingModule which is added in the imports array of the app module and any components that has a route have to be added in the declarations array as well. 

The app routing module TypeScript to configure routes.

The AppRoutingModule library is imported in the app module.

Why Use Angular?

Now that we have a basic understanding of how Angular works, it begs the question of how it solves my original problem with web development. I had mentioned that JavaScript was less strict specially when it comes to variables making it harder to debug, TypeScript solves this problem. TypeScript supports the declaration of variables with data types as well as creation of interfaces and functions with access modifiers and optional or default parameters to name a few. This means that errors can be caught during compile time reducing runtime errors and resulting in easier debugging. Now how about the tedious work that is required for the front end, how does Angular solve this. Well Angular adopts the basic Model-View-Controller architecture with an emphasis on the View (UI components). Angular provides a consistent and reliable environment to simplify coding where a developer can focus on controlling a view without having to worry about how to make the UI components work with the Model component or back end. Concepts like HTML templates, interpolation, data binding, structural directives, POJO, and dependency injection make this possible. Furthermore, Angular CLI provides an interface which simplifies and automates project management as we've seen with the generation of components and automated compilation. Overall, the Angular framework with its modular structure is a solid tool for creating dynamic single page applications.

Here is a demo on some things I covered such as creating Angular applications using Angular CLI and and concepts like data binding, interpolation, and structural directives.