43 Angular 2.0 Resources to Supercharge Your Learning

Since it was first released by the Google team in 2009, AngularJS has shot to fame as one of the best JavaScript frameworks available today. Where we used to struggle to maintain and test sprawling spaghetti code, Angular neatly bundles your work into a tidy, testable framework that makes both developing and maintaining Single Page Applications easier than ever.

Of course, we say Angular makes things easier, not easy. It greatly simplifies the development process, but AngularJS is a mammoth framework, and there’s much to learn. It’s also matured a lot over the last few years, and now when you try to look up Angular resources, they’re often intermingled with outdated versions. It’s not always easy to know which to use, especially with the impending release of Angular 2.0.

That’s why we’ve put together this curated list of the best and most current resources to ensure you get the most out of AngularJS.

Style guides

Angular has several ways to do everything, which can be a problem if everyone on the team does things in a different way. You should follow a style guide, which will help keep consistency across the duration of the project by ensuring all the developers are using the same architecture and best practices.

The big 2:

John Papa’s Angular Style Guide: https://github.com/johnpapa/angular-styleguide
Probably the best known style guide, John Papa’s guide is most developers’ go-to for any new project.
1.1 The SideWaffle extension: https://sidewaffle.com/
If you use Visual Studio, then this one’s for you. Based on John Papa’s AngularJS style guide, the SideWaffle is a VS extension that helps developers to use a consistent pattern for directives, factories, services, controllers and Jasmine spec files.

Todd Motto’s Angular Style Guide: https://github.com/toddmotto/angularjs-styleguide
Todd’s style guide is the best known alternative to John’s. These 2 style guides agree on about 90% of the subject matter the cover, so they’re quite similar.

Other style guides:

Google’s AngularJS guidelines: https://google.github.io/styleguide/angularjs-google-style.html
Google’s own style guide is recommended for AngularJS apps that use Closure, so if you’re a Closure user, you’re in luck. However, if you’re not, this probably isn’t the style guide for you.

Angular 2.0

Like most of you, we’re anxiously awaiting the release of Angular 2.0. We know it’s coming, and that there’ll be some changes that we need to be prepared for.

Video: What’s New in AngularJS 2.0: https://tv.ssw.com/6482/whats-new-in-angularjs-2
This 3-minute video gives you the low-down on what to expect from the new Angular.

If you’re getting ready to migrate from Angular 1.x to Angular 2.0, we recommend you check out these great resources:

Typescript

We know that Angular 2.0 is being written in TypeScript, so you will be better equipped to work with Angular 2.0 if you already know and use TypeScript classes for your directives, services, and controller in Angular 1.x. This way, when Angular 2.0 is released, you can cut and paste your client-side business logic into JavaScript or TypeScript classes.

TypeScript, a typed super set of JavaScript, brings type checking to your JavaScript code. It allows you to safely refactor your code and be notified of issues by your IDE (instead of when your users report a bug), so you can confidently refactor large code bases.

TypeScript does more than just type checking – you get amazing tooling with IntelliSense, right click “Rename by symbol”, and “Go to definition”. TypeScript also ships JavaScript features ahead of the official JavaScript Language releases, meaning you will not have to wait for the browser or the JavaScript committee to release updates, in order to use the latest and greatest.

Using TypeScript will make your application more maintainable, scalable and a pleasure to refactor as it grows. It makes coupling your code harder and that’s a good thing.

The official TypeScript website: https://www.typescriptlang.org/
From this website you can learn more about TypeScript, download it, as well as follow some tutorials to get you started.
TypeScript at Github: https://github.com/Microsoft/TypeScript
tutsplus.com tutorial: Getting started with TypeScript: https://code.tutsplus.com/tutorials/getting-started-with-typescript–net-28890
teamtreehouse.com tutorial: Getting started with TypeScript: https://blog.teamtreehouse.com/getting-started-typescript
egghead.io video tutorial: TypeScript Up and Running in Seconds: https://egghead.io/lessons/typescript-typescript-up-and-running-in-seconds

Directives

Angular 2.0 will be component based, so making your current application with as many Angular directives as possible will help you migrate your application to Angular 2.0.

A Practical Guide to AngularJS Directives: https://www.sitepoint.com/practical-guide-angularjs-directives/
An introduction to Angular directives at w3schools.com: https://www.w3schools.com/angular/angular_directives.asp
AngularJS Docs on Directives: https://docs.angularjs.org/guide/directive
Dan Wahlin Series on Creating Directives: https://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals

The New Angular Router

