The Best Angular Tutorials: Learn Angular JS, 4, & 5 with These Resources

Angular is a framework for web development that has been a major force in front-end development over the past eight years. In this guide to the best Angular tutorials, we’ll look at the transition from AngularJS version 1.0 to the newest release, Angular 5. Along the way, we’ll explore the best Angular tutorials for learning about Angular, whatever version you choose.

The framework began life as AngularJS, a JavaScript framework developed by Google and released open-source in 2010. With Angular version 2.0, the project switched from writing applications in JavaScript to TypeScript, a superset of JavaScript. After 2.0, Angular dropped the “JS” from its name. The most recent release of Angular is version 5. However, many companies are still using Angular 4 since Angular 5 is so new.

AngularJS Tutorials

Perhaps the best place to start understanding what Angular is and how it works is with the initial JavaScript framework, AngularJS. AngularJS is largely responsible for the explosion of single-page applications in the early 2010s.

• The official AngularJS tutorial is a great way to get started and it will give you all the necessary tools to build web apps with AngularJS. In it, you’ll build a web app that lets you compare smartphones (old smartphones that are a blast from the past).
• W3schools also has an excellent AngularJS tutorial that gives a little more detail and covers some gaps in the official tutorial.
• If you’re more of a practical, example-based learner, this tutorial that teaches you how to clone gmail using AngularJS is really interesting and a great introduction.

It’s worth mentioning, however, that if you use AngularJS to build your web apps, you’ll have difficulty upgrading them to other versions of Angular. The reason is Angular versions 2 and on use a different architecture and language for writing the application. (For the nerds who are curious: AngularJS uses a model-view-controller architecture and you write it in JavaScript, whereas Angular 2.0 implements a service-controller architecture and you write it in TypeScript.) As a result, upgrading from AngularJS to Angular 4 or 5 would require rewriting most if not all of the application.

Angular 4 Tutorials

While you could learn Angular 2, it wouldn’t be very useful since most companies have now transitioned to Angular 4. (If you’re confused: Google skipped Angular 3 in their naming scheme.) Angular 4 is faster and lighter than 2. It also supports newer versions of TypeScript and adds new features and improvements. Most companies are currently using Angular 4, since Angular 5 just came out in late 2017 and many companies haven’t updated yet.

Unlike with AngularJS tutorials, most of the stuff you’ll learn in an Angular 4 tutorial will transfer just fine to an application that uses Angular 5.

• For a written tutorial, Techie Diaries’ Angular 4 tutorial has the essentials.
• Visual learners (like me) might find that watching a video where someone codes and explains the code in real time is useful. In that case, Programming with Mosh’s Angular 4 Tutorial is a great resource.

While you’re learning Angular 4, however, you might as well learn the new stuff in Angular 5. You can always transfer those skills and learn the differences if you need to work on a project that uses Angular 4.

Angular 5 Tutorials

Released in October 2017, Angular 5 is the newest version of the Angular framework. While Angular used to be the go-to solution for front-end web development, it has encountered competition over the past few years. The React framework, backed by Facebook, recently overtook Angular for the number one spot in terms of downloads per month.

Nevertheless, Angular remains an important framework, and many companies have invested significant resources in building Angular apps. Angular is not going away any time soon. It’s definitely worth learning, and you should consider learning React and other frameworks, too.

• The official Angular tutorial is up-to-date for version 5. It’s the best place to start for those who are new to Angular. While completing it, you’ll build an app for a superhero staffing agency.
• Toptal’s Angular 5 tutorial is also a great resource. Checking this out after you’ve completed the official superhero staffing app will help you fill in the gaps and get another perspective on Angular 5.

Intertech Tutorials

For those of you familiar with our blog here at Intertech, you know we’ve also put together a few Angular tutorials over the last few years. Here are some of our more popular posts:

• Deploying Angular 4 Apps with Environment-Specific Info
• Run Code During App Initialization
• Handling Refresh Token with New HttpInterceptor
• Caution about Binding HTML Content using [innerHTML]
• 9 Lessons Learned on an AngularJS to Angular 4 Upgrade
• Getting started with the Angular CLI
• Angular Module Tutorial: Application Structure Using Modules
• Using Bootstrap 4 with Angular
• Angular Router Tutorial: Setting Up Routing in Your Application

Learning Angular

Good luck learning Angular! Mastering this popular framework is an important step for anyone serious about front-end development. Angular skills are also a hot commodity on the job market, especially if you have experience building complex single-page applications. Considering Angular’s popularity over the past eight years, that’s not likely to change anytime soon.

If you’re looking to take a deeper dive into learning Angular, visit our Angular training page on our training site for more options. Or, for Angular project help, see more information on our Angular consulting.

Originally published at Intertech Blog.