Angular JS Controller Initialization Error

Question

I'm just starting out with Angular.js controller and I'm getting an error Uncaught TypeError: app.controlller is not a function when I try to initialize the angular controller.

Have a look at my snippet.

var app = app;
if (!app) {
  app = angular.module('app', []);
  console.log("created app");
};
app.controlller('languages', ['$scope',
  function($scope) {
    $scope.selected = 'None';
    $scope.js = function() {
      $scope.selected = 'JavaScript';
    };
    $scope.cpp = function() {
      $scope.cpp = 'C++';
    };
  }
]);

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

<body ng-app='app'>
  <div ng-controller='languages'>
    Select a language:
    <button ng-click='js()'>JavaScript</button>
    <button ng-click='cpp()'>C++</button>
    <p>You have selected {{ selected }}</p>
  </div>
</body>

There is one extra l in app.controlller. Should be app.controller. — Saad
– Saad, Commented May 16, 2016 at 10:19
Oh thanks for pointing that out! But the cpp() function still doesn't work. Any reason? — Harsha Bhat
– Harsha Bhat, Commented May 16, 2016 at 10:23

sumair · Accepted Answer · 2016-05-16 10:20:59Z

1

There is TYPO error in controller

app.controlller this should be app.controller

answered May 16, 2016 at 10:20

sumair

3863 silver badges8 bronze badges

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

2 Comments

Harsha Bhat Over a year ago

Thanks for pointing that out! But the cpp() function still doesn't work. Any reason?

sumair Over a year ago

you have created same name for function and model $scope.cpp = function() { $scope.cpp = 'C++'; };

Callum Linington · Accepted Answer · 2016-05-16 11:06:41Z

1

Fixed typo controlller and changed cpp() function to set $scope.selected = 'C++'.

var app = app;
if (!app) {
  app = angular.module('app', []);
  console.log("created app");
};
app.controller('languages', ['$scope',
  function($scope) {
    $scope.selected = 'None';
    $scope.js = function() {
      $scope.selected = 'JavaScript';
    };
    $scope.cpp = function() {
      $scope.selected= 'C++';
    };
  }
]);

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

<body ng-app='app'>
  <div ng-controller='languages'>
    Select a language:
    <button ng-click='js()'>JavaScript</button>
    <button ng-click='cpp()'>C++</button>
    <p>You have selected {{ selected }}</p>
  </div>
</body>

edited May 16, 2016 at 11:06

Callum Linington

14.4k14 gold badges80 silver badges156 bronze badges

answered May 16, 2016 at 10:25

Harsha Bhat

73810 silver badges25 bronze badges

1 Comment

Callum Linington Over a year ago

Just write a small snippet about what you have changed here to let other readers know.

Collectives™ on Stack Overflow

Angular JS Controller Initialization Error

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related