AngularJS – Understand the Jargons – Part 1

Jargon are ghosts, people never like them and for developers specially it has been a barrier to learn new technologies. A very simple instance I can say is Microsoft Azure, we have Azure Remoteapps, what people think is its like maintaining a huge code base while Remoteapps are just simple things. I did a presentation in Sri Lanka .NET forum meetup at Microsoft Sri Lanka on Azure Remoteapps, after the presentation someone came to me and told he never imagined Remoteapps is a quite simple thing.

With this post I am trying to make some clarifications on some Angular JS buzzwords, if you understand them, you can learn Angular quickly.

Angular Binding

We all know how data-binding happens, its a automatic synchronization of data between the model and view. But in Angular, data binding is slightly different, it lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa. In most templating systems, developers have to write code that constantly syncs the view with the model and the model with the view. But for angular the case is not like this. For more information refer this.

Angular Expressions

Angular binds data to HTML page using Expressions, where expressions are written in {{data goes here}}. For example

ng1

If you remove ng-app=”” attribute of the div tag, it will not work and will render as a normal HTML script. You can use numbers, strings, objects and arrays in expression. See this example,

ng1

ng-bind

Capture
ng-bind does a sililar functionality to {{}} but it give more performance than double curly brackets. Double curly brackets are more readable and require less typing. If you use double brackets for a very less time before the actual data comes to the place but if you use ng-bind you will not see this, This is because with {{}} angular compiler considers both the text node and it’s parent as there is a possibility of merging of 2 {{}} nodes. Hence there are additional linkers that add to the load time. Of course for a few such occurrences the difference is immaterial, however when you are using this inside a repeater of large number of items, it will cause an impact in slower runtime environment.

So, if we use ng-bind we won’t get the problem described above. This will only stored the value of variable in memory , angular will register a watcher where the watch expression consists of the variable only and since, ng-bind is an element attribute, it makes the bindings invisible to the user while the page is loading.

ng-model

ng-model has an intention for two way data binding while ng-bind does one way data binding.  Since we have this intention for ng-model we use it for input components. Scene behind ng-model is, it binds data in two ways

  1. $scope -> view
  2. view -> $scope

while ng-bind does this in only $scope -> view.

if you want to understand better about the two way bindings, you have an input component and the value updated into that field must be reflected in other part of the application. The better solution is to bind a variable to that field and output that variable where ever you wish to display the updated value through out the application.

Capture

$scope

In the previous ng-model paragraph, I have mentioned it bind data from $scope to view. View is clearly we know, its the something we see in browser. $scope is an “object” that “binds” to DOM element where you apply controller.

A controller (constructor) function is responsible for setting model properties and functions. This can be done only through $scope. Whatever function or model you apply in View (html file), that is accessed in controller using scope.

Only methods defined on this $scope object are accessible from the HTML/view. Example – from ng-click, filters, etc. Scope contains the model data. In controllers, model data is accessed via $scope object.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s