In the previous blog titled “Introduction to AngularJS” we discussed what is AngularJS, files needed to use AngularJS in your application, and also what you need before learning the basics of AngularJS .

 

Now we will look at the basic capabilities of AngularJS.

 

Basic capabilities of AngularJS:

AngularJS Expressions: The AngularJS expressions represent special blocks in the html which are evaluated during runtime. These expressions appear between curly braces like this {{ your expression here }}. This is used both in evaluating JavaScript-like code and AngularJS controller data-binding (which we will discuss later in the series) or 2-way binding using “ng-model” covered here.

 

So let us see AngularJS Expressions in action:

Add an expression into the body tag of the demopage.html as “4 multiplied by 4 gives us {{4*4}}” and then click on the brackets window preview button (the bolt symbol in the top right hand corner) and you should see the following result:

 

image1

 

Note the expression is not working. We are not done yet. You need to add one tiny bit: it is the “ng-app” (short for AngularJS App – represents a module in code ) attribute to the page. This “ng-app” is categorized as an “AngularJS Directive” that I referred to in the blog’s beginning. This represents the scope of AngualrJS. AngularJS does not evaluate anything outside the scope. So add an ng-app directive to the html page’s body tag and refresh the page. You should now see the result as below:

 

image2

 

Pretty neat isn’t it? So now does it mean you can use Angular Expressions as a simple calculator? Yes but there is more to Angular Expressions than you’d expect. Let’s see what else Angular Expressions can do.

Ng-model: Remove the sentence in the body and add a text box. Add a new ‘directive’ called “ng-model” to the input tag and pass a text “textVal” as shown below:

 

image3

 

Now add an Angular Expression to a paragraph tag as shown below:

image4

 

Now refresh the browser, type something into the text box, and see the Angular magic happen:)

image5

 

Try to imagine doing this in JavaScript without Angular. You would have written a lot of code right? But Angular makes it so simple. In fact, the model value, “textVal,” will always hold the latest value, and we never have to update it manually. As Angular documentation describes it – “Model becomes the Single-Source-of-truth”.

 

Ng-repeat: Suppose instead of just a single variable like “textVal,” I had an array of variables? In this case, let’s say I had an array of objects and I want it to be displayed in a table. Look at the below markup and you will see a new directive called “ng-repeat.” It is used for the html markups that needs to repeat.

image6

 

Refresh the browser and you shall see the table rendered:

image7

 

Ng-repeat is taking each ‘person’ in the array and repeating the tr html markup until all the names are displayed. We can even filter the collection based on a dynamic input. The filter expression is added using the ‘| filter: <<based on some model variable >>’ syntax. If I want filter the table’s data display based on the input in a text box, then all I need to do is:
(I added couple of more names just to make it look interesting.)

image8

 

Refresh the page and type ‘Sa’ into the text box. You should see the names filtered based on the input:

image9

 

As you can see Angular makes these tasks easy and smooth. While these are not real-time implementations, you can get an idea of the power behind AngularJS in this quick demo.

I hope this article has given you an overview of what AngularJS is and how it is useful for a Web Application Developer.

 

Suryanarayana
Suryanarayana
Software Engineer