AngularJS Recipes

Prévia do material em texto

©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
AngularJS Recipes 
This free book is provided by courtesy of C# Corner and Mindcracker Network and 
its authors. Feel free to share this book with your friends and co-workers. Please 
do not reproduce, republish, edit or copy this book. 
 
Rahul Saxena 
Senior Technical Lead 
 
Sam Hobbs 
Editor, C# Corner 
 
 
http://www.c-sharpcorner.com/
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
ABOUT THE AUTHOR 
 
 
Rahul K Saxena is working as a Senior Technical Lead 
in HCL Technologies. He did Masters in Computers 
Application and currently having more than 6+ years. 
His main technical skills include SharePoint 2010, 
MOSS 2007, C#, ASP.NET, SQL Server, Ajax, jQuery, 
ASP.NET, SQL Server, Ajax, jQuery, MVC4, MVC5, WCF, WPF, SSRS, 
HTML, JavaScript, etc. His main passion is learning new technologies, 
sharing knowledg and loves photography, traveling and reading books. 
 
A Message from the Author 
 
"C# Corner is a community with the main goal – learn, share and 
educate. You could help grow this community by telling your co-workers 
and share on your social media Twitter and Facebook accounts " 
 
- Rahul Saxena 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
Table of Contents 
 About this EBook 
 An Introduction to AngularJS 
 How AngularJS Extends HTML 
 ng-init directive for initializing AngularJS application variables 
 AngularJS Expressions Double braces 
 AngularJS Application with AngularJS Architecture 
 Use Number in AngularJS 
 Using Object in AngularJS 
 Arrays in AngularJS 
 Perform Data Binding in AngularJS 
 Repeat in AngularJS 
 Controller with Method in AngularJS 
 Making Controller in External File 
 External Controller File using repeat 
 Filters in AngularJS 
o Currency Filter 
o orderBy Filter 
o Filter by Taking User input 
 Showing Data in a Table after reading from Controller external File 
 Showing Record from External Controller File in a Table with CSS style sheet 
 Showing Records In a Table with Index Value 
 Using if condition in AngularJS With Even and Odd in a Table 
 Make disable button on CheckBox Click 
 ng-show Directive 
 Button and click event in AngularJS 
 Another Example Of Button Click in AngularJS 
 Show Hide on button Click in AngularJS 
 Modules in AngularJS 
 Making a Registration form with input text and button 
 Creating a Registration form with Validation 
 Summary 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
About this eBook 
AngularJS is an open-source JavaScript MVC (Model-View-Controller) framework developed by 
Google. It gives developers a highly structured approach to develop rich browser-based 
applications which leads to very high productivity. 
AngularJS is one of the best platform that enable developers to build structured web applications 
that are robust and easily to understand. This framework is based on various components and if 
you are not friendly with this framework then this is the right resource for you. 
If you are using AngularJS, or considering it, this eBook provides easy to follow recipes for 
issues you are likely to face. Each recipe solves a specific problem and provides a solution and in-
depth discussion of it. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
An Introduction to AngularJS 
AngularJS is a JavaScript structural framework for dynamic web apps. It can be used in a HTML 
page with a <script> tag. AngularJS extends HTML attributes with Directives and binds data to 
HTML with Expressions. 
 
To use AngularJS you need to add the following reference to your application. 
1. <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 
 
When we read about AngularJS we hear many times that AngularJS extends HTML. It uses ng-
directives to extend HTML. 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html 
4. 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"></s
cript> 
8. </head> 
9. <body> 
10. <form id="form1" runat="server"> 
11. <div ng-app=""> 
12. <p>Enter Your Name: 
13. <input type="text" ng-model="Name"> 
14. </p> 
15. <p ng-bind="Name"></p> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
16. </div> 
17. </form> 
18. </body> 
19. </html> 
 
 
1. Here ng-app declares that the application will run under the AngularJS framework. 
2. The ng-model directive binds the value of the input field to the application variable name. 
3. The ng-bind directive binds the innerHTML of the <p> element to the application variable 
name. 
 
