Angular JS thowing error even though controller is available

1
votes

I am new to Angular JS and I am trying some examples... But I get a very weird exception when I try to load my app...

Here is my angular JS code: 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
        <script src="JS/Controllers.js"></script>
    <body ng-app="myapp">
            <div ng-controller="HelloController">
                <h2>Hello {{helloTo.title}} !</h2>
            </div>
            <div ng-controller="MyController" >
                <span ng-show="myData.showIt"></span>
                <span ng-hide="myData.showIt"></span>
            </div>
        </body>

Here is my controller code : 

angular.module("myapp", []).controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );

angular.module("myapp1", []).controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});

Error logged by firebug: Error: [ng:areq] http://errors.angularjs.org/1.2.5/ng/areq?p0=MyController&p1=not%20a%20function%2C%20got%20undefined https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js Line 83

I am using angular js version 1.2.5...

4
javascriptangularjssingle-page-application
You have two, completely different modules here. One called myapp and one called myapp2. This is why MyController can't be found. – Callum Linington

4 Answers

2
votes

you have two modules, myapp and myapp2. myapp2 has a controller MyController which you are trying to use within the scope of myapp module, which is not possible.

you can define the MyController within myapp module. http://jsfiddle.net/g35tpy5q/1/

var myapp=angular.module("myapp", []);
myapp.controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );

myapp.controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});

or inject the myapp2 module inside myapp module http://jsfiddle.net/g35tpy5q/2/

angular.module("myapp2", []).controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});
angular.module("myapp", ["myapp2"]).controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );
2
votes

You are creating two different angular modules, with one controller each, instead of one single module with two different controllers, which is what you want to do, just change your code to match this syntax:

angular.module("myapp", [])
    .controller("HelloController", function($scope) {
        // ...
    })
    .controller("MyController", function($scope) {
        // ...
    });

Or this one:

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

myApp.controller("HelloController", function($scope) {
    // ...
});

myApp.controller("MyController", function($scope) {
    // ...
});
1
votes

There are 2 issues here.

One, is that you have defined 2 different modules: "myapp" and "myapp1". Perhaps it's just a typo, and you meant for them to be the same.

Then, the second issue is that you are re-defining your module when you use [] for the second time:

angular.module("myapp", [])

This is a module setter.

Instead, use a module getter without the []:

angular.module("myapp").controller("MyController", ...)
1
votes

Below will work. What you have to bare in mind is that everytime you define a new angular.module if you put angular.module('myapp', []) you are defining a new space that has no knowledge of any other module. If you then do angular.module('myapp').controller() that will attach the controller to the original module. Thus is being in its scope.

Notice the ommission of [] when defining the controller. The [] is for dependency injection, but in terms of angular.module defines a completely new module space.

Below is a way to actually properly modularise angular js.

angular.module("myapp.hello", []).controller("HelloController", function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "Test";
} );

angular.module("myapp.my", []).controller("MyController", function($scope) {
  $scope.myData = {};
  $scope.myData.showIt = true;
});

angular.module("myapp", [
    'myapp.hello',
    'myapp.my']);