Intro to Angular JS

Angular Js(AJS) is a front-end development framework to create Client Side SPAs (Single Page Applications). AJS based on JavaScript. It follows MVC design pattern (if you are not familiar with MVC read my post What is MVC?).  Lets start learn Angular JS by creating a simple Hello World Application!

I’m using a “Learn by Example” approach. So, first of all have a look at the code of our example (you can see it’s Live Demo as well!) and then we’ll go through the code line by line.

<!DOCTYPE html>
<html>
   <head>
      <!-- including angular.min.js file from Google CDN -->
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>

   <!-- starting Angular JS Application using 'ng-app' directive -->
   <body ng-app="">

      <!-- variable 'world' is beeing assigned with a string "World" using 'ng-init' directive-->
      <div ng-init="world='World'">
         <p>Replace "World" with any other word:</p>

         <!-- text box is being bound with variable 'world' using 'ng-model' which means text box will reflect the value of the variable -->
         <input type="text" ng-model="world" />

         <!-- The value of variable 'world' is being rendered by expressions {{ }} -->
         <h1>Hello {{world}}</h1>
      </div>

      <div>
         <label>Type Your Name:</label>

         <!-- text box is being bound with variable 'name' using 'ng-model' which means text box will reflect the value of the variable -->
         <input type="text" ng-model="name" /><br />
         <label>Show Your Name?</label>

         <!-- 'false' is being assigned to variable 'checked' using ng-init -->
         <!-- check box is being bound with variable 'checked' using 'ng-model' which means check box will reflect the value of the variable by being checked(true) or unchecked(false) -->
         <input type="checkbox" ng-init="checked=false" ng-model="checked"/><br />
      </div>

      <!-- This div will be shown only when you checked the chekbox -->
      <!-- variable 'checked' is assigned 'false' on line 21, so 'ng-show="checked"' becomes 'ng-show="false" ' -->
      <div id="name" ng-show="checked">

         <!-- The value of variable 'name' is being rendered by expressions {{ }} -->
         <h1>Hello {{name}}!</h1>
      </div>

   </body>
</html>

All the HTML code is ok for you but some attributes like ‘ng-app’, ‘ng-model’, ng-init, ‘ng-show’ and {{ some variable }} are new for you. Don’t worry I’m gonna explain it step by step.

All the code is explained by using HTML comments but It’s necessary to understand the purpose and the use of these directives to fully understand the working of the Angular JS Application.

Angular Directives

All the attributes you seem new to you are called Angular Directives. This is the beauty of the Angular JS that you extends your HTML and not include any extra code in your .html file and this is the purpose of MVC. Let’s explain directives one by one.

ng-app

This directive declares the scope of the Angular JS Application. The element which contains the ng-app directive is called the root element which means all the elements inside this root element are part of the Angular JS Application. In our case the root element is body element. It might have any other element.

ng-init

This directive is used to declare and/or initialize the variables*. In our case we have initialized variable world with string type World and variable checked with boolean type false.

Note: World is a string value hence written in single quotes while false is a boolean value that’s why written without quotes.

ng-model

This directive is used to bind Angular JS variables and the HTML input element/s. In our case we are using world and checked variables to bind them with HTML input elements using ng-model.

ng-show

This directive shows/hides HTML elements on the bases of an expression provided to it as a value. In our case ng-show has a variable checked as a value. If you observe carefully then you’ll see that the checked variable was initialized with a boolean value false. That’s why the expression gets false and as a result the div with id name is not shown. When you click the check box, true is stored in checked variable, consequently the expression gets true and the name div is shown!

Angular Expression

The curly braces {{ some variable}} like this are used to show the value of a variable or a result of an expression such as 4+2-3. It, when bound with a text field, shows the changing of the text field live. In our case we are showing the values of variables world and name in our view (Index.html) file.

Linking Webpage with Angular JS Framework

It’s quite easy to link a webpage with Angular JS Framework. There are two ways to do so:

  1. Include it from the Google’s CDN as we did in our example on line no 5. This approach is best for your site running on a server.
  2. Download angular.js file from Angular.org. This approach is best for the development on a local server.

 

 

*    Word variable is used in a loose sense. Actually it is a model property. We’ll see model and its property later.

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