ng-init directive for initializing AngularJS 
application variables 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html 
4. 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"></s
cript> 
8. </head> 
9. <body> 
10. <form id="form1" runat="server"> 
11. <div ng-app=""> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
12. <div ng-app="" ng-init="Name='Priyanka Mathur'"> 
13. <p>Your Name is: 
14. <span ng-bind="Name"></span> 
15. </p> 
16. </div> 
17. </div> 
18. </form> 
19. </body> 
20. </html> 
 
 
 
 
 
AngularJS Expressions Double braces 
{{ expression }} is used to write AngularJS expressions. 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html 
4. 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"></s
cript> 
8. </head> 
9. <body> 
10. <form id="form1" runat="server"> 
11. <div ng-app=""> 
12. <p>Expression In AngularJS: {{ 10 + 10 }}</p> 
13. </div> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
14. </form> 
15. </body> 
16. </html> 
 
 
 
 
AngularJS Applications with AngularJS 
Architecture 
1. AngularJS modules define AngularJS applications. 
2. AngularJS controllers control AngularJS applications. 
3. The ng-app directive defines the application; the ng-controller directive defines the 
controller. 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html 
4. 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('myCtrl', function ($scope) { 
11. $scope.Name = "Rahul Saxena"; 
12. $scope.Email = "rahulsaxena@live.com"; 
13. $scope.Address = "Noida, India"; 
14. }); 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
15. </script> 
16. </head> 
17. <body> 
18. <form id="form1" runat="server"> 
19. <div ng-app="myApp" ng-controller="myCtrl"> 
20. Name:<input type="text" ng-model="Name"> 
21. <br><br> 
22. Email:<input type="text" ng-model="Email"> 
23. <br><br> 
24. Address:<input type="text" ng-model="Address"> 
25. <br><br> 
26. <b> Employee Information:</b> {{Name + " " + Email + " " +Address}} 
27. </div> 
28. </form> 
29. </body> 
30. </html> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
Use Number in AngularJS 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html 
4. 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"></s
cript> 
8. </head> 
9. <body> 
10. <form id="form1" runat="server"> 
11. <div ng-app="" ng-init="Product=5;Cost=20"> 
12. <p> 
13. <b>Total Cost Of your Order:</b> {{ Product * Cost }} 
14. </p> 
15. </div> 
16. </form> 
17. </body> 
18. </html> 
 
 
When initializing and using take care of case because AngularJS is case sensitive. 
 
 
 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
 
