Angular Tutorial Series

by | May 8, 2019

Angular, a  structural framework for dynamic web apps, lets you use HTML as your template language and enables you to extend HTML’s syntax to express your application’s components clearly and succinctly. The ease in which it allows developers to build expressive, readable and quick to develop web applications has fueled its popularity.  Luckily, getting up to speed on developing with Angular v2+ involves mastering just a handful of basics which we cover in this series of Angular tutorials below.

We’ve Made it Easy to Take This Series with You

 

Angular Tutorial EbookWant to share this tutorial with your team?  We’ve converted the entire series into a downloadable eBook, making it easy to share the tutorial with your colleagues and reference back to it when needed.  Click on the button below to get a copy of the Angular tutorial series eBook delivered straight to your inbox.

Download Now

 

Angular 9-Part Tutorial Series

 

Angular CLI TutorialGetting Started With The Angular CLI

If you aren’t familiar with the Angular CLI, it’s an installable command line interface that can be used to generate Angular projects, components, services, and modules. It’s an extremely useful tool to use when developing Angular projects.

 

Angular Module TutorialApplication Structure Using Modules

In our second tutorial, we discuss the structure of an Angular application and how to use Angular modules to manage your code base. We explain what an Angular module is, how they work, and how to begin to lay the groundwork for an application’s structure.

 

Angular Router TutorialSetting Up Routing In Your Application

Our tutorial series continues with instruction on how to set up basic routing in an Angular application using Angular Router Modules.  It also provides insight into the functionality of Angular routers.

 

 

Components: Inputs, Outputs, and EventEmittersAngular Components Tutorial

Having covered the basics of getting started with application routing in Angular, in this chapter we dive into the basics of Angular components. We’ll cover what makes up an Angular component, and give a brief demonstration using component I/O.

 

Angular Component LifecycleAngular Component Lifecycle

In this fifth tutorial, we discuss Angular component lifecycles and how their lifecycle events can be leveraged. This includes an overview of an Angular component’s lifecycle and lifecycle events and an example module to demonstrate when a component’s lifecycle events are fired.

 

Template Driven Angular FormsTemplate Driven Angular Forms

We move next into exploring Angular forms built using its template syntax. Angular provides developers two ways to build forms, one uses template syntax and the other is a model-driven approach. Forms built using the model-driven approach are called “Reactive Forms” which we cover next.

 

Angular Reactive FormsAngular Reactive Forms Tutorial

In this tutorial, we dive into model-driven forms using Angular’s FormBuilder, FormGroup, and FormControl classes. Angular reactive forms are usually easier to test since you are working with objects and models, making them well-suited for when you require a robust set of validation.

 

Getting Started With Electron and CLIElectron Tutorial - Getting Started with Electron and Angular CLI

A technology stack using Angular and Electron allows developers to build cross-platform desktop applications for Windows, Mac, and Linux using web technologies. In this tutorial, we take you through the steps you can take to turn an Angular application into a native desktop application using Electron.

 

Using Bootstrap 4 with AngularUsing Bootstrap 4 with Angular

In our final tutorial, we discuss what’s new with Bootstrap 4, why it aligns well with Angular and what stands out as our favorite features.