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:
 

AngularJS Recipe - Part 5

Article:
Viewed:  910 
Posted On:  26/04/2015 19:46:23 
This is the continuation of my previous article. AngularJS Recipe - Part 4.  

 

This is the continuation of AngularJS Recipe - Part 4

 # Modules in AngularJS:

 

Here in this example I am going to show model and controller in different- different files.

 

<%@ 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 src="myApp.js"></script>
    <script src="employeeController.js"></script>
 
</head>
<body>
    <div ng-app="myApp" ng-controller="employeeController">
        <table style="border: 4px solid red; background-color: skyblue; color: blue;" border="1">
            <tr ng-repeat="x in Emp_Names">
                <td style="width: 200px;">{{ x.name }}</td>
                <td style="width: 200px;">{{ x.country }}</td>
            </tr>
        </table>
    </div>
</body>
</html>
 
 
employeeController.js:

app.controller(
"employeeController", function ($scope) {
    $scope.Emp_Names = [
        { name: 'Shambhu Sharma', country: 'USA' },
        { name: 'Rahul Saxena', country: 'India' },       
        { name: 'Abhishek Nigam', country: 'USA' },
        { name: 'Shraddha Gaur', country: 'India' },
        { name: 'Shweta Kashyap', country: 'India' },
        { name: 'Yogesh Gupta', country: 'USA' },
        { name: 'Rakesh Dixit', country: 'India' },
        { name: 'Manu Khanna', country: 'India' },
        { name: 'Saurabh Mehrotra', country: 'USA' },
        { name: 'Mayank Dhulekar', country: 'USA' },
        { name: 'Akhilesh Atwal', country: 'India' }
    ];
});
 

myApp.js:


var app = angular.module("myApp", []);

33.png

Image 33.


# Making a Registration Form with input text and button:


<%@ 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('formCtrl', function ($scope) {
            $scope.master = { Name: "Rahul Saxena", Email: "rahulsaxena@live.com", Password: "PWD", City: "Noida", Country: "India", Mobile: "958100000" };
            $scope.reset = function () {
                $scope.user = angular.copy($scope.master);
            };
            $scope.reset();
        });
    </script>

</
head>
<body style="background-color: skyblue; color: blue; font-family: Arial; font-size: 12pt; font-weight: bold;">
    <div ng-app="myApp" ng-controller="formCtrl">
        <form novalidate>
            <table>
                <tr>
                    <td>Name:
                    </td>
                    <td></td>
                    <td>
                        <input type="text" ng-model="user.Name"></td>
                </tr>
                <tr>
                    <td>Email:
                    </td>
                    <td></td>
                    <td>
                        <input type="text" ng-model="user.Email"></td>
                </tr>
                <tr>
                    <td>Password:
                    </td>
                    <td></td>
                    <td>
                        <input type="text" ng-model="user.Password"></td>
                </tr>
                <tr>
                    <td>City:                    
                    </td>
                    <td></td>
                    <td>
                        <input type="text" ng-model="user.City"></td>
                </tr>
 
                <tr>
                    <td>Country:
                    </td>
                    <td></td>
                    <td>
                        <input type="text" ng-model="user.Country"></td>
                </tr>
                <tr>
                    <td>Mobile:
                    </td>
                    <td></td>
                    <td>
                        <input type="text" ng-model="user.Mobile"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>
                        <button ng-click="reset()">RESET</button></td>
                </tr>
            </table>
        </form>
        <p>Current Form Value = {{user}}</p>
        <p>Master Value = {{master}}</p>
    </div>
</body>
</html>
 

34.png

Image 34.

35.png

Image 35.

 

# Creating a Registration Form with Validation:

 

<%@ 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('validateCtrl', function ($scope) {
            $scope.user = 'Rahul Saxena';
            $scope.email = 'rahulsaxena@live.com';
            $scope.password = 'PWD';
            $scope.city = 'Noida';
            $scope.country = 'India';
            $scope.mobile = '9581000000';
        });
    </script>
</head>
<body style="background-color: skyblue; color: blue; font-family: Arial; font-size: 12pt; font-weight: bold;">
 
    <form ng-app="myApp" ng-controller="validateCtrl"
        name="myForm" novalidate>
        <table>
            <tr>
                <td>Name:
                </td>
                <td></td>
               <td>
                    <input type="text" name="user" ng-model="user" required>
                    <span style="color: red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
                        <span ng-show="myForm.user.$error.required">Username is required.</span>
                    </span>
                </td>
            </tr>
            <tr>
                <td>Email:
                </td>
                <td></td>
                <td>
                    <input type="email" name="email" ng-model="email" required>
                    <span style="color: red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
                        <span ng-show="myForm.email.$error.required">Email is required.</span>
                        <span ng-show="myForm.email.$error.email">Invalid email address.</span>
                    </span>
                </td>
            </tr>
            <tr>
                <td>Password:
                </td>
                <td></td>
                <td>
                    <input type="text" name="password" ng-model="password" required>
                    <span style="color: red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
                        <span ng-show="myForm.password.$error.required">Password is required.</span>
                    </span>
                </td>
            </tr>
            <tr>
                <td>City:
                </td>
                <td></td>
                <td>
                    <input type="text" name="city" ng-model="city" required>
                    <span style="color: red" ng-show="myForm.city.$dirty && myForm.city.$invalid">
                        <span ng-show="myForm.city.$error.required">City is required.</span>
                    </span>
                </td>
            </tr>
 
            <tr>
                <td>Country:
                </td>
                <td></td>
                <td>
                    <input type="text" name="country" ng-model="country" required>
                    <span style="color: red" ng-show="myForm.country.$dirty && myForm.country.$invalid">
                        <span ng-show="myForm.country.$error.required">Country is required.</span>
                    </span>
                </td>
            </tr>
            <tr>
                <td>Mobile:
                </td>
                <td></td>
                <td>
                    <input type="text" name="mobile" ng-model="mobile" required>
                    <span style="color: red" ng-show="myForm.mobile.$dirty && myForm.mobile.$invalid">
                        <span ng-show="myForm.mobile.$error.required">Mobile is required.</span>
                    </span>
                </td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>
                    <input type="submit"
                        ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
                                        myForm.email.$dirty && myForm.email.$invalid || 
                                        myForm.password.$dirty && myForm.password.$invalid || 
                                        myForm.city.$dirty && myForm.city.$invalid || 
                                        myForm.country.$dirty && myForm.country.$invalid || 
                                        myForm.mobile.$dirty && myForm.mobile.$invalid" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

36.png

 

Image 36.

 

37.png 

Image 37.

 

 38.png

Image 38.

 

39.png 

Image 39.

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