AngularJs - Argument 'AppController' is not a function, got undefined

Question

I have a problem that has frustrated me, I get the error Error: [ng: areq] Argument 'AppController' is not a function, got undefined, I have not been able to solve it, I have tried many ways but in all of them I get this same error, does anybody know how I can fix it?

my html:

<div class="container app-topmargin" ng-app="sampleAngularApp" ng-controller="AppController">
        <div class="row">
          <div class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-3">
            <button class="btn btn-primary" ng-click="openDlg()">Open Modal</button>
          </div>
        </div>
        <ng-include src=""></ng-include>

  </div>

my app.js:

var app = angular.module("sampleAngularApp", []);
app.controller("AppController", ["$scope", function ($scope) {
    $scope.openDlg = function () {
        console.log("clicked here...");

        var dlgElem = angular.element("#modalDlg");
        if (dlgElem) {
            dlgElem.modal("show");
        }
    };
}]);

Do you have an other `ng-app` defined somewhere else in your HTML? — C.Champagne, Oct 08 '18 at 21:51
if so, I think you should keep only this `ng-app` and remove the other ones. — C.Champagne, Oct 09 '18 at 08:32

score 0 · Answer 1 · answered Oct 08 '18 at 21:36

Try passing the controller as an argument in the array of your angular module.

var app = angular.module("sampleAngularApp", ['AppController']);
  app.controller("AppController", ["$scope", function ($scope) {
   $scope.openDlg = function () {
    console.log("clicked here...");

    var dlgElem = angular.element("#modalDlg");
    if (dlgElem) {
        dlgElem.modal("show");
    }
 };
}]);

score 0 · Answer 2 · answered Oct 08 '18 at 21:53

Your code works fine for me:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="app.js"></script>
  <div class="container app-topmargin" ng-app="sampleAngularApp" ng-controller="AppController">
        <div class="row">
          <div class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-3">
            <button class="btn btn-primary" ng-click="openDlg()">Open Modal</button>
          </div>
        </div>
        <ng-include src=""></ng-include>
  </div>  
</body>
</html>

app.js

var app = angular.module("sampleAngularApp", []);
app.controller("AppController", ["$scope", function ($scope) {
    $scope.openDlg = function () {
        console.log("clicked here...");
    };
}]);

Perhaps check the order in which you're loading the scripts.

I think my problem is because I have several ng-app, is there any way to do this? — AlexCs, Oct 08 '18 at 22:14
This should help: https://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page https://stackoverflow.com/questions/12860595/how-to-define-two-angular-apps-modules-in-one-page — Teh SoTo, Oct 08 '18 at 22:24

AngularJs - Argument 'AppController' is not a function, got undefined

2 Answers2