JavaScript

AngularJS Recipe: Part 1

Introduction

AngularJS is a JavaScript structural framework for dynamic web apps. It can be used in a HTML page with a <script> tag. AngularJS extends HTML attributes with Directives and binds data to HTML with Expressions.

To use AngularJs you need to add the following reference to your application.

  1. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
Now we will learn AngularJS step-by-step.

How AngularJS Extends HTML

When we read about AngularJS we hear many times that AbgularJS extends HTML. It uses ng-directives to extend HTML.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  8.     </head>  
  9.     <body>  
  10.         <form id="form1" runat="server">  
  11.             <div ng-app="">  
  12.                 <p>Enter Your Name:    
  13.                     <input type="text" ng-model="Name">  
  14.                     </p>  
  15.                 <p ng-bind="Name"></p>  
  16.             </div>  
  17.         </form>  
  18.     </body>  
  19. </html>  

  1. Here ng-app declares that the application will run under the AngularJS framework.
  2. The ng-model directive binds the value of the input field to the application variable name.
  3. The ng-bind directive binds the innerHTML of the <p> element to the application variable name.
ng-init directive for initializing AngularJS application variables
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  8.     </head>  
  9.     <body>  
  10.         <form id="form1" runat="server">  
  11.             <div ng-app="">  
  12.                 <div ng-app="" ng-init="Name='Priyanka Mathur'">  
  13.                     <p>Your Name is:   
  14.                         <span ng-bind="Name"></span>  
  15.                     </p>  
  16.                 </div>  
  17.             </div>  
  18.         </form>  
  19.     </body>  
  20. </html>  


AngularJS Expressions Double braces

{{ expression }} is used to write AngularJS expressions.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  8.     </head>  
  9.     <body>  
  10.         <form id="form1" runat="server">  
  11.             <div ng-app="">  
  12.                 <p>Expression In AngularJS: {{ 10 + 10 }}</p>  
  13.             </div>  
  14.         </form>  
  15.     </body>  
  16. </html>  


AngularJS Applications with AngularJS Architecture 
  1. AngularJS modules define AngularJS applications.
  2. AngularJS controllers control AngularJS applications.
  3. The ng-app directive defines the application, the ng-controller directive defines the controller.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  8.         <script>    
  9.             var app = angular.module('myApp', []);    
  10.             app.controller('myCtrl', function ($scope) {    
  11.             $scope.Name = "Rahul Saxena";    
  12.             $scope.Email = "[email protected]";    
  13.             $scope.Address = "Noida, India";    
  14.         });    
  15.     </script>  
  16.     </head>  
  17.     <body>  
  18.         <form id="form1" runat="server">  
  19.             <div ng-app="myApp" ng-controller="myCtrl">    
  20.                 Name:<input type="text" ng-model="Name">  
  21.                 <br><br>    
  22.                 Email:<input type="text" ng-model="Email">  
  23.                 <br><br>  
  24.                 Address:<input type="text" ng-model="Address">  
  25.                 <br><br>  
  26.                 <b> Employee Information:</b> {{Name + " " + Email + " " +Address}}    
  27.             </div>  
  28.         </form>  
  29.     </body>  
  30. </html>    


Use Number in AngularJS
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  8.     </head>  
  9.     <body>  
  10.         <form id="form1" runat="server">  
  11.             <div ng-app="" ng-init="Product=5;Cost=20">  
  12.                 <p>  
  13.                     <b>Total Cost Of your Order:</b> {{ Product * Cost }}  
  14.                 </p>  
  15.             </div>  
  16.         </form>  
  17.     </body>  
  18. </html>  


When initializing and using take care of case because AngularJS is case sensitive.

Using Object in AngularJS
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  8.     </head>  
  9.     <body>  
  10.         <form id="form1" runat="server">  
  11.             <div ng-app="" ng-init="employee={Name:'Rahul Saxena',City:'Noida'}">  
  12.                 <p>  
  13.                     <b>Employee Information</b> {{ employee.Name + " - " + employee.City}}  
  14.                 </p>  
  15.             </div>  
  16.         </form>  
  17.     </body>  
  18. </html>  


Arrays in AngularJS
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  8.     </head>  
  9.     <body>  
  10.         <form id="form1" runat="server">  
  11.             <div ng-app="" ng-init="Employee=['Priya Mathur','Rahul Saxena','Sara Sinha']">  
  12.                 <p>Employee at position 0: {{ Employee[0] }}</p>  
  13.                 <p>Employee at position 1: {{ Employee[1] }}</p>  
  14.                 <p>Employee at position 2: {{ Employee[2] }}</p>  
  15.             </div>  
  16.         </form>  
  17.     </body>  
  18. </html>  


Perform Data Binding in AngularJS
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  8.     </head>  
  9.     <body>  
  10.         <form id="form1" runat="server">  
  11.             <div ng-app="" ng-init="product=1;cost=5">    
  12.                 Product Quantity:<input type="number" ng-model="product">  
  13.                 <br />  
  14.                 <br />    
  15.                 Product Cost:<input type="number" ng-model="cost">  
  16.                 <br />  
  17.                 <br />    
  18.                 Total Cost: {{ product * cost }}    
  19.             </div>  
  20.         </form>  
  21.     </body>  
  22. </html>   
 


Repeat in AngularJS
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  8.     </head>  
  9.     <body>  
  10.         <form id="form1" runat="server">  
  11.             <div ng-app="" ng-init="Employees=['Rahul','Shiva','Ram','Poonam']">  
  12.                 <ul>  
  13.                     <li ng-repeat="x in Employees">{{ x }}</li>  
  14.                 </ul>  
  15.             </div>  
  16.         </form>  
  17.     </body>  
  18. </html> 


Controller with Method In AngularJS
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  
  8.         <script>    
  9.             var app = angular.module('myApp', []);    
  10.             app.controller('personCtrl', function ($scope) {    
  11.                 $scope.Name = "Rahul Saxena";    
  12.                 $scope.Email = "[email protected]";    
  13.                 $scope.Address = "Noida";    
  14.                 $scope.EMP_Info = function () {    
  15.                     return $scope.Name + " " + $scope.Email + " " + $scope.Address;    
  16.                 }    
  17.             });    
  18.         </script>  
  19.     </head>  
  20.     <body>  
  21.         <form id="form1" runat="server">  
  22.             <div ng-app="myApp" ng-controller="personCtrl">    
  23.                 Name:<input type="text" ng-model="Name">  
  24.                 <br>  
  25.                 <br />    
  26.                 Email:<input type="text" ng-model="Email">  
  27.                 <br>  
  28.                 <br>    
  29.                 Address:<input type="text" ng-model="Address">  
  30.                 <br>  
  31.                 <br>  
  32.                 <b>Employee Information :</b> {{EMP_Info()}}    
  33.             </div>  
  34.         </form>  
  35.     </body>  
  36. </html>    


The next part will come with more. Continued.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs