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.
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: 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.
- 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.
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: 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:
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: 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.
- TypeScript at Github: https://github.com/Microsoft/TypeScript
- tutsplus.com tutorial: Getting started with TypeScript: http://code.tutsplus.com/tutorials/getting-started-with-typescript–net-28890
- teamtreehouse.com tutorial: Getting started with TypeScript: http://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
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: http://www.sitepoint.com/practical-guide-angularjs-directives/
- An introduction to Angular directives at w3schools.com: http://www.w3schools.com/angular/angular_directives.asp
- AngularJS Docs on Directives: https://docs.angularjs.org/guide/directive
- Dan Wahlin Series on Creating Directives: http://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: 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.
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
- 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.
- 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.
- Gulp 101 – Getting LESS Up and Running in Visual Studio 2015 http://blog.chrisbriggsy.com/Gulp-101-CSS-all-the-LESS/
Further reading to get you prepared for Angular 2.0
- The latest conference http://angularconnect.com/
- Minko Gechev’s first impressions of Angular 2.0: http://blog.mgechev.com/2015/04/06/angular2-first-impressions/
- Angular 2 docs https://angular.io/docs/ts/latest/resources.html
- A mega angular 2 list https://github.com/angular-class/awesome-angular2
- Another mega list for angular 2 https://github.com/timjacobi/angular2-education
- AngularJS Tutorial at W3Schools.com: http://www.w3schools.com/angular/default.asp
- Free, easy to understand beginners course: http://www.learn-angular.org/
- 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: http://www.pluralsight.com/tag/angular-js?pageSize=48&sort=new
Blogs from the Experts
- John Papa’s blog: http://www.johnpapa.net/
- Todd Motto’s blog: http://toddmotto.com/
- Dan Wahlin’s blog: https://weblogs.asp.net/dwahlin
- 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: http://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.
- Great pod cast http://angular-air.com/
- Another great podcast https://devchat.tv/adventures-in-angular