Angular Js Basic Controller Return Error

Question

Angular Controller return error when called through an app. But works when written directly.

My html code

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>      
    <script type="text/javascript" src="app.js"></script>

</head>
<body ng-app="fbapp">

   <div ng-controller="fbController" class="container">

           <input type="text" name="name" ng-model="name"/>

        <input type="button" value="Fetch" ng-click="fetchUser()" class="btn btn-primary"/>
       </form>

   </div>

</body>
</html>

My js code

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

fbapp.controller('fbController', function($scope){

        $scope.fetchUser = function() {

           $scope.name = "Test";

        } 

}

Error I get

Error: [ng:areq] http://errors.angularjs.org/1.2.15/ng/areq?p0=fbController&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:6:450
    at wb (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:18:360)
    at Qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:18:447)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:65:470
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:156
    at r (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:7:386)
    at J (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:18)
    at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:28)
    at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:45)

It work for me if I don't declare container in a an app. Like...

function fbController ($scope){

        $scope.fetchUser = function() {

           $scope.name = "Test";

        } 

}

I am having no clue whats wrong.

Missing closing parenthesis (")") in fbapp.controller(... example. — Stewie
– Stewie, Commented Mar 23, 2014 at 10:00

Alex Choroshin · Accepted Answer · 2014-03-23 10:08:46Z

3

as Stewie said you need to add closing parenthesis ' )'.

Example:

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

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

        $scope.fetchUser = function() {

           $scope.name = "Test";
        } 
})

html:

<div ng-app="App"  >
<div ng-controller="fbController">
    <button ng-click="fetchUser()">click</button>
        <p >{{name}}</p>
    </div> 
</div>

Live example: http://jsfiddle.net/choroshin/7Ws6w/1/

answered Mar 23, 2014 at 10:08

Alex Choroshin

6,1872 gold badges31 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Angular Js Basic Controller Return Error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related