AngularJS : Basics

I know i am bit late to the AngularJS party, but better late than never, right !

Before we get into writing code , let me tell you i am also learning AngularJS and i know the state of a newbie's mind when you try reading this post. So i assume no prior knowledge of Angular on user front.

If you are a star developer working with angular service factories, may be this is too basic for you.
Hey, nothing wrong in checkup on basics, right !

Objectives:
                  1. Why angularJS
                  2. Learn basics - module, controller , data binding

Why AngularJS?

We have used JQuery for most of the client side magic like Service calls from JS, DOM manipulations, Data binding, jazzy display controls.
Please note that JQuery is a library and Angular is a Framework.

Why use a framework?

Good frameworks can help architect your code so that it is modular (therefore reusable), readable, performant and secure. jQuery is not a framework, so it doesn't help in these regards. This isn't jQuery's fault - it's the fault of developers that don't know how to architect code. If you organise functionality into reusable modules it will become a framework. So why to write your own when our tech gain Google is providing one.

Here are some things that modern frameworks are providing:
Templating
Data-binding
routing (single page app)
clean, modular, reusable architecture
security
additional functions/features for convenience

Before I further discuss Angular, I'd like to point out that Angular isn't the only one of its kind. Durandal, for example, is a framework built on top of jQuery, Knockout, and RequireJS. Again, jQuery cannot, by itself, provide what Knockout, RequireJS, and the whole framework built on top them can. It's just not comparable.

Basics Of Angular (for this example)

Here is an easy way to understand the basic things like module , controller , data binding. We are not covering all the basics here.



From top to bottom AngularJS library reference in head tag.
The other script file "app.js" is the one where we write our angular code.

ng is short form for Angular.

Now look at body tag's attribute "ng-app".
When you use this directive, angular auto-bootstrap the element as the beginning element of the application.
It can be at html tag or body tag or even a div tag inside a body tag.
Only condition is everything you want to work with angular should be inside the tag with ng-app directive.

Now "ng-controller", a controller directive defines a scope.
This means the variables can have different values in different scopes. In above example "name" is a variable in scope MainCtrl.

But if i define a second controller having same variable, i can assign a different value to it, as shown below.


Data Binding

Now look at {{7+8}} it is shown as 15 in output window.  It is called an expression.
Expression is a way to evaluate or bind the data to the variables. Since we want to bind different values to variable name, we define it in two different controllers.

Now lastly look at the angular code we wrote in app.js to make it work.
The code is pretty much self explanatory.



Now we step-up a bit.
Consider a person object with first name & last name.
Here goes the markup and its output.


and the angular code to make it work


Now i will throw a picture on top of it. i got a url of my profile picture.
and the person attributes in angular code (app.js) changes to


and the markup and its output changed to



But i want to display image , not its url. So the markup changes to



You can download final version of files for your reference from this link.