Post
Ask Question

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>
Output
 
AngularJS library reference

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>
Output
 
Now turn to check on UI
 
ng-init directives
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> 
Output
 
data-ng directive 

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>  
Output
 
ng-app directive 

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>   
Output
 
ng-app directive

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>  
Output
 
ng-model ng-app ng-init 
 
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>
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>   
Output
 
ng-bind 
 
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.


Similar Articles