Post
Ask Question

AngularJS - Basics

In my previous article I had described the Introduction of AngularJs. You can read it from the following link:

Introduction to AngularJs: Part 1

What is AngularJS?

I tried to answer this question in my previous article and to summarize it all, AngularJS is a client-side JavaScript framework to add interactivity to HTML.

In this article I'll try to introduce you to the various terms commonly used when developing Angular applications. They are: Directives, Modules and Expressions. Other terms that I ll be covering later are: Controllers, Services and so on.

As we go deeper into it, the first question that arises in my mind is, “How do we tell our HTML when to trigger JavaScript?”.

The answer is: through directives.

Directives

A directive is a marker or attribute written along with the HTML tag that tells AngularJS to run or reference some JavaScript Code.

We have an HTML snippet like:
  1. <!DOCTYPE html>  
  2.     <html>  
  3.        <body>  
  4.         …  
  5.        </body>  
  6. </html> 

And a JavaScript function like:

  1. function appSection() {  
  2.     alert (“Hello World!”);  
  3. }  

How do I tell AngularJS to run this JS method at a certain point. We do it with directives.

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <body ng-controller=“appSection”>  
  4.      …  
  5.     </body>  
  6. </html>  

Here "ng-controller" is the attribute that tells AngularJS to run the method "AppSection" and will result into an alert message as soon as the document tag <body> is rendered.

This is how we bind an element with its behavior.

Modules

Moving on in the direction of making the application in an "Angular" way, the next step is to keep it encapsulated with relevant "Modules".

Modules are the sections where we write pieces of an Angular application. They help us make our code more maintainable, testable and readable.

We define dependencies of our application into the modules only. We can also use several modules as the dependencies for another module.

Writing a module

  1. var app = angular.module('myApp', []);  

Here, "myApp" is the name of the newly created module and the [ ] contains the array of dependency names.

In our way to bring this module to life, we need to add a new directive "ng-app" in our HTML. It can be done this way:

  1. <!DOCTYPE html>  
  2. <html ng-app=”myApp”>  
  3.     <body>  
  4.     …  
  5.    </body>  
  6. </html>  

The module "myApp" isn't doing anything yet, but just by including it into our HTML with an element, its going to treat the HTML inside of this element as a part of Angular application and this means, we can now move on to writing expressions.

Expressions

Expressions are how we include dynamic values into our HTML page.

Some of the basic ones are:

  1. <p> I am {{ “Shashank” + “Srivastava” }} </p>  
  2. is going to render out as:  
  3. <p> I am Shashank Srivastava </p>  
  4. <p> I am {{ 12 + 12 }} </p>  
  5. is going to render out as:  
  6. <p> I am 24 </p> 

These were some of the keywords one should understand while stepping into the world of AngularJS.

While I extend this topic any further, I'll just wire up all three of these directives, modules and expressions into a single page application. Please take a look at it to get the best of it: jsfiddl


Similar Articles