Things learned while preparing for Angular Live Code

This week I learned that there’s nothing quite like signing up to teach something to make you realize you don’t actually know the material all that well.

I’m giving an introduction to AngularJS talk this Thursday at Startup House SF. You should come by if you want to learn about AngularJS.

It’s Tuesday and 124 people have signed up and I’m kind of nervous to say the least. I’ve tried to channel my nervousness into preparation (we’ll see if it pays off or not). Here are a few things I’ve learned in the process.

The difference between $route and $routeProvider

This boils down to the difference between providers and services. Providers are blueprints that create injectable services for your app. $route is the service that $routeProvider creates. $routeProvider gives you the chance to configure itself before it creates $route if you do so in the module.config block. The rules you configure on $routeProvider in your config block become $route.routes.

The only place you can inject providers is into a module.config block. You can’t inject any normal dependencies into module.config because the injector hasn’t been built yet at that point.

The difference between a service, a factory, and a provider

Service: the actual function you give module.service becomes the injectable service.

module.service('Cats', function() {
  this.cats = [];

Factory: the object you return from the config function you supply becomes the injectable service.

module.factory('Cats', function() {
  var Cats = {};
  Cats.cats = [];
  return Cats;


From the below SO answer: “Providers have the advantage that they can be configured during the module configuration phase.” Just like module.factory lets you write a wrapper configuration function around module.service so that it can be dynamically configured at the time of injection, module.provider allows you to write a wrapper function around module.factory so that it can by dynamically configured at the time the app starts (using a module.config block). You define this.$get() on the configuration function, in which you define manually what automatically happens in the background when you use module.factory.

module.provider('Cats', function() {
  var cats = [];
  this.setInitialCats = function(initalCats) {
    cats = [initalCats];

  function Cats(newCats) {
    cats = cats.concat(newCats);
    this.getCats = function() {
      return cats;

  this.$get = function(newCats) {
    return new Cats(newCats);

This is summarized from this SO answer.

“If you don’t have a dot in your model, you’re doing it wrong”

I had understood the need to hand ng-model a reference to a property on an object, not a primitive, but this sums it up nicely. Related SO page.

On ng-init

Accoriding to the docs, there isn’t much use for this outside of nested ng-repeats. However, for demo purposes, I think it might be useful.

Contents (top)