There are multiple Angular routers to be aware of: “ngRoute” is outdated (AKA “old router”), and you should be moving away from it. The newest one is “the new component router”, which is not yet finished. In the interim, the most popular router has been the Angular UI Router.

The new Angular router will be the same router used in Angular 2.0.

Therefore, if you use it in your Angular 1.x apps once it drops in the upcoming Angular 1.5 release, it will mean one less change on the upgrade path to Angular 2.0.

Angular UI / UI Router: https://github.com/angular-ui/ui-router
As explained by the github page, this router is the de-facto solution to flexible routing with nested views in AngularJS.
The new router for Angular 1.4 and Angular 2.0 at Github: https://github.com/angular/router
This router is not yet completed.
A 10 minute primer to the new Angular router: https://www.jvandemo.com/a-10-minute-primer-to-the-new-angular-router/
This quick primer will bring you up to speed on how the New Angular Router will work, and how it’s different from the UI and NG routers.

Directory Structure

Organise your folders by feature. This means that you will have both your view and your controller in the same folder. This is how the new Angular router will expect to find your HTML views and controllers.

AngularJS Best Practices: Directory Structure: https://scotch.io/tutorials/angularjs-best-practices-directory-structure
Organizing Your Angular Application: https://docs.google.com/presentation/d/1OgABsN24ZWN6Ugng-O8SjF7t0e3liQ9UN7hKdrCr0K8/edit?pli=1#slide=id.g2b6b56d19_018

Task runners

Start using a frontend build process with a task runner like GulpJS. Our frontends are getting more advanced, and these days having a frontend build process is a must to have a scalable website that’s ready for production. Task runners like Gulp and Grunt, which are JavaScript tools that add automation, perform a range of simple yet tedious tasks such as minification and bundling.

Raoni Boaventura’s Tutorial: Tools for Scaffolding, Building, and Testing: https://www.toptal.com/angular-js/your-first-angularjs-app-part-2-scaffolding-building-and-testing
This handy tutorial offers an overview of the different task runners, their uses, and how to get started.
Scott Hanselman’s post, “Introducing Gulp, Grunt, Bower, and npm support for Visual Studio”: https://www.hanselman.com/blog/IntroducingGulpGruntBowerAndNpmSupportForVisualStudio.aspx
If you’re using Visual Studio, then Scott’s post about using node package manager (NPM) is for you. Learn how to install and use some of the most common task managers around.
Gulp 101 – Getting LESS Up and Running in Visual Studio 2015 https://blog.chrisbriggsy.com/Gulp-101-CSS-all-the-LESS/

Courses

Free

AngularJS Tutorial at W3Schools.com: https://www.w3schools.com/angular/default.asp
Free, easy to understand beginners course: https://www.learn-angular.org/

Paid

Angular 2 and ASP.NET MVC 6 in Visual Studio 2015 – Two Day Live Training in Sydney, Melbourne, Brisbane – $199: https://www.ssw.com.au/ssw/Events/Training/Angular-Superpowers-Tour-Angular-ASP-MVC-in-VS2015.aspx
Udemy courses by Dan Wahlin – $99: https://www.udemy.com/angularjs-jumpstart/
PluralSight: https://www.pluralsight.com/tag/angular-js?pageSize=48&sort=new

Angular JS and ASP .NET MVC Training Course

Blogs from the Experts

John Papa’s blog: https://www.johnpapa.net/
Todd Motto’s blog: https://toddmotto.com/
Dan Wahlin’s blog: https://weblogs.asp.net/dwahlin

Tools

Visual Studio Community: https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx
Visual Studio 2015 is the standard for most development, but the Community edition is an outstanding resource to use if you’re don’t have access to the full version. You don’t have to spend thousands of dollars to get the best IDE to write Angular. Community is free for a range of uses, and will do the job just as well.
Visual Studio Code: https://code.visualstudio.com/
VS Code is another alternative to Visual Studio 2015. It has no web server and it’s not as full-featured as VS 2015, or even Visual Studio Community Edition. What it does have is a powerful tech server, which makes it great for writing Angular code on a slow machine that struggles running the full Visual Studio. It’s very lightweight text editor that makes it easy to pick up and get started writing code.
ng-inspector: https://ng-inspector.org/
ng-inspector is an extension for FireFox, Chrome, and Safari that lets you inspect the scope from your browser. It updates in real time so you can watch the scope change as your application runs.

Podcasts

Great pod cast https://angular-air.com/
Another great podcast https://devchat.tv/adventures-in-angular