Post
Ask Question

AngularJS Recipe: Part 5

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" %>  
  2.   
  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>  
  10.   
  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" %>  
  2.   
  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>  
  18.   
  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>  
  52.   
  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" %>  
  2.   
  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.   
  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;">  
  22.   
  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>  
  71.   
  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>  







Similar Articles