Skip to main content

The Definitive List of Angular 2 Resources to Get You Started

By May 27, 2016November 13th, 2020News

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.

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 3 for Angular 1.x:

  1. 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.
  2. The SideWaffle extension: http://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.
  3. 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.

Angular 2.0

  1. Angular 2.0 Style Guide: https://angular.io/styleguide
    This style guide is currently the only guide available for Angular 2.0

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.

  1. Video: What’s New in AngularJS 2.0: http://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.

  1. The official TypeScript website: http://www.typescriptlang.org/
    From this website you can learn more about TypeScript, download it, as well as follow some tutorials to get you started.
  2. TypeScript at Github: https://github.com/Microsoft/TypeScript
  3. tutsplus.com tutorial: Getting started with TypeScript: http://code.tutsplus.com/tutorials/getting-started-with-typescript–net-28890
  4. teamtreehouse.com tutorial: Getting started with TypeScript: http://blog.teamtreehouse.com/getting-started-typescript
  5. 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.

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

The New Angular Router

WARNING: This space is changing rapidly and some of these links may not contain the most recent information. Check out https://angular.io/docs/ts/latest/guide/router-deprecated.html for all the latest on 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.

  1. 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.
  2. The new router for Angular 1.4 and Angular 2.0 at Github: https://github.com/angular/router
    This router is not yet completed.
  3. A 10 minute primer to the new Angular router: http://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.

Build Tools

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.

  1. Raoni Boaventura’s Tutorial: Tools for Scaffolding, Building, and Testing: http://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.
  2. Scott Hanselman’s post, “Introducing Gulp, Grunt, Bower, and npm support for Visual Studio”: http://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.
  3. Gulp 101 – Getting LESS Up and Running in Visual Studio 2015: http://blog.chrisbriggsy.com/Gulp-101-CSS-all-the-LESS/
  4. Introduction to Webpack: Create your Angular 2 applications with a Webpack based tooling:https://angular.io/docs/ts/latest/guide/webpack.html
  5. Angular CLI: https://cli.angular.io/

Further reading to get you prepared for Angular 2.0

  1. The latest conference https://www.ng-conf.org/#/
  2. Minko Gechev’s first impressions of Angular 2.0:  http://blog.mgechev.com/2015/04/06/angular2-first-impressions/
  3. Angular 2 docs https://angular.io/docs/ts/latest/resources.html
  4. A mega angular 2 list https://github.com/angular-class/awesome-angular2
  5. Another mega list for angular 2 https://github.com/timjacobi/angular2-education
  6. https://material.angular.io/
  7. https://universal.angular.io/
  8. https://mobile.angular.io/
  9. https://angular.io/docs/ts/latest/cookbook/

Courses

Free

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

Paid

  1. 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
  2. Udemy courses by Dan Wahlin – $99: https://www.udemy.com/angularjs-jumpstart/
  3. PluralSight: http://www.pluralsight.com/tag/angular-js?pageSize=48&sort=new
  4. Pluralsight – Angular 2: First Look: https://www.pluralsight.com/courses/angular-2-first-look
  5. Frontend Masters – Build Web Apps with Angular 2: https://frontendmasters.com/courses/angular-2/
  6. Egghead.io – Building a Time Machine with Angular 2: https://egghead.io/series/building-a-time-machine-with-angular-2-and-rxjs
  7. io – Angular 2 Fundamentals: https://egghead.io/series/angular-2-fundamentals
  8. Lynda – Learn AngularJS 2: The Basics: https://www.lynda.com/AngularJS-tutorials/Learn-AngularJS-2-Basics/428058-2.html
  9. Lynda – AngularJS 2 Essential Training: https://www.lynda.com/AngularJS-tutorials/AngularJS-2-Essential-Training/422834-2.html
  10. Angular Boot Camp: https://angularbootcamp.com

Community Resources

Blogs from the Experts

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

Tools

  1. 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.
  2. 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.
  3. Angular Augury: https://augury.angular.io/
    Angular Augury is an extension for Chrome Dev Tools that is used to debug Angular 2 applications

Podcasts

  1. Great podcast http://angular-air.com/
  2. Another great podcast https://devchat.tv/adventures-in-angular

Videos

  1. DevSuperPowers Webinars with Duncan Hunter

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu