AngularJS: Uncaught error with controller

Question

Im new to AngularJS, and cannot figure why I can not get a response to my button click.Any help would be much appreciated. Ive looked at other examples of a controller being used but can not see where I'm going wrong.

Edited: I have two scripts which work independent however when combined cause this Error: [$injector:unpr] Unknown provider: searchNameFilterProvider <- searchNameFilter

   <html lang="en" ng-app="myApp" >
    <head>
      <meta charset="utf-8">
      <title>My AngularJS App</title>
      <link rel="stylesheet" href="css/app.css"/>
    </head>
    <body>
        <!-- In production use:
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
      -->
      <script src="lib/angular/angular.js"></script>
      <script src="lib/angular/angular-route.js"></script>
      <script src="js/app.js"></script>
      <script src="js/services.js"></script>
      <script src="js/controllers.js"></script>
      <script src="js/filters.js"></script>
      <script src="js/directives.js"></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>

You shouldn't call alert inside angular the correct is injecting $window service and then $window.alert — Dalorzo
– Dalorzo, Commented Jan 29, 2014 at 20:48
The correct way is not using alert at all. instead use console.log it's 2014! — Ilan Frumer
– Ilan Frumer, Commented Jan 29, 2014 at 20:56
I also wouldn't use $window.console.log ! that is just pointless as it's used only for debugging. The whole point of $window and other $wrappers is to make mocking easy inside tests or to add functionality, — Ilan Frumer
– Ilan Frumer, Commented Jan 29, 2014 at 21:01

davekr · Accepted Answer · 2014-01-29 20:54:04Z

2

Works ok http://jsfiddle.net/davekr/tWM2U/

Maybe it's because you have typo in your html. You missed the > in <script src="js/directives.js"></scrip

answered Jan 29, 2014 at 20:54

davekr

2,2761 gold badge27 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justin Noel · Accepted Answer · 2014-01-29 20:56:59Z

You've got your HTML and scripts all mixed up a bit.

How about using this Codepen example : http://codepen.io/calendee/pen/ysCem

<html lang="en" ng-app="myApp" >
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <link rel="stylesheet" href="css/app.css"/>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
</head>
<body>


<div ng-controller="myCtrl">
    <button ng-click="myFunc()">Hello World Button</button>
    <p>Button Clicked {{clickCounter}} times</p>
</div>

<script>

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

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

        $scope.clickCounter = 0;

        $scope.myFunc = function () {

            alert('Hello world!');
            $scope.clickCounter++;
        };
    });

</script>

</body>
</html>

Dalorzo · Accepted Answer · 2014-01-29 20:55:01Z

0

Correct me if I am wrong but I test your code in this plunker and it workd fine on my end:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="http://code.angularjs.org/1.0.7/angular.js" data-semver="1.0.7"></script>       
  </head>
<body>


<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 () {
                alert('Hello world!');
            };
        });

    </script>

answered Jan 29, 2014 at 20:55

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

1 Comment

Calgar99 Over a year ago

Your right its an error caused by other code when this script is added

Collectives™ on Stack Overflow

AngularJS: Uncaught error with controller

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related