In this part of my AngularJS tutorial I’m going to cover Form Validation, Using $rootScope to share data between controllers, Controller Inheritance, Filters, Custom Filters and a whole lot more.

If you haven’t watched part 1 of my AngularJS tutorial definitely watch it or you’ll be very confused. All of the code covered in this tutorial follows the video down below to act as a transcript and cheat sheet for AngularJS.

If you like videos like this consider supporting me on Patreon where I’m offering exclusive videos for anyone that contributes $1.

Code From the Video

angulartut5.html

angulartut5.html

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

<!doctype html>

<html ng-app="app5"ng-cloak>

<head>

<title>AngularJS Tutorial 5</title>

<style>

[ng\:cloak], [ng-cloak], .ng-cloak {

display:none;

}

table{

width:400px;

text-align:left;

border:2pxsolidblack;

padding:10px;

}

input.ng-dirty.ng-invalid {

border-color:red;

}

</style>

</head>

<body>

<div id="groceryList"ng-controller="gListCtrl">

<h3>Grocery List</h3>

<table>

<thead>

<tr>

<th>Item</th>

<th>Purchased</th>

<tr>

</thead>

<tr ng-repeat="grocery in groceries">

<td>{{grocery.item}}</td>

<td>

<!-- Bind the checkbox to the data model -->

<input type="checkbox"ng-model="grocery.purchased" />

</td>

</tr>

</table>

<br>

<!-- User enters a new item and when the button is clicked

the value in the input box is added to the array -->

<label>New Item :

<input type="text"ng-model="newItem" />

</label>

<button ng-click="addItem(newItem)">Add Item</button>

<!-- Error shows here if no item was entered -->

<h4>{{missingNewItemError}}</h4>

</div><!-- End of groceryList -->

<div ng-controller="userCtrl">

<!-- Pass the user data to saveUser() -->

<form name="userForm"ng-submit="saveUser(userInfo)">

<label>First Name:</label>

<!-- Define that a value is required and it must be 2 characters in length or more -->

<input type="text"name="fName"ng-model="userInfo.fName"

ng-required="true"ng-minlength="2" />

<!-- $dirty is set to true if a user interacts with a element and then we check if the elements required field is true -->

<span class="error-message"ng-show="userForm.fName.$dirty

&& userForm.fName.$error.required">Must Enter a First Name

</span>

<!-- Check if the element has been edited and whether it contains at least 2 characters -->

<span class="error-message"ng-show="userForm.fName.$dirty

&& userForm.fName.$error.minlength">Must be a Minimum of 2 Characters</span>

<br><br>

<label>Last Name:</label>

<input type="text"name="lName"ng-model="userInfo.lName"

ng-required="true"ng-minlength="2" />

<span class="error-message"ng-show="userForm.lName.$dirty

&& userForm.lName.$error.required">Must Enter a Last Name

</span>

<span class="error-message"ng-show="userForm.lName.$dirty

&& userForm.lName.$error.minlength">Must be a Minimum of 2 Characters</span>