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;
});
Provider:
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.