AngularJS: Argument 'Controller as short' is not a function, got undefined

Question

I'm having a hard time to figure out what the problem is.

Why does this code (index.html) run

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
  </head>
  <body>
    <div class="list-group-item" ng-repeat="product in store.products">
      <section ng-controller="TabController as tab">
      </section>
    </div>
  </body>
</html>

while

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
  </head>
  <body>
      <section ng-controller="TabController as tab">
      </section>
  </body>
</html>

produces a error: ´Error: Argument 'TabController as tab' is not a function, got undefined at Error (native)´

app.js:

(function() {
  var app = angular.module('gemStore', []);

  app.controller('StoreController', function() {
    this.products = gems;
  });

  app.controller("TabController", function() {
    this.tab = 1;

    this.isSet = function(checkTab) {
      return this.tab === checkTab;
    };

    this.setTab = function(setTab) {
      this.tab = setTab;
    };
  });

  var gems = [
    {
      data : 'data'
    }
  ];
})();

Thank you very much in advance!

Take a look at the availability of features in your version. — PSL, Oct 09 '14 at 00:20

score 4 · Accepted Answer · answered Oct 08 '14 at 22:02

4

Your issue is caused because you're referencing Angular 1.0.6. "Controller as" syntax is not available in Angular pre 1.2.0. If you change 1.0.6 to 1.2.0 it should work fine.

answered Oct 08 '14 at 22:02

wjohnsto

4,323
2
14
20

Thank you, the update also made this http://stackoverflow.com/questions/18481863/failed-to-instantiate-module-injectorunpr-unknown-provider-routeprovider necessary – Boern Oct 09 '14 at 08:18

AngularJS: Argument 'Controller as short' is not a function, got undefined

1 Answers1