Data binding in AngularJS

One of the most important things in AngularJS is the data binding. In fact I think it is so important it should be one of the first things you should get to know if you start to write Angular apps. It should be explained more and it shouldn’t be just “the magic that we won’t cover right now”.

The real magic behind Angular’s data binding is called dirty checking. Basically every time you write

{{myModel}}

in the background a new watch for the expression

myModel

 is being created that on every $digest cycle will be evaluated and if the value of the model is changed, the DOM will be updated. Thanks to this dirty checking we are also able to use plain old JS object as our model. How data binding works is explained in detail in this great article – http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/. I also recommend to read Misko’s answer to this StackOverflow question on why dirty checking is not a bad thing, unless of course it is used in a bad way. This is why we should understand how data binding works.

Read More

JavaScript on conferences

Recently two big conferences were held in Sofia – jQuery Bulgaria and Java2Days. Luckily I was able to attend both and I really liked both of them.

What was interesting about those events was that one was free and it was in Saturday, while the other was paid and during two workdays. One was targeting JavaScript developers, while the other Java developers. One was about JavaScript and the other … well JavaScript was hot topic 🙂 At one point I even though I was on JavaScript2Days, which by the way would be awesome to have!

Read More

Running "grunt server" in development

Some time ago @jvassev pointed me to Yeoman, a great set of tools that really improved my productivity when developing JavaScript apps. One of the tools it wraps is Grunt, it is used to automate common tasks when developing a project, like running a preview of the project, building it and testing it.

I am working on a project, where we are running the “grunt server” task that starts a static server so we can preview and test out changes of the front end code. Together with that it can run livereload that will listen to file changes, so that when a file is changed, the browser is automatically refreshed, or also compass server that will compile all your sass files, and others.

In order to develop in an environment as close as the production environment, you should query your back-end API. This can be done with this neat grunt plugin, that, https://github.com/drewzboto/grunt-connect-proxy . So basically if you run “grunt server” locally, then it can serve you the static files, and request to the back-end API can be proxied to your web server.

You can check this post that explains more.