CODEWITHSUNDEEP
javascriptangularjscontroller
Calgar99
Calgar99

Reputation: 1688

AngularJS: Uncaught error with controller

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>

Upvotes: 0

Views: 367

Answers (3)

Justin Noel
Justin Noel

Reputation: 6215

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>

Upvotes: 1

Dalorzo
Dalorzo

Reputation: 20024

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>

Upvotes: 0

davekr
davekr

Reputation: 2276

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

Upvotes: 2

Related Questions