Using Object in AngularJS 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html 
4. 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"></s
cript> 
8. </head> 
9. <body> 
10. <form id="form1" runat="server"> 
11. <div ng-app="" ng-init="employee={Name:'Rahul Saxena',City:'Noida'}"> 
12. <p> 
13. <b>Employee Information</b> {{ employee.Name + " -
 " + employee.City}} 
14. </p> 
15. </div> 
16. </form> 
17. </body> 
18. </html> 
 
 
 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
 
 
 
Arrays in AngularJS 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html 
4. 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"></s
cript> 
8. </head> 
9. <body> 
10. <form id="form1" runat="server"> 
11. <div ng-app="" ng-
init="Employee=['Priya Mathur','Rahul Saxena','Sara Sinha']"> 
12. <p>Employee at position 0: {{ Employee[0] }}</p> 
13. <p>Employee at position 1: {{ Employee[1] }}</p> 
14. <p>Employee at position 2: {{ Employee[2] }}</p> 
15. </div> 
16. </form> 
17. </body> 
18. </html> 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
Perform Data Binding in AngularJS 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html 
4. 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"></s
cript> 
8. </head> 
9. <body> 
10. <form id="form1" runat="server"> 
11. <div ng-app="" ng-init="product=1;cost=5"> 
12. Product Quantity:<input type="number" ng-model="product"> 
13. <br /> 
14. <br /> 
15. Product Cost:<input type="number" ng-model="cost"> 
16. <br /> 
17. <br /> 
18. Total Cost: {{ product * cost }} 
19. </div> 
20. </form> 
21. </body> 
22. </html> 
 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
 
Repeat in AngularJS 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html 
4. 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"></s
cript> 
8. </head> 
9. <body> 
10. <form id="form1" runat="server"> 
11. <div ng-app="" ng-init="Employees=['Rahul','Shiva','Ram','Poonam']"> 
12. <ul> 
13. <li ng-repeat="x in Employees">{{ x }}</li> 
14. </ul> 
15. </div> 
16. </form> 
17. </body> 
18. </html> 
 
 
 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
Controller with Method in AngularJS 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html 
4. 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"></s
cript> 
8. <script> 
9. var app = angular.module('myApp', []); 
10. app.controller('personCtrl', function ($scope) { 
11. $scope.Name = "Rahul Saxena"; 
12. $scope.Email = "rahulsaxedna@live.com"; 
13. $scope.Address = "Noida"; 
14. $scope.EMP_Info = function () { 
15. return $scope.Name + " " + $scope.Email + " " + $scope.Address; 
16. } 
17. }); 
18. </script> 
19. </head> 
20. <body> 
21. <form id="form1" runat="server"> 
22. <div ng-app="myApp" ng-controller="personCtrl"> 
23. Name:<input type="text" ng-model="Name"> 
24. <br> 
25. <br /> 
26. Email:<input type="text" ng-model="Email"> 
27. <br> 
28. <br> 
29. Address:<input type="text" ng-model="Address"> 
30. <br> 
31. <br> 
32. <b>Employee Information :</b> {{EMP_Info()}} 
33. </div> 
34. </form> 
35. </body> 
36. </html> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
 
 
 
Making Controller inExternal File 
Make a new JavaScript file named employeeController.js with the following code: 
1. angular.module('myApp', []).controller('employeeCtrl', function ($scope) 
2. { 
3. $scope.name = "Rahul Saxena", 
4. $scope.City = "Noida", 
5. $scope.Country = "India", 
6. $scope.empInfo = function () 
7. { 
8. return $scope.name + " " + $scope.City + " " + $scope.Country; 
9. } 
10. }); 
11. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
12. <!DOCTYPE html> 
13. <html 
14. xmlns="http://www.w3.org/1999/xhtml"> 
15. <head runat="server"> 
16. <title></title> 
17. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></s
cript> 
18. <script src="employeeController.js"></script> 
19. </head> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
20. <body> 
21. <form id="form1" runat="server"> 
22. <div ng-app="myApp" ng-controller="employeeCtrl"> 
23. Name:<input type="text" ng-model="name"> 
24. <br> 
25. <br> 
26. City:<input type="text" ng-model="City"> 
27. <br> 
28. <br> 
29. Country:<input type="text" ng-model="Country"> 
30. <br> 
31. <br> 
32. <b>Employee Information </b>: {{empInfo()}} 
33. </div> 
34. </form> 
35. </body> 
36. </html> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
External Controller File using repeat 
Add a new JavaScript file named employeeController.js with the following code: 
1. angular.module('myApp', []).controller('employeeCtrl', function ($scope) 
2. { 
3. $scope.Emp_Names = [ 
4. { name: 'Rahul Saxena', country: 'India' }, 
5. { name: 'Shambhu Sharma', country: 'USA' }, 
6. { name: 'Abhishek Nigam', country: 'USA' }, 
7. { name: 'Yogesh Gupta', country: 'USA' }, 
8. { name: 'Rakesh Dixit', country: 'India' }, 
9. { name: 'Manu Khanna', country: 'India' }, 
10. { name: 'Saurabh Mehrotra', country: 'USA' }, 
11. { name: 'mayank Dhulekar', country: 'India' } 
12. ]; 
13. }); 
14. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
15. <!DOCTYPE html> 
16. <html 
17. xmlns="http://www.w3.org/1999/xhtml"> 
18. <head runat="server"> 
19. <title></title> 
20. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></s
cript> 
21. <script src="employeeController.js"></script> 
22. </head> 
23. <body> 
24. <form id="form1" runat="server"> 
25. <div ng-app="myApp" ng-controller="employeeCtrl"> 
26. <ul> 
27. <li ng-repeat="x in Emp_Names">{{ x.name + ', ' + x.country }} 
28. </li> 
29. </ul> 
30. </div> 
31. </form> 
32. </body> 
33. </html> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
 
Filters in AngularJS 
In AngularJS we have the following filters: 
 Currency. 
 Filter. 
 Lowercase. 
 orderBy. 
 Uppercase. 
Now we will see examples of all the filters. 
 
Currency Filter 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html 
4. 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"></s
cript> 
8. </head> 
9. <body> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
10. <form id="form1" runat="server"> 
11. <div ng-app="" ng-init="Product=5;Cost=20"> 
12. <p> 
13. <b>Total Cost Of your Order:</b> {{ Product * Cost | currency }} 
14. </p> 
15. <p> 
16. <b>Total Cost Of your Order:</b> {{ Product * Cost | currency:"€" }} 
17. </p> 
18. <p> 
19. <b>Total Cost Of your Order:</b> {{ Product * Cost | currency:"₹" }} 
20. </p> 
21. </div> 
22. </form> 
23. </body> 
24. </html> 
Here by default US currency come but you can format currency symbol: 
 
 
 
orderBy Filter 
 
My external Controller file: 
1. angular.module('myApp', []).controller('employeeCtrl', function ($scope) 
2. { 
3. $scope.Emp_Names = [ 
4. { name: 'Rahul Saxena', country: 'India' }, 
5. { name: 'Shambhu Sharma', country: 'USA' }, 
6. { name: 'Abhishek Nigam', country: 'USA' }, 
7. { name: 'Yogesh Gupta', country: 'USA' }, 
8. { name: 'Rakesh Dixit', country: 'India' }, 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
9. { name: 'Manu Khanna', country: 'India' }, 
10. { name: 'Saurabh Mehrotra', country: 'USA' }, 
11. { name: 'mayank Dhulekar', country: 'India' }]; 
12. }); 
13. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
14. <!DOCTYPE html> 
15. <html 
16. xmlns="http://www.w3.org/1999/xhtml"> 
17. <head runat="server"> 
18. <title></title> 
19. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></s
cript> 
20. <script src="employeeController.js"></script> 
21. </head> 
22. <body> 
23. <form id="form1" runat="server"> 
24. <div ng-app="myApp" ng-controller="employeeCtrl"> 
25. <ul> 
26. <li ng-
repeat="x in Emp_Names | orderBy:'country'">{{ x.name + ', ' + x.country }}</li> 
27. </ul> 
28. </div> 
29. </form> 
30. </body> 
31. </html> 
 
 
Filter by Taking User input 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
My external Controller file: 
1. angular.module('myApp', []).controller('employeeCtrl', function ($scope) 
2. { 
3. $scope.Emp_Names = [ 
4. { name: 'Rahul Saxena', country: 'India' }, 
5. { name: 'Shambhu Sharma', country: 'USA' }, 
6. { name: 'Abhishek Nigam', country: 'USA' }, 
7. { name: 'Yogesh Gupta', country: 'USA' }, 
8. { name: 'Rakesh Dixit', country: 'India' }, 
9. { name: 'Manu Khanna', country: 'India' }, 
10. { name: 'Saurabh Mehrotra', country: 'USA' }, 
11. { name: 'mayank Dhulekar', country: 'India' } 
12. ]; 
13. }); 
14. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
15. <!DOCTYPE html> 
16. <html 
17. xmlns="http://www.w3.org/1999/xhtml"> 
18. <head runat="server"> 
19. <title></title> 
20. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></s
cript> 
21. <script src="employeeController.js"></script> 
22. </head> 
23. <body> 
24. <form id="form1" runat="server"> 
25. <div ng-app="myApp" ng-controller="employeeCtrl"> 
26. <p>Enter Text To Search:<input type="text" ng-model="textToSearch"></p> 
27.<ul> 
28. <li ng-
repeat="x in Emp_Names | filter:textToSearch | orderBy:'country'"> {{ (x.name | uppercas
e) + ', ' + x.country }} </li> 
29. </ul> 
30. </div> 
31. </form> 
32. </body> 
33. </html> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
 
 
 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
Showing Data in a Table after reading 
from Controller external File 
The following is my external Controller file. 
1. ngular.module('myApp', []).controller('employeeCtrl', function ($scope) { 
2. $scope.Emp_Names = [ 
3. { name: 'Rahul Saxena', country: 'India' }, 
4. { name: 'Shambhu Sharma', country: 'USA' }, 
5. { name: 'Abhishek Nigam', country: 'USA' }, 
6. { name: 'Yogesh Gupta', country: 'USA' }, 
7. { name: 'Rakesh Dixit', country: 'India' }, 
8. { name: 'Manu Khanna', country: 'India' }, 
9. { name: 'Saurabh Mehrotra', country: 'USA' }, 
10. { name: 'mayank Dhulekar', country: 'India' } 
11. ]; 
12. }); 
13. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
14. <!DOCTYPE html> 
15. <html xmlns="http://www.w3.org/1999/xhtml"> 
16. <head runat="server"> 
17. <title></title> 
18. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></scr
ipt> 
19. <script src="employeeController.js"></script> 
20. </head> 
21. <body> 
22. <form id="form1" runat="server"> 
23. <div ng-app="myApp" ng-controller="employeeCtrl"> 
24. <table style="border:1px solid;" border="1"> 
25. <tr ng-repeat="x in Emp_Names"> 
26. <td style="width:200px;">{{ x.name }}</td> 
27. <td style="width:200px;">{{ x.country }}</td> 
28. </tr> 
29. </table> 
30. </div> 
31. </form> 
32. </body> 
33. </html> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
 
 
 
 
Showing Record from External Controller 
File in a Table with CSS style sheet 
The following is my external Controller file. 
1. angular.module('myApp', []).controller('employeeCtrl', 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. }); 
16. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
17. 
18. <!DOCTYPE html> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
19. <html xmlns="http://www.w3.org/1999/xhtml"> 
20. <head runat="server"> 
21. <title></title> 
22. <style> 
23. table, th, td { 
24. border: 1px solid grey; 
25. border-collapse: collapse; 
26. padding: 5px; 
27. } 
28. table tr:nth-child(odd) { 
29. background-color: red; 
30. color:yellow; 
31. font-family:Verdana; 
32. } 
33. table tr:nth-child(even) { 
34. background-color: blue; 
35. color:white; 
36. font-family:Arial; 
37. } 
38. </style> 
39. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></scri
pt> 
40. <script src="employeeController.js"></script> 
41. </head> 
42. <body> 
43. <form id="form1" runat="server"> 
44. <div ng-app="myApp" ng-controller="employeeCtrl"> 
45. <table style="border: 1px solid;" border="1"> 
46. <tr ng-repeat="x in Emp_Names"> 
47. <td style="width: 200px;">{{ x.name }}</td> 
48. <td style="width: 200px;">{{ x.country }}</td> 
49. </tr> 
50. </table> 
51. </div> 
52. </form> 
53. </body> 
54. </html> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
 
 
 
Showing Records in a Table with Index 
Value 
The following is my external Controller file. 
1. angular.module('myApp', []).controller('employeeCtrl', 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. }); 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
16. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
17. 
18. <!DOCTYPE html> 
19. <html xmlns="http://www.w3.org/1999/xhtml"> 
20. <head runat="server"> 
21. <title></title> 
22. <style> 
23. table, th, td { 
24. border: 1px solid grey; 
25. border-collapse: collapse; 
26. padding: 5px; 
27. } 
28. table tr:nth-child(odd) { 
29. background-color: red; 
30. color: yellow; 
31. font-family: Verdana; 
32. } 
33. table tr:nth-child(even) { 
34. background-color: blue; 
35. color: white; 
36. font-family: Arial; 
37. } 
38. </style> 
39. 
40. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></scr
ipt> 
41. <script src="employeeController.js"></script> 
42. </head> 
43. <body> 
44. <form id="form1" runat="server"> 
45. <div ng-app="myApp" ng-controller="employeeCtrl"> 
46. <table style="border: 1px solid;" border="1"> 
47. <tr ng-repeat="x in Emp_Names"> 
48. <td>{{ $index + 1 }}</td> 
49. <td style="width: 180px;">{{ x.name }}</td> 
50. <td style="width: 180px;">{{ x.country }}</td> 
51. </tr> 
52. </table> 
53. </div> 
54. </form> 
55. </body> 
56. </html> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
 
 
 
 
Using if condition in AngularJS with Even 
and Odd in a Table 
The following is my external Controller file. 
1. ngular.module('myApp', []).controller('employeeCtrl', 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' }, 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
11. { name: 'Saurabh Mehrotra', country: 'USA' }, 
12. { name: 'Mayank Dhulekar', country: 'USA' }, 
13. { name: 'Akhilesh Atwal', country: 'India' } 
14. ]; 
15. }); 
16. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
17. 
18. <!DOCTYPE html> 
19. <html xmlns="http://www.w3.org/1999/xhtml"> 
20. <head runat="server"> 
21. <title></title> 
22. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></scr
ipt> 
23. <script src="employeeController.js"></script> 
24. </head> 
25. <body> 
26. <form id="form1" runat="server"> 
27. <div ng-app="myApp" ng-controller="employeeCtrl"> 
28. <table style="border: 1px solid;" border="1"> 
29. <tr ng-repeat="x in Emp_Names"> 
30. <td ng-if="$odd" style="background-
color: #1E90FF; width: 190px;">{{ x.name }}</td> 
31. <td ng-if="$even" style="background-
color: #FF00FF; width: 190px;">{{ x.name }}</td> 
32. <td ng-if="$odd" style="background-
color: #FF4500; width: 190px;">{{ x.country }}</td> 
33. <td ng-if="$even" style="background-
color: #9ACD32; width: 190px;">{{ x.country }}</td> 
34. </tr> 
35. </table> 
36. </div> 
37. </form> 
38. </body> 
39. </html> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
 
