Thursday 20 June 2013

Angular JS - Almost the simplest thing you can do

While Angular lets you build very complex applications it also lets you do very simple things, the simplest of which is to bind data to a model. You do this by using templates. Templates allow you to output data, carry out calculations in-line. Taken from the AngularJS docs:

  • Attribute Evaluation: evaluation of all properties are against the scope, doing the evaluation, unlike in JavaScript where the expressions are evaluated against the global window.

  • Forgiving: expression evaluation is forgiving to undefined and null, unlike in JavaScript, where trying to evaluate undefined properties can generate ReferenceError or TypeError.

  • No Control Flow Statements: you cannot do any of the following in angular expression: conditionals, loops, or throw.

  • Filters: you can pass result of expression evaluations through filter chains. For example to convert date object into a local specific human-readable format.

Templates are simple to use, like this:
{{3 + 3}}

However this is not particularly interesting in and off itself, we are simply displaying data. To make this both more interesting and useful we'd like ability to dynamically grab dats from the user and then update the page using that data, this is where two-way binding comes in.

Two way data binding can be added to elements on the page. This binding allows data to be entered into one element and the value of that data to be reflected back through other elements on the page. To do this an input element is annotated with an ng-model attribute. This attribute specifies the name of the 'model' that the data will be stored in. As data is entered into the element Angular will update the model with this data. The value of this model can then be displayed using the 'moustache' syntax in a template as seen above.

{{3 + 34}}

Hello {{name}}

If a user enters the value 'Kevin' into the input field then the following is produced:

Simpledatabinding

The key thing here is hg-model, this creates a model called 'name' which is then available to be used in the rest of the page, in this case inside the h2 tag. ng-model (aka ngModel) takes a string value which specifies the name of the model that Angular binds the data to.

Data-binding is a general purpose mechanism. This means that you can bind the data to other places in the DOM such as a class name or a attribute value.

Batarang (Debugging AngularJS)

Came across this today Needs Chrome Canary builds but it looks very cool

Wednesday 19 June 2013

ngApp in AngularJs

AngularJS applications need to be 'bootstrapped.' This is done by adding the ng-app directive to an element in the page. You can use any element but typically the root 'body' or 'html' element is used.

<html ng-app="">
</html>

Notice that hg-app takes a string value, this is the name of a module to load, if you have no modules this can be the empty string.

Once you have this in place you can then start using Angular

<html ng-app="">
<body>

{{3 + 34}}
</body> </html>

will cause angular to 'execute' the template and display the value 37 on the page.

This is about as simple as it gets for Angular code.

The problem with the simple approach of just using ng-app is that this is not compliant with the HTML 5 specification. Because of this Angular provides other ways of defining directives. Instead of just ng-app, you could use data-ng-app (this is the most widely used alternative) x-ng-app. This applies to all the directives not just ngApp.

Sunday 16 June 2013

Installing Node and MongoDB On Mac OSX

There are many ways to install Node and MongoDB on OSX, the easiest way is to use a package management tool, and I prefer to use Brew.

Before you install Brew you will need to install XCode (you'll need the compiler)

If you don't have brew installed you can follow the instructions here On Mac: install brew, or simply type
ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"
into a shell.
Once you have that you can then do:
brew update
then
brew install node

brew install mongodb

to install NodeJs and MongoDB respectively