Post
Ask Question

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 Extend 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.


        Similar Articles