For creating controller and custom filters in Angular applications follow the below steps,
  1. Create a Student controller as StudentController.js. Add the following code to it to create a new module,
    1. var app = angular.module('app', []);
  2. 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. });
  3. 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. });
  4. 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>
  5. Run the application and you will get the following output,
  6. Now test the controller and new custom filter we created (“nameReverse”)
  • 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,