Make disable button on CheckBox Click 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head runat="server"> 
5. <title></title> 
6. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></scr
ipt> 
7. </head> 
8. <body> 
9. <form id="form1" runat="server"> 
10. <div ng-app=""> 
11. <p> 
12. <button ng-disabled="mySwitchClick">Submit</button> 
13. </p> 
14. <p> 
15. <input type="checkbox" ng-
model="mySwitchClick">Make Button Enable/Disable 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
16. </p> 
17. </div> 
18. </form> 
19. </body> 
20. </html> 
 
 
 
 
 
ng-show Directive 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="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"></scr
ipt> 
8. <script src="employeeController.js"></script> 
9. </head> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
10. <body> 
11. <form id="form1" runat="server"> 
12. <div ng-app=""> 
13. <p ng-show="true">I Can Show</p> 
14. <p ng-show="false">Oops.. I am hide.</p> 
15. <p ng-hide="true">Not Visible.</p> 
16. <p ng-hide="false">I am Visible.</p> 
17. </div> 
18. </form> 
19. </body> 
20. </html> 
 
 
 
 
Button and click event in AngularJS 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head runat="server"> 
5. <title></title> 
6. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></scr
ipt> 
7. <script> 
8. var app = angular.module('myApp', []); 
9. app.controller('myCtrl', function ($scope) { 
10. $scope.count = 0; 
11. }); 
12. </script> 
13. </head> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
14. <body> 
15. <div ng-app="myApp" ng-controller="myCtrl"> 
16. <button ng-click="count = count + 1">Count Me!</button> 
17. <p>Your Total Count: {{ count }}</p> 
18. </div> 
19. </body> 
20. </html> 
 
 
 
 
 
