Learn AngularJS Series Part One - Introduction

AngularJS is a JavaScript framework (actually a written JavaScript library) and it can be added to an HTML page with a <script> tag. Angular JS is perfect for Single Page Application(SPA), and version 1.0 was released in 2012 by Miško Hevery. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

What you should already know before learning AngularJS:

  1. HTML
  2. CSS
  3. JavaScript(Master of web programming)

We can add Angular reference in our page just like below:

  1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  

 

AngularJS extends HTML with ng-directives(Backbone of AngularJS). The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, text area) to application data. The ng-bind directive binds application data to the HTML view.

Now, tit's time to play with the concept:

I have created a page with MyFirstPageInAngular.html and added reference of AngularJS library and some HTML:

  1. <!DOCTYPE html>  
  2. <html>  
  3.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4.         <body>  
  5.             <div ng-app="">  
  6.                 <p>Input your name in below text box:</p>  
  7.                 <p>Name : <input type="text" ng-model="name" placeholder="Enter your name here"></p>  
  8.                 <h1>Hello {{name}}!</h1>  
  9.             </div>  
  10.         </body>  
  11. </html>   

AngularJS

Output

AngularJS
Angular JS Directives

What are Angular JS directives?

We can say, if it extends HTML with new attributes it  is called Directives.

Angular JS has a set of built-in directives which offer functionality to your applications, Angular JS also lets you define your own directives to use in your applications.

As you have already seen and understood that Angular JS directives are HTML tags having ng prefix, ng-init directives initializes Angular JS application variable.

The ng-app directive also tells Angular JS that the <div> element is the "owner" of the Angular JS application.

Just like this:

  1. <!DOCTYPE html>  
  2. <html>  
  3.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4.         <body>  
  5.             <div ng-app="" ng-init="firstName='Upendra'">  
  6.                 <p>My name is <span ng-bind="firstName"></span></p>  
  7.             </div>  
  8.         </body>  
  9. </html>   

AngularJS

Output

Now turn to check on UI

AngularJS
You can use data-ng- instead of ng-, you want to make sure your page is HTML valid.

Just like 

  1. <!DOCTYPE html>  
  2. <html>  
  3.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4.         <body>  
  5.             <div data-ng-app="" data-ng-init="firstName='Upendra'">  
  6.                 <p>The name is <span data-ng-bind="firstName"></span></p>  
  7.             </div>  
  8.         </body>  
  9. </html>   

AngularJS

Output

AngularJS
Angular JS Expressions

Angular JS binds data to HTML using Expressions.

Angular JS expressions can be written in double braces just like : {{ expression }}, we can also write this inside a directive : ng-bind="expression".

Angular JS will resolve the expression, and return the result exactly where the expression is written and we can expose this on UI as we want.

AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

Example

  1. {{ 10 + 3 }}   
  2. or {{ firstName + " " + lastName }}   
  3. or {{ surName + " " + firstName }}  

Now it's  time to play with concept:

I have created a page for this,

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4.     <body>  
  5.   
  6.         <div ng-app="">  
  7.           <p>My first expression: {{ 10 + 3 }}</p>  
  8.         </div>  
  9.   
  10.     </body>  
  11. </html>  

AngularJS

Output

AngularJS
If you remove the ng-app directive or forgot to use it, HTML will display the expression as it is, without solving it. See below example:

HTML 

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4.     <body>  
  5.   
  6.         <div>  
  7.           <p>My first expression: {{ 10 + 3 }}</p>  
  8.         </div>  
  9.   
  10.     </body>  
  11. </html>   

AngularJS

Output

AngularJS
You can write expressions wherever you want, Angular JS will simply resolve the expression and return the result.

Example

Let Angular JS change the value of CSS properties. 

  1. <!DOCTYPE html>  
  2. <html>  
  3.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4.         <body>  
  5.           
  6.             <div ng-app="" ng-init="bgCol='lightgreen'">  
  7.                 <input style="background-color:{{bgCol}}" ng-model="bgCol" value="{{bgCol}}">  
  8.             </div>  
  9.         </body>  
  10. </html>  

AngularJS

Output

AngularJS
Angular JS Numbers

Angular JS numbers are just like JavaScript numbers.

We have created a page for this to help you understand. 

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4.     <body>  
  5.   
  6.         <div ng-app="" ng-init="quantity=3;cost=10">  
  7.             <p>Total in INR: {{ quantity * cost }}</p>  
  8.         </div>  
  9.     </body>  
  10. </html>   

AngularJS

Output

AngularJS
We can also achieve the  above using ng-bind. 

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4.     <body>  
  5.   
  6.         <div ng-app="" ng-init="quantity=3;cost=10">  
  7.             <p>Total in INR: {{ quantity * cost }}</p>  
  8.             <p>Total in INR using ng-bind: <span ng-bind="quantity * cost"></span></p>  
  9.         </div>  
  10.     </body>  
  11. </html>   

AngularJS

Output

AngularJS

Now, it’s your turn to  practice with above information and let us know if you put your comments and suggestions in an article.

In the next series we will learn many new things and play with Angular JS.

Thanks for reading and supporting me.