Creating and Testing Custom Filters in AngularJs

For creating controller and custom filters in Angular applications follow the below steps,

Create a Student controller as StudentController.js. Add the following code to it to create a new module,
1. var app = angular.module('app', []);
Now create a controller in controller file and create AvgMarks function. Add the following code in Student controller,
1. app.controller('studentController', function($scope)
2. {
4. $scope.helloAngular = 'I Learn';
6. $scope.FirstName = 'Deepak';
8. $scope.LastName = 'Upreti';
10. $scope.studentdata = [
12. {
13. Name: 'Deepak Upreti',
14. Id: 1,
15. Sub1Marks: 80,
16. Sub2Marks: 50,
17. Sub3Marks: 40
18. },
20. {
21. Name: 'Manu',
22. Id: 2,
23. Sub1Marks: 80,
24. Sub2Marks: 70,
25. Sub3Marks: 60
26. }
28. ];
30. $scope.AvgMarks = function(sub1, sub2, sub3) {
32. var total = sub1 + sub2 + sub3;
34. return (total / 3);
36. };
38. });
Now create a custom Filter as nameReverse for reversing the name. Also if you want you can create a separate JS file for the filter's logical separation. Add the following code,
1. app.filter("nameReverse", function()
2. {
4. return function(name)
5. {
7. return name.split("").reverse().join("");
9. };
11. });
Now insert the following code to your view, in this case, Index.cshtml file,
1. <!DOCTYPE html>
3. <html ng-app="app">
5. <head>
7. <title> Angular Page</title>
9. </head>
11. <body>
13. <div ng-controller="studentController">
15. {{helloAngular}}
17. </div>
19. <div ng-controller="studentController">
21. Full Name: {{FirstName + " " + LastName}}
23. </div>
25. <br/><br/><br/>
28. <div class="table-responsive">
30. <table border="1" style="width:800px" ng-controller="studentController">
33. <tr>
35. <td><b>Name</b></td>
37. <td><b>ReverseName</b></td>
39. <td><b>Id</b></td>
41. <td><b>Sub1Marks</b></td>
43. <td><b>Sub2Marks</b></td>
45. <td><b>Sub3Marks</b></td>
47. <td><b>AverageMarks</b></td>
49. </tr>
51. <tr ng-repeat="s in studentdata">
53. <td>{{s.Name}}</td>
55. <td>{{s.Name | nameReverse}}</td>
57. <td>{{s.Id}} </td>
59. <td>{{s.Sub1Marks}} </td>
61. <td>{{s.Sub2Marks}} </td>
63. <td>{{s.Sub3Marks}} </td>
65. <td>{{AvgMarks(s.Sub1Marks,s.Sub2Marks,s.Sub3Marks)}} </td>
67. </tr>
69. </table>
71. </div>
73. <script src="../../Scripts/angular.min.js"></script>
75. <script src="../../Scripts/Controller/StudentController.js"></script>
77. </body>
79. </html>
Run the application and you will get the following output,
Now test the controller and new custom filter we created (“nameReverse”)

For how to create a testing environment for AngularJs and how to test controllers please refer to my previous blog,

1. Unit Testing an AngularJS Application

Create a folder as a Unit Test. And add a JavaScript file as appfilterTest. Add the following code to it,
1. /// <reference path="../Scripts/angular.js" />
2. /// <reference path="../Scripts/angular-mocks.js" />
3. /// <reference path="../Scripts/Controller/StudentController.js" />
4. describe('Reverse Filter', function()
5. {
7. var reverseFilter;
9. beforeEach(module('app'));
11. var scope;
14. beforeEach(inject(function($controller, $rootScope) {
16. scope = $rootScope.$new();
18. var ctrl = $controller('studentController', {
19. $scope: scope
20. });
22. }));
25. it('AvgMarks function test', function() {
27. var result = scope.AvgMarks(4, 4, 4);
29. expect(result).toEqual(4);
31. });
34. beforeEach(inject(function(_nameReverseFilter_) {
36. reverseFilter = _nameReverseFilter_;
38. }));
40. it('testing reverse filter', function() {
42. expect(reverseFilter('deepak')).toEqual('kapeed');
44. });
46. });

Go ahead and run the test cases and you will get the result as testing reverse filter and AvgMarks function test as PASS,