Angular is easy — but it’s also hard at the same time.

The thing with Angular is that it’s a framework, which means that it comes as a complete package. Unlike React, which is just a single library, Angular is a collection of libraries organized and arranged in a way that it works as seamlessly as possible with one other.

When we start out, we often create some sort of to-do list app. But a to-do list doesn’t exactly cover everything that you need to know about something.

Below is a compiled list of topics and subjects that I’ve gathered (and summarized) to help you kickstart your Angular exploration journey, along with some helpful resource links.


Start at the Beginning: How Angular works

In a nutshell, Angular is a bunch of classes that are connected together to form the framework. It runs on a series of libraries and coordinates how these libraries are imported and used in the app.

Resources:

A Quick Dive Into How Things Fit Together In Angular


Setting everything up

The short instructions –

  1. Go download Angular CLI — npm install -g @angular/cli
  2. Run the following commands:
ng new your-app-name-herecd your-app-name-hereng serve

Angular CLI lets you scaffold a barebones Angular app via the console. It saves you having to manually figure out all the routing, the setups, the best structures and practices.

Resources:

Angular.io CLI

Quick reference for commonly used commands:

ng new your-app-name-herecreate a new barebones Angular appng generate component component-name-herecreate a new component based on your current directory. If you want to create a new directory, add your-directory-name/ in front of the component name. You can also use moduleclassdirectiveinterface and service using this syntax (just replace it with component)ng versionshows which version of Angular CLI you have installed on your machine.ng serveRun the application. Make sure you’re in the root directory of your Angular app.ng buildProduces and builds an Angular app that’s ready for deployment.


Understanding @Component

A component in Angular is the thing that allows you to connect data to view. It is the basic building block of an Angular app.

If you think of a patchwork quilt, each square, triangle or whatever geometric shape makes up a component of the overall blanket. That’s what components essentially are in Angular.

Resources:

Toptal — Angular Components explained


Understanding @NgModule

Angular is a framework, which means that it organizes multiple libraries and coordinates them to make everything work. These libraries are called and are available as NgModules, accessible through an import and declared using the @NgModule decorator.

Resources:

Angular.io — NgModules


Make it visually appealing with Angular Material

Angular Material uses material design principles from Google and turns them into a usable visual component library for your Angular app. If you want to bootstrap your app to look visually acceptable, using Angular Material can speed up the process.

Use the following commands to install:

ng add @angular/material

Install HammerJS if you want to gesture recognition.

npm install --save hammerjs

Resources:

Angular Material


TypeScript Crash Course

Classes, spreads, arrow functions & immutability

Here is an example of TypeScript syntax for classes:

class Cat {
greeting: string;
constructor(message: string){
this.greeting = message;
}
greet() {
return "Meow, meow, meow, " + this.greeting;
}
}let tibbers = new Cat("hello there");

Resources:

TypeScript — Classes

HowToDoInJava — Spreads

Java T Point — Arrow functions

LogRocket — Immutability


Imports and exports

Angular keeps everything organized with imports and exports. Imports lets you pull in a library and use it. Export lets you create libraries of your own.

When it comes to TypeScript, the imported and exported thing is called a module. You can create your own classes and various other interfaces and hooks to be used exclusively for your app or shared among different components.

Resources:

TypeScript — Modules


The Fundamentals: Interpolation and expressions

Interpolation in Angular is the act of embedding expressions into marked-up text.

For example — {{ name }} – would print the associated name variable that’s set in the component. name is a property and the data printed is from the binding made in the component.

An expression is when you do something with the variable. For example, take a look at the following: *ngFor="let item of items;" – thelet item of items is an expression.

Resources:

Angular.io — Template Syntax


Property binding

Property binding is a one-way data street that lets you set the property of an element. It uses [] to bind data in one direction and the item doesn’t expect to do anything (such as processing or passing it along) with the data.

Look at the example below:

<button [disabled]="buttonDisabled">Click me</button>

buttonDisabled is a boolean variable in the component.

Resources:

Telerik — Understanding Angular Property Binding and Interpolation


Event binding

Event binding in Angular is the ability to attach events to elements on the DOM. For example, a click event can make a button do something by executing a function.

The target event name is identified within a pair of parentheses — ()

Resources:

Pluralsight — Event Binding in Angular


Two-way, Unidirectional binding

Two-way binding deals with the way data flows in an application. It’s a data management pattern that can be implemented in Angular and often represented through [()] kind of syntax.

That’s why you should also check out unidirectional data binding to get an idea of how things flow in an Angular application.

Resources:

DottedSquirrel — The Tale Of Unidirectional Dataflow in Angular


Template #ref variables

Angular lets you capture DOM elements via # inside a pair of HTML tags. These tags may just be your regular HTML pairs or component or directives.

For example:

<h1 #h1Element>Hello there</h1>
{{h1Element.textContent}}

The above {{h1Element.textContent}} will return the content inside <h1> – Hello there – as plain text.

Resources:

Write Some Code — Using Template Reference variables


And that’s basically it for this edition of Angular’s resource guide. More coming soon. The aim of this series is to eventually go through everything you need to know (or have awareness of) to be a proficient Angular developer.

Stay tuned for part 2!

Comments

0 comments