Angular JS показывает ошибку, хотя контроллер доступен

Я новичок в Angular JS, и я пробую несколько примеров ... Но у меня возникает очень странное исключение, когда я пытаюсь загрузить свое приложение ...

Вот мой угловой JS-код:

<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>

Вот мой код контроллера:

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;
});

Ошибка, зарегистрированная firebug: Ошибка: [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 Строка 83

Я использую angular js версии 1.2.5 ...


javascript angularjs single-page-application
person Praneeth Ramesh    schedule 05.11.2014    source источник
comment
У вас есть два совершенно разных модуля. Один назвал myapp, а другой - myapp2. Вот почему MyController не может быть найден.   -  person Callum Linington    schedule 05.11.2014

Ответы (4)


arrow_upward
2
arrow_downward

Вы создаете два разных модуля angular с одним контроллером каждый вместо одного отдельного модуля с двумя разными контроллерами, что вы и хотите сделать, просто измените свой код, чтобы он соответствовал этому синтаксису:

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

Или вот этот:

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

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

myApp.controller("MyController", function($scope) {
    // ...
});
person Kutyel    schedule 05.11.2014

arrow_upward
2
arrow_downward

у вас есть два модуля: myapp и myapp2. myapp2 имеет контроллер MyController, который вы пытаетесь использовать в рамках модуля myapp, что невозможно.

вы можете определить MyController в модуле myapp. 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;
});

или вставьте модуль myapp2 в модуль myapp 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";
} );
person Naeem Shaikh    schedule 05.11.2014

arrow_upward
1
arrow_downward

Здесь есть 2 проблемы.

Во-первых, вы определили 2 разных модуля: «myapp» и «myapp1». Возможно, это просто опечатка, и вы хотели, чтобы они были такими же.

Вторая проблема заключается в том, что вы повторно определяете свой модуль, когда используете [] во второй раз:

angular.module("myapp", [])

Это модуль установки.

Вместо этого используйте модуль getter без []:

angular.module("myapp").controller("MyController", ...)
person New Dev    schedule 05.11.2014

arrow_upward
1
arrow_downward

Ниже будет работать. Что вы должны иметь в виду, так это то, что каждый раз, когда вы определяете новый angular.module, если вы помещаете angular.module('myapp', []), вы определяете новое пространство, которое не знает ни о каком другом модуле. Если вы затем выполните angular.module('myapp').controller(), контроллер будет присоединен к исходному модулю. Таким образом находится в его рамках.

Обратите внимание на пропуск [] при определении контроллера. [] предназначен для внедрения зависимостей, но в терминах angular.module определяет совершенно новое пространство модулей.

Ниже приведен способ правильной модуляции 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']);
person Callum Linington    schedule 05.11.2014