Angular Controller Declaration

Question

I'm reading

https://www.syncfusion.com/resources/techportal/ebooks/angularjs

The third sample from the book on a basic usage fo the controller won't work for me:

JS:

function MyCtrl($scope) {
    $scope.visible = true;
    $scope.toggle = function() { $scope.visible = !$scope.visible; };
};

Html:

<html>
<head>
    <script src="scripts/vendor/angular/angular.min.js"></script>
    <script src="scripts/controllers/app.js"></script>
</head>
<body ng-app>
    <div ng-controller="MyCtrl"> <button ng-click="toggle()">Toggle</button> 
        <p ng-show="visible">Hello World!</p> 
    </div>
</body>
</html>

Error:

[ng:areq] http://errors.angularjs.org/1.3.0-rc.4/ng/areq?p0=MyCtrl&p1=not%20a%20function%2C%20got%20undefined

Angular isn't happy with the controller, wonder if I'm using it right or the book is out of date? On Angular website I saw samples of much more sophisticated controller's declaration.

Nikos Paraskevopoulos · Accepted Answer · 2014-10-02 11:48:35Z

3

From a version on (certainly on 1.3.0-x), Angular requires you to explicitly allow controllers to be declared as global functions. See the docs for the $controllerProvider.

allowGlobals();

If called, allows $controller to find controller constructors on window

So, your solution is:

angular.module("...", []).config(["$controllerProvider", function($controllerProvider) {
    $controllerProvider.allowGlobals();
}]);

The above module has to be called, so it is either your main module or your main module should depend on it.

answered Oct 2, 2014 at 11:48

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

2 Comments

User18165 Over a year ago

That was it. The books is written for the prev version of angular.

Nikos Paraskevopoulos Over a year ago

For fast-changing things like Angular, books get outdated really quickly!

sylwester · Accepted Answer · 2014-10-02 11:46:59Z

2

You missed few thing please see code snippet below

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

app.controller('MyCtrl',MyCtrl);

function MyCtrl($scope) {
    $scope.visible = true;
    $scope.toggle = function() { $scope.visible = !$scope.visible; };
};

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

<html>
<head>
    <script src="scripts/vendor/angular/angular.min.js"></script>
    <script src="scripts/controllers/app.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="MyCtrl"> <button ng-click="toggle()">Toggle</button> 
        <p ng-show="visible">Hello World!</p> 
    </div>
</body>
</html>

answered Oct 2, 2014 at 11:46

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Comments

wojjas · Accepted Answer · 2014-10-02 11:57:35Z

Glueing the controllers and the template is a bit tricky in the beginning. @sss showes how it's done. To just check that every thing else is sane you can put the script into you html page. Note, this is just for debugging and I realize this is not what you want. Just a tip for beginners:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.js"></script>
</head>
<body ng-app>

<script>
    function MyCtrl($scope) {
        $scope.visible = true;
        $scope.toggle = function() { $scope.visible = !$scope.visible; };
    };
</script>

<div ng-controller="MyCtrl"> <button ng-click="toggle()">Toggle</button>
    <p ng-show="visible">Hello World!</p>
</div>
</body>
</html>

user2601376 · Accepted Answer · 2014-10-02 12:10:32Z

1

this is the simplest example from angular docs

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

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

<html>
<head>
    <script src="scripts/vendor/angular/angular.min.js"></script>
    <script src="scripts/controllers/app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>

you missed the var myApp = angular.module('myApp',[]); and <body ng-app="myapp">, i recommend you to read carefully the angular docs.

answered Oct 2, 2014 at 12:10

user2601376

Collectives™ on Stack Overflow

Angular Controller Declaration

4 Answers 4

allowGlobals();

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

allowGlobals();

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related