CODEWITHSUNDEEP
javascripthtmlangularjs
Ismael Moral
Ismael Moral

Reputation: 732

Error Argument is not defined

I'm testing AngularJS and when I try to visualize this example the browser's console shows me something like this: 

Error: Argument 'mainController as mainCtrl' is not a function, got undefined
    at Error (native)
    at bb

I only have two files in my project

index.html

   <!doctype html>
<html ng-app="my-app">
  <head>
    <title>Angular controllers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- AngularJS and JQuery include.  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>

  <body>

    <div class="container">
      <form name="particleForm" ng-controller="mainController as mainCtrl" ng-submit="mainCtrl.addData()">
        {{ mainCtrl.data.email }}
        <div class="form-group">
          <label for="text" class="col-sm-2 col-sm-offset-2">E-mail</label>
        </div>

        <div class="col-sm-10">
          <input type="text" name="text" class="form-control" ng-model="mainCtrl.data.email" placeholder="Enter e-mail..."></input>
        </div>
      </form>
    </div>

    <script src="app.js"></script>
  </body>
</html>

app.js

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

  var list = [];

  app.controller ('mainController', function (){
    this.data = {};

    this.addData = function (){
      list.push (this.data);

      list.data = {};
    };
  });
})();

I only want to show everything I put on that input field.

Upvotes: 0

Views: 226

Answers (1)

ttzn
ttzn

Reputation: 2623

The FooController as FooCtrl syntax is only available starting with AngularJS 1.1.5 (see this). You're using 1.0.8.

Upvotes: 1

Related Questions