Another Example of Button Click in 
AngularJS 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="AngularJS_Demo.Default" %> 
2. <!DOCTYPE html> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head runat="server"> 
5. <title></title> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
6. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></scr
ipt> 
7. <script> 
8. var app = angular.module('myApp', []); 
9. app.controller('empCtrl', function ($scope) { 
10. $scope.Name = "Rahul Saxena", 
11. $scope.address = "Noida, India" 
12. $scope.myVar = false; 
13. 
14. $scope.GetAllInfo = function () { 
15. $scope.FullName = $scope.Name + " " + $scope.address; 
16. } 
17. }); 
18. </script> 
19. 
20. </head> 
21. <body> 
22. <div ng-app="myApp" ng-controller="empCtrl"> 
23. <p> 
24. Name: 
25. <input type="text" ng-model="Name"><br /> 
26. <br /> 
27. Address: 
28. <input type="text" ng-model="address"><br /> 
29. <br> 
30. <button ng-click="GetAllInfo()">Get Info</button> 
31. <br /> 
32. <br /> 
33. Employee Information : {{FullName}} 
34. </p> 
35. </div> 
36. </body> 
37. </html> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
Show Hide on button Click in AngularJS 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="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"></scr
ipt> 
8. <script> 
9. var app = angular.module('myApp', []); 
10. app.controller('empCtrl', function ($scope) { 
11. $scope.Name = "Rahul Saxena", 
12. $scope.address = "Noida, India" 
13. $scope.myVar = true; 
14. $scope.toggle = function () { 
15. $scope.myVar = !$scope.myVar; 
16. } 
17. }); 
18. </script> 
19. 
20. </head> 
21. <body> 
22. <div ng-app="myApp" ng-controller="empCtrl"> 
23. <p ng-show="myVar"> 
24. Name: 
25. <input type="text" ng-model="Name"><br /> 
26. <br /> 
27. Address: 
28. <input type="text" ng-model="address"><br/> 
29. </p> 
30. <p> 
31. <button ng-click="toggle()">Toggle</button> 
32. </p> 
33. </div> 
34. 
35. </body> 
36. </html> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
 
 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
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" Inh
erits="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"></scr
ipt> 
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' }, 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
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", []); 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
Making a Registration form with input 
text and button 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="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"></scr
ipt> 
8. <script> 
9. var app = angular.module('myApp', []); 
10. app.controller('formCtrl', function ($scope) { 
11. $scope.master = { Name: "Rahul Saxena", Email: "rahulsaxena@live.com", Passw
ord: "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> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
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> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
77. </div> 
78. </body> 
79. </html> 
 
 
 
 
 
 
 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
Creating a Registration form with 
Validation 
1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inh
erits="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"></scr
ipt> 
8. 
9. <script> 
10. var app = angular.module('myApp', []); 
11. app.controller('validateCtrl', function ($scope) { 
12. $scope.user = 'Rahul Saxena'; 
13. $scope.email = 'rahulsaxena@live.com'; 
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"> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
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> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
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> 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
107. </table> 
108. </form> 
109. </body> 
110. </html> 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
 
 
 
 
 
 
©2015 C# CORNER. 
SHARE THIS DOCUMENT AS IT IS. PLEASE DO NOT REPRODUCE, REPUBLISH, CHANGE OR COPY. 
 
 
 
Summary 
AngularJS is a JavaScript library framework that provides a very structured method for creating 
websites and web applications. AngularJS structures a web application into a very clean MVC-
styled approach. AngularJS scopes provide contextual binding to the data model for the 
application and are made up of basic JavaScript objects. 
With the help of this eBook we came to know some of the recipes of the AngularJS which can be 
faced during the development phase of the developer. Each recipe solves a specific problem 
phased by the developer by providing a solution and in-depth discussion of it.