This is the continuation from AngularJS Recipe: Part 4.

# Modules in AngularJS

Here in this example I am showing the model and controller in separate files.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
  3. <!DOCTYPE html>
  4. <html 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 src="myApp.js"></script>
  9. <script src="employeeController.js"></script>
  11. </head>
  12. <body>
  13. <div ng-app="myApp" ng-controller="employeeController">
  14. <table style="border: 4px solid red; background-color: skyblue; color: blue;" border="1">
  15. <tr ng-repeat="x in Emp_Names">
  16. <td style="width: 200px;">{{ x.name }}</td>
  17. <td style="width: 200px;">{{ x.country }}</td>
  18. </tr>
  19. </table>
  20. </div>
  21. </body>
  22. </html>
employeeController.js
  1. app.controller("employeeController", function ($scope) {
  2. $scope.Emp_Names = [
  3. { name: 'Shambhu Sharma', country: 'USA' },
  4. { name: 'Rahul Saxena', country: 'India' },
  5. { name: 'Abhishek Nigam', country: 'USA' },
  6. { name: 'Shraddha Gaur', country: 'India' },
  7. { name: 'Shweta Kashyap', country: 'India' },
  8. { name: 'Yogesh Gupta', country: 'USA' },
  9. { name: 'Rakesh Dixit', country: 'India' },
  10. { name: 'Manu Khanna', country: 'India' },
  11. { name: 'Saurabh Mehrotra', country: 'USA' },
  12. { name: 'Mayank Dhulekar', country: 'USA' },
  13. { name: 'Akhilesh Atwal', country: 'India' }
  14. ];
  15. });
myApp.js
  1. var app = angular.module("myApp", []);


# Making a Registration Form with input text and button
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
  3. <!DOCTYPE html>
  4. <html 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('formCtrl', function ($scope) {
  11. $scope.master = { Name: "Rahul Saxena", Email: "[email protected]", Password: "PWD", City: "Noida", Country: "India", Mobile: "958100000" };
  12. $scope.reset = function () {
  13. $scope.user = angular.copy($scope.master);
  14. };
  15. $scope.reset();
  16. });
  17. </script>
  19. </head>
  20. <body style="background-color: skyblue; color: blue; font-family: Arial; font-size: 12pt; font-weight: bold;">
  21. <div ng-app="myApp" ng-controller="formCtrl">
  22. <form novalidate>
  23. <table>
  24. <tr>
  25. <td>Name:
  26. </td>
  27. <td></td>
  28. <td>
  29. <input type="text" ng-model="user.Name"></td>
  30. </tr>
  31. <tr>
  32. <td>Email:
  33. </td>
  34. <td></td>
  35. <td>
  36. <input type="text" ng-model="user.Email"></td>
  37. </tr>
  38. <tr>
  39. <td>Password:
  40. </td>
  41. <td></td>
  42. <td>
  43. <input type="text" ng-model="user.Password"></td>
  44. </tr>
  45. <tr>
  46. <td>City:
  47. </td>
  48. <td></td>
  49. <td>
  50. <input type="text" ng-model="user.City"></td>
  51. </tr>
  53. <tr>
  54. <td>Country:
  55. </td>
  56. <td></td>
  57. <td>
  58. <input type="text" ng-model="user.Country"></td>
  59. </tr>
  60. <tr>
  61. <td>Mobile:
  62. </td>
  63. <td></td>
  64. <td>
  65. <input type="text" ng-model="user.Mobile"></td>
  66. </tr>
  67. <tr>
  68. <td></td>
  69. <td></td>
  70. <td>
  71. <button ng-click="reset()">RESET</button></td>
  72. </tr>
  73. </table>
  74. </form>
  75. <p>Current Form Value = {{user}}</p>
  76. <p>Master Value = {{master}}</p>
  77. </div>
  78. </body>
  79. </html>




# Creating a Registration Form with Validation
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularJS_Demo.Default" %>
  3. <!DOCTYPE html>
  4. <html 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>
  9. <script>
  10. var app = angular.module('myApp', []);
  11. app.controller('validateCtrl', function ($scope) {
  12. $scope.user = 'Rahul Saxena';
  13. $scope.email = '[email protected]';
  14. $scope.password = 'PWD';
  15. $scope.city = 'Noida';
  16. $scope.country = 'India';
  17. $scope.mobile = '9581000000';
  18. });
  19. </script>
  20. </head>
  21. <body style="background-color: skyblue; color: blue; font-family: Arial; font-size: 12pt; font-weight: bold;">
  23. <form ng-app="myApp" ng-controller="validateCtrl"
  24. name="myForm" novalidate>
  25. <table>
  26. <tr>
  27. <td>Name:
  28. </td>
  29. <td></td>
  30. <td>
  31. <input type="text" name="user" ng-model="user" required>
  32. <span style="color: red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  33. <span ng-show="myForm.user.$error.required">Username is required.</span>
  34. </span>
  35. </td>
  36. </tr>
  37. <tr>
  38. <td>Email:
  39. </td>
  40. <td></td>
  41. <td>
  42. <input type="email" name="email" ng-model="email" required>
  43. <span style="color: red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  44. <span ng-show="myForm.email.$error.required">Email is required.</span>
  45. <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  46. </span>
  47. </td>
  48. </tr>
  49. <tr>
  50. <td>Password:
  51. </td>
  52. <td></td>
  53. <td>
  54. <input type="text" name="password" ng-model="password" required>
  55. <span style="color: red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
  56. <span ng-show="myForm.password.$error.required">Password is required.</span>
  57. </span>
  58. </td>
  59. </tr>
  60. <tr>
  61. <td>City:
  62. </td>
  63. <td></td>
  64. <td>
  65. <input type="text" name="city" ng-model="city" required>
  66. <span style="color: red" ng-show="myForm.city.$dirty && myForm.city.$invalid">
  67. <span ng-show="myForm.city.$error.required">City is required.</span>
  68. </span>
  69. </td>
  70. </tr>
  72. <tr>
  73. <td>Country:
  74. </td>
  75. <td></td>
  76. <td>
  77. <input type="text" name="country" ng-model="country" required>
  78. <span style="color: red" ng-show="myForm.country.$dirty && myForm.country.$invalid">
  79. <span ng-show="myForm.country.$error.required">Country is required.</span>
  80. </span>
  81. </td>
  82. </tr>
  83. <tr>
  84. <td>Mobile:
  85. </td>
  86. <td></td>
  87. <td>
  88. <input type="text" name="mobile" ng-model="mobile" required>
  89. <span style="color: red" ng-show="myForm.mobile.$dirty && myForm.mobile.$invalid">
  90. <span ng-show="myForm.mobile.$error.required">Mobile is required.</span>
  91. </span>
  92. </td>
  93. </tr>
  94. <tr>
  95. <td></td>
  96. <td></td>
  97. <td>
  98. <input type="submit"
  99. ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  100. myForm.email.$dirty && myForm.email.$invalid ||
  101. myForm.password.$dirty && myForm.password.$invalid ||
  102. myForm.city.$dirty && myForm.city.$invalid ||
  103. myForm.country.$dirty && myForm.country.$invalid ||
  104. myForm.mobile.$dirty && myForm.mobile.$invalid" />
  105. </td>
  106. </tr>
  107. </table>
  108. </form>
  109. </body>
  110. </html>