AngularJS Recipes - c-sharpcorner.com€¦ · His main technical skills include SharePoint ... ASP.NET, SQL Server, Ajax, jQuery, MVC4, MVC5, WCF, WPF, SSRS ... The ng-bind directive

©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.


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.


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.


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.


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.


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



2. <!DOCTYPE html>

3. <html



6. <title></title>


cript>

8. </head>

9. <body>


11. <div ng-app="">

©2015 C# CORNER.


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.



2. <!DOCTYPE html>

3. <html



6. <title></title>


cript>

8. </head>

9. <body>


11. <div ng-app="">

12. <p>Expression In AngularJS: {{ 10 + 10 }}</p>

13. </div>

©2015 C# CORNER.


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.



2. <!DOCTYPE html>

3. <html



6. <title></title>


cript>

8. <script>

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

10. app.controller('myCtrl', function ($scope) {

11. $scope.Name = "Rahul Saxena";

12. $scope.Email = "[email protected]";

13. $scope.Address = "Noida, India";

14. });

©2015 C# CORNER.


15. </script>

16. </head>

17. <body>


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.


Use Number in AngularJS



2. <!DOCTYPE html>

3. <html



6. <title></title>


cript>

8. </head>

9. <body>


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.


Using Object in AngularJS



2. <!DOCTYPE html>

3. <html



6. <title></title>


cript>

8. </head>

9. <body>


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.


Arrays in AngularJS



2. <!DOCTYPE html>

3. <html



6. <title></title>


cript>

8. </head>

9. <body>


11. <div ng-app="" ng-

init="Employee=['Priya Mathur','Rahul Saxena','Sara Sinha']">

12. <p>Employee at position 0: {{ Employee[0] }}</p>



15. </div>

16. </form>

17. </body>

18. </html>

©2015 C# CORNER.


Perform Data Binding in AngularJS



2. <!DOCTYPE html>

3. <html



6. <title></title>


cript>

8. </head>

9. <body>


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.


Repeat in AngularJS



2. <!DOCTYPE html>

3. <html



6. <title></title>


cript>

8. </head>

9. <body>


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.


Controller with Method in AngularJS



2. <!DOCTYPE html>

3. <html



6. <title></title>


cript>

8. <script>


10. app.controller('personCtrl', function ($scope) {

11. $scope.Name = "Rahul Saxena";

12. $scope.Email = "[email protected]";

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>


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.


Making Controller in External 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. });



12. <!DOCTYPE html>

13. <html



16. <title></title>


cript>

18. <script src="employeeController.js"></script>

19. </head>

©2015 C# CORNER.


20. <body>


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.


External Controller File using repeat

Add a new JavaScript file named employeeController.js with the following code:


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. });



15. <!DOCTYPE html>

16. <html



19. <title></title>


cript>


22. </head>

23. <body>



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.


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



2. <!DOCTYPE html>

3. <html



6. <title></title>


cript>

8. </head>

9. <body>

©2015 C# CORNER.



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:


2. {







©2015 C# CORNER.




11. { name: 'mayank Dhulekar', country: 'India' }];

12. });



14. <!DOCTYPE html>

15. <html



18. <title></title>


cript>


21. </head>

22. <body>



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.


My external Controller file:


2. {










12. ]; 13. });



15. <!DOCTYPE html>

16. <html



19. <title></title>


cript>


22. </head>

23. <body>



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.


©2015 C# CORNER.


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) {










11. ]; 12. });



14. <!DOCTYPE html>

15. <html xmlns="http://www.w3.org/1999/xhtml">


17. <title></title>

18. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></scr

ipt>


20. </head>

21. <body>



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.


Showing Record from External Controller File in a Table with CSS style sheet


1. angular.module('myApp', []).controller('employeeCtrl', function ($scope) {





6. { name: 'Shraddha Gaur', country: 'India' },

7. { name: 'Shweta Kashyap', country: 'India' },





12. { name: 'Mayank Dhulekar', country: 'USA' },

13. { name: 'Akhilesh Atwal', country: 'India' }

14. ]; 15. });



17. 18. <!DOCTYPE html>

©2015 C# CORNER.




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>


41. </head>

42. <body>



45. <table style="border: 1px solid;" border="1">


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.


Showing Records in a Table with Index Value


1. angular.module('myApp', []).controller('employeeCtrl', function ($scope) {













14. ]; 15. });

©2015 C# CORNER.







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>


42. </head>

43. <body>





48. <td>{{ $index + 1 }}</td>



51. </tr>

52. </table>

53. </div>

54. </form>

55. </body>

56. </html>

©2015 C# CORNER.


Using if condition in AngularJS with Even and Odd in a Table


1. ngular.module('myApp', []).controller('employeeCtrl', function ($scope) {










©2015 C# CORNER.





14. ]; 15. });






21. <title></title>


ipt>


24. </head>

25. <body>





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.


Make disable button on CheckBox Click



2. <!DOCTYPE html>



5. <title></title>


ipt>

7. </head>

8. <body>


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.


16. </p>

17. </div>

18. </form>

19. </body>

20. </html>

ng-show Directive



2.

3. <!DOCTYPE html>



6. <title></title>


ipt>


9. </head>

©2015 C# CORNER.


10. <body>


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



2. <!DOCTYPE html>



5. <title></title>


ipt>

7. <script>


9. app.controller('myCtrl', function ($scope) {

10. $scope.count = 0;

11. });

12. </script>

13. </head>

©2015 C# CORNER.


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



2. <!DOCTYPE html>



5. <title></title>

©2015 C# CORNER.



ipt>

7. <script>


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.


©2015 C# CORNER.


Show Hide on button Click in AngularJS



2.

3. <!DOCTYPE html>



6. <title></title>


ipt>

8. <script>


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.


©2015 C# CORNER.


Modules in AngularJS

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



2.

3. <!DOCTYPE html>



6. <title></title>


ipt>

8. <script src="myApp.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">




18. </tr>

19. </table>

20. </div>

21. </body>

22. </html>

employeeController.js

1. app.controller("employeeController", function ($scope) {









©2015 C# CORNER.






14. ]; 15. });

myApp.js

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

©2015 C# CORNER.


Making a Registration form with input text and button



2.

3. <!DOCTYPE html>



6. <title></title>


ipt>

8. <script>


10. app.controller('formCtrl', function ($scope) {

11. $scope.master = { Name: "Rahul Saxena", Email: "[email protected]", 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.


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.


77. </div>

78. </body>

79. </html>

©2015 C# CORNER.


Creating a Registration form with Validation



2.

3. <!DOCTYPE html>



6. <title></title>


ipt>

8.

9. <script>


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">

©2015 C# CORNER.


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>


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>


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>


show="myForm.city.$dirty && myForm.city.$invalid">

67. <span ng-show="myForm.city.$error.required">City is required.</span>

68. </span>

©2015 C# CORNER.


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>


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>


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.


107. </table>

108. </form>

109. </body>

110. </html>

©2015 C# CORNER.


©2015 C# CORNER.


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.

Documents

AngularJS Recipes - c-sharpcorner.com€¦ · His main technical skills include SharePoint ... ASP.NET, SQL Server, Ajax, jQuery, MVC4, MVC5, WCF, WPF, SSRS ... The ng-bind directive