AngularJS basic introduction - Sander Elias¶

Tags: django

(We’re using AngularJS in a couple of Django projects, so I decided to go to an AngularJS meeting in Haarlem, the Netherlands. This is a summary of the first talk.)

Bonus points for Sander: his entire presentation was made with AngularJS :-) His presentation is a basic explanation of AngularJS.

In AngularJs, you define variables and you can bind to them in templates, where the value of the variable automatically shows up. One way to define variables is to initialize them in your controller, another way is to define them as a “model” in your template, for instance turn an input field into a model.

Scopes are central to AngularJS. It is, behind the scenes, just a simple javascript object. It is used to glue the javascript to your view (which is the template/html). A scope can do cool tricks, like monitoring expressions and firing (or acting upon) events.

Note: there’ll be a new syntax for scopes in AngularJS: controller as. The current approach seems to confuse a lot of people. The new approach is not really different, it is just the syntax that’s different.

The new syntax looks like ng-controller="SomeScope as myData". The good thing about this is that you’re explicitly giving your scope a name, which makes it easier to deal with nested scopes: you can refer to variables in parent scopes. In the old way you’d have implicit inheriting of values from the parent scopes. (Personal note: the old way sounds a bit like the old Zope2’s “Acquisition” mechanism).

The new syntax is easier to read and maintain.

Dependency injection is pretty central to AngularJS. One way is to use services. You can request a service in your scope and define the actual service elsewhere. So you can swap out implementations, as long as something is available under the same service name.

Another nice option you have in AngularJS: custom directives. Which means custom HTML tags like <todoitem>. You define those in your javascript and hook them up with whatever functionality you want: a template to replace the tag with; javascript functions to hook up to actions on the directive; etcetera.

A comment by Sander on one of the questions: “AngularJS is the first framework that lets me write less code, that’s the good thing about AngularJS”.