We've been acquired by Pluralsight!
| Find out more
  • Show Me AngularJS
 

Show Me AngularJS

You can watch this production over at Pluralsight.com. We're currently migrating all of our productions and should have them all rolled over by January 1, 2014.



Pin It

In this production we build an application with AngularJS: rebuilding Congo (our MongoDB explorer that we built with BackboneJS for our Backbone series) - but this time we use AngularJS. The goal of this production is to move quickly beyond "fun demos" and into the weeds, encountering issues/solutions that you will have to face when working with Angular on a daily basis.


Topics

Our focus is building an application. This means we're going to be less conceptual (as you might find with typical training approaches) and more pragmatic: what we need to know and do to get the job done. Topics covered will include:

  • Basic Concepts behind Angular (Dependency Injection, Composition, Inversion of Control, etc)
  • The core moving parts: Controllers, Modules, Directives, Services, Routing, etc
  • Testability: how to test Angular with external frameworks and also using the built-in scenario runner
  • Declarative Good Ideas: Angular allows you to do a lot in the DOM, which requires a bit of discipline
  • Reusability: Angular provides a great deal of modularity - this means coding for reusability is rather simple

Code

The starter code for the production is available here


Preview

Hello Angular

In this, our first episode, we take AngularJS for a spin to see what it can do. Rob focuses on key concepts behind Angular and then jumps right into coding.

Services

In this episode we go beyond the demo and break apart our simple application into basic structures. The first step is to create an Angular application (also known as a module), then push logic out of our Controller and into a service. We then push to using Angular's $resource provider to do some heavy data-lifting for us.

Directives

Directives in Angular are little chunks of UI code that can be simple (such as a formatted header) or complex (a tabbed pane). Creating them in Angular is fairly simple - in this episode we create a set of reusable buttons for adding and removing items from a list.

Routing

In this episode we introduce Routing, which gives your application the ability to respond to URLs. Along the way we refactor our List Controller to be a bit more flexible and reusable.

Directives, Part 2

In this episode we tackle "The Breadcrumb Problem" - something that was a bit difficult to deal with in our Backbone production. Once again, we'll lean on directives but this time, we'll use some advanced features to help us keep things encapsulated and reusable.

Refactor: Part 1

In this episode we take a step back and refactor what we've done. Along the way Rob addresses a bit of a security issue: pushing the naked $routeParams into the $save routine directly! We also take a look at the different ways to configure services in Angular, and finally clean up and namespace the code.

Iteration One: Complete

In this episode we drop in the Ace Code Editor and finish up the first functional iteration of our application. Along the way we solve some problems with Filters and discuss URLs (once again)

Development, Testing, Building

In this episode we take a look at the tools you can use to help you develop, test, and build an Angular application. We start off with a look at WebStorm (from JetBrains) and then SublimeText2, finally moving on to Visual Studio. After that we take a look at the various ways you can test your Angular app, and finally the build tools that exist. Along the way we goof around with Angular Seed and Yeoman.

Code

The code for this project is up at our Github repo