Foraying into the Angular World

Recently, I started learning Angular, it being a prerequisite for a project I am undertaking. With no prior experience in Web Development, I had no clue about where to start. I browsed through guides I found on the internet, and decided I would make a comprehensive summary of how I learnt it, in order to remember and hopefully help someone else in the future.

Prerequisites for learning Angular

  • HTML
  • CSS
  • JavaScript

While Angular requires knowledge of TypeScript too, I would suggest you to learn it on the go, as you’re developing the project, because the syntax and structure is pretty similar to JavaScript.

Heres a list of some useful resources for learning HTML, CSS and JavaScript that I used.

  • Courses on Udemy, for instance this one — This course on Udemy was very useful in terms of learning basics and certain advanced topics of HTML, CSS and JavaScript
  • Supplementary Websites, for instance this one — This website houses most of the required code snippets for sections on a web page. You can refer to it to gain insights on how to start, and tweak the code to customise it.

Bear in mind, my preferred method of learning was to get the basics of the language right and try to code it in a project to test the variations. I would recommend the same for any beginner whose immediate requirement is implementation.

A Brief Introduction to Angular

Angular is a framework most commonly used for designing Single-Page Applications. What does that mean? It means that every time you visit a different page on the same website, it does not need fetching the content of that page from a server.

A common query for beginners is the confusion surrounding the Naming Convention i.e. AngularJS, Angular 2, Angular 4 and so on. All you need to know is that AngularJS was an older version, way too complicated, which prompted the developers to come up with Angular. The upgrades for Angular followed (2 — > 4 …). But the current terminology uses Angular as an umbrella term for all the versions.

Basics of Angular

An Angular application can be divided into a few main components which come together to form one entire product. Different sources might list these differently. The following list is in order of concepts I learnt while building a PWA (Progressive Web Application), and which required moderate understanding of the previous concept along with some new knowledge.

  • Components — Each new screen or even parts of a screen (for instance, the header and the footer) can be built as separate components. A single command is used for generating these new components -
ng generate component component_name
ng generate component folder_name/component_name
  • Routing — Different components can be connected to each other for navigation purposes using this concept of ‘Routing’. It follows a set of fixed steps.
  1. Define a set of paths. In the example code snippet below, an empty path means the first screen that shows when the app is opened.

In the app.module.ts file -

const routes: Routes = [{path: '',component: Component_1_Name},
{
path: 'screen2',component: Component_2_Name}];

In the component1.html file

<a [routerLink] = "/screen2">Click to show Component2</a>
  • Services —These files usually contain any kind of specific functionality core to the parent component. It can include services for obtaining data from a remote server. Services can be generated for every component using the following command -
ng generate service Service_Name

Once you play around enough with components, their routing and services, Angular seems much less intimidating than when you first started out.

Other Resources I found helpful:

Happy Coding!

A curious learner