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",
[]);
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>
Image
34.
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>
Image
36.
Image
37.
Image
38.
Image
39.