CODEWITHSUNDEEP
javascriptangularjs
Calgar99
Calgar99

Reputation: 1688

AngularJS Unknown Provider (filterProvider) error

The two script statements below work independently however when they are combined it causes Error: [$injector:unpr] Unknown provider: searchNameFilterProvider <- searchNameFilter Can anyone explain why this occurs?

1st segement

Find Person: <input type="text" ng-model="myName">
    <ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']">
        <li ng-repeat="person in people | filter:myName">{{ person | searchName}}</li>
    </ul>

    <script>
        var app = angular.module('myApp',[]);
        app.filter('searchName',function(){
            return function (input){
                return input + '!';
            }
        })
    </script>

2nd segement

<div ng-controller="myCtrl">
    <button ng-click="myFunc()">Hello World Button</button>
</div>

<script>

    var app = angular.module('myApp',[]);
    app.controller('myCtrl',function ($scope) {

        $scope.myFunc = function () {
           console.log('Hello world!');
        };
    });

</script>

Upvotes: 4

Views: 14954

Answers (2)

Sreekanth
Sreekanth

Reputation: 3130

There should only be a single module intialization in your code. Fixing the repeated intialization solves the problem.

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

Here is the documentation from the AngularJS docs.

"Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module"

You could read more about the modules here. AngularJS Modules

var app = angular.module('myApp', []);
app.filter('searchName', function() {
  return function(input) {
    return input + '!';
  }
});

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

  $scope.myFunc = function() {
    console.log('Hello world!');
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  Find Person:
  <input type="text" ng-model="myName">
  <ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']">
    <li ng-repeat="person in people | filter:myName">{{ person | searchName}}</li>
  </ul>

  <div ng-controller="myCtrl">
    <button ng-click="myFunc()">Hello World Button</button>
  </div>
</div>

Upvotes: 1

Graham TheOne
Graham TheOne

Reputation: 35

<div ng-app="myApp">
    <script src="Scripts/Angular.js" type="text/javascript"></script>
    Find Person:
    <input type="text" ng-model="myName">
   <ul ng-init="people = ['Diarmuid','Aine','Dave','Declan']">
        <li ng-repeat="person in people | filter:myName">{{ person | searchName}}</li>
    </ul>
   <script>
       var app = angular.module('myApp', []);
       app.filter('searchName', function () {
           return function (input) {
                return input + '!';
           };
       });
   </script>
  <div ng-controller="myCtrl">
        <button ng-click="myFunc()">
          Hello World Button</button>
   </div>
   <script>

    var app = angular.module('myApp');
    app.controller('myCtrl', function ($scope) {

        $scope.myFunc = function () {
            console.log('Hello world!');
        };
    });

</script>

Upvotes: 1

Related Questions