Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

AnguarJS Recipe - Part 1

Article:
Viewed:  1094 
Posted On:  22/04/2015 10:10:25 
What is AngularJS? AngularJS step by step. 

 

What is AngularJS?

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

To use AngularJs you have to add below reference in your application.

<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. While we read about AngularJS then we heard so many time that AngularJS extends HTML.
                                                    By using ng-directives it extends HTML.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="">
            <p>
                Enter Your Name:
                <input type="text" ng-model="Name">
            </p>
            <p ng-bind="Name"></p>
        </div>
    </form>
</body>
</html>
 

1.png

Image 1.

Here ng-app declare that application will run under AngularJS framework.

The ng-model directive binds the value of the input field to the application variable name.

The ng-bind directive binds the innerHTML of the <p> element to the application variable name.

#  ng-init directive use to initialize AngularJS application variables.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="">
            <div ng-app="" ng-init="Name='Priyanka Mathur'">
                <p>Your Name is: <span ng-bind="Name"></span></p>
            </div>
        </div>
    </form>
</body>
</html>
 

2.png

Image 2.

# AngularJS Expressions Double braces: {{ expression }}. used to write AngularJS expression

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="">
            <p>Expression In AngularJS: {{ 10 + 10 }}</p>
        </div>
    </form>
</body>
</html>

3.png

Image 3.

# AngularJS Applications with AngularJS Architecture

AngularJS modules define AngularJS applications.

AngularJS controllers control AngularJS applications.

The ng-app directive defines the application, the ng-controller directive defines the controller.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.Name = "Rahul Saxena";
            $scope.Email = "rahulsaxena@live.com";
            $scope.Address = "Noida, India";
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="myApp" ng-controller="myCtrl">
            Name:
            <input type="text" ng-model="Name"><br><br>
            Email:
            <input type="text" ng-model="Email"><br>
            <br>
            Address:
            <input type="text" ng-model="Address"><br>
            <br>
           <b> Employee Information:</b> {{Name + "  " + Email + "  " +Address}}
        </div>
    </form>
</body>
</html>

4.png

Image 4.

# Use Number in AngularJS

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="" ng-init="Product=5;Cost=20">
            <p><b>Total Cost Of your Order:</b> {{ Product * Cost }}</p>
        </div>
    </form>
</body>
</html>

5.png


Image 5.

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

# Using Object in AngularJS

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="" ng-init="employee={Name:'Rahul Saxena',City:'Noida'}">
            <p><b>Employee Information</b> {{ employee.Name + " - " + employee.City}}</p>
        </div>
    </form>
</body>
</html>

6.png

Image 6.

# Arrays in AngularJS:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="" ng-init="Employee=['Priya Mathur','Rahul Saxena','Sara Sinha']">
            <p>Employee at position 0:  {{ Employee[0] }}</p>
            <p>Employee at position 1:  {{ Employee[1] }}</p>
            <p>Employee at position 2:  {{ Employee[2] }}</p>
        </div>
    </form>
</body>
</html>

7.png

Image 7.

# Perform Data Binding in AngularJS:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="" ng-init="product=1;cost=5">
            Product Quantity:
            <input type="number" ng-model="product"><br />
            <br />
            Product Cost:  
            <input type="number" ng-model="cost"><br />
            <br />
            Total Cost: {{ product * cost }}
        </div>
    </form>
</body>
</html>

8.png

Image 8.

# Repeat in AngularJS

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="" ng-init="Employees=['Rahul','Shiva','Ram','Poonam']">
            <ul>
                <li ng-repeat="x in Employees">{{ x }}
                </li>
            </ul>
        </div>
    </form>
</body>
</html>

9.png

Image 9.

# Controller with Method In AngularJS

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', function ($scope) {
            $scope.Name = "Rahul Saxena";
            $scope.Email = "rahulsaxedna@live.com";
            $scope.Address = "Noida";
            $scope.EMP_Info = function () {
                return $scope.Name + " " + $scope.Email + " " + $scope.Address;
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="myApp" ng-controller="personCtrl">
            Name:
            <input type="text" ng-model="Name"><br>
            <br />
            Email:
            <input type="text" ng-model="Email"><br>
            <br>
            Address:
            <input type="text" ng-model="Address"><br>
            <br>
            <b>Employee Information :</b> {{EMP_Info()}}
        </div>
    </form>
</body>
</html>
 
10.png

Image 10.

In Next part I will come with some more… Continue…

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us