Angularjs: Error: [ng: areq] Đối số 'HomeController' không phải là một hàm, chưa được xác định


109

Đây là bản demo của tôi sử dụng anglejs, để tạo tệp dịch vụ và thêm dịch vụ vào bộ điều khiển.

Tôi có hai vấn đề với bản trình diễn của mình:

  • Một là khi tôi đặt <script src="HomeController.js">trước khi <script src="MyService.js">gặp lỗi này,

Lỗi: [ng: areq] Đối số 'HomeController' không phải là một hàm, không được xác định

  • Cái khác là khi tôi đặt <script src="MyService.js">trước khi <script src="HomeController.js">gặp lỗi sau,

Lỗi: [$ injectionor: unr] Nhà cung cấp không xác định: MyServiceProvider <- MyService

Nguồn của tôi:

Tệp tin Index.html:

<!DOCTYPE html>
<html >
    <head lang="en">…</head>
    <body ng-app="myApp">
        
        <div ng-controller="HomeController">
            <div ng-repeat="item in hello">{{item.id + item.name}}</div>
        </div>

        <script src="Scripts/angular.js"></script>
        <script src="Scripts/angular-route.js"></script>

        <!-- App libs -->
        <script src="app/app.js"></script>    
        <script src="app/services/MyService.js"></script>
        <script src="app/controllers/HomeController.js"></script>
    </body>
</html>

Tệp tin HomeController.js:

(function(angular){
    'use strict';

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

    myApp.controller('HomeController',function($scope,MyService){    
        $scope.hello=[];
        $scope.hello = MyService.getHello();
    });
})(window.angular);

Tệp tin MyService.js:

(function(angular){
    'use strict';

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

    myApp.service('MyService', function () {
        var hello =[  {id:1,name:'cuong'},
            {id:2,name:'nguyen'}];
        this.getHello = function(){
            return hello;
        };
    });

})(window.angular);

1
Xác nhận xem bạn đã thêm * .controller.js của mình vào tệp BundleConfig.cs hay chưa. Điều này sửa lỗi của tôi.
Syed Mohamed

Câu trả lời:


210

Điều này tạo ra một mô-đun / ứng dụng mới:

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

Trong khi điều này truy cập vào một mô-đun đã được tạo ( lưu ý việc bỏ qua đối số thứ hai ):

var myApp = angular.module('myApp');

Vì bạn sử dụng cách tiếp cận đầu tiên trên cả hai tập lệnh, về cơ bản, bạn đang ghi đè mô-đun mà bạn đã tạo trước đó.

Trên tập lệnh thứ hai đang được tải, hãy sử dụng var myApp = angular.module('myApp');.


Điều này cũng đã sửa lỗi của tôi. Tôi đã nhầm lẫn để lại angle.module ('myApp', ['ui.router']) trong 2 tệp khác nhau (app.js và route.js). Khi tôi xóa mảng khỏi các route.js, nó đã sửa các bài kiểm tra đơn vị.
Allan Bogh

64

Tôi đã gặp lỗi này một lần. Vấn đề của tôi là tôi không thêm FILE_NAME_WHERE_IS_MY_FUNCTION.js

vì vậy file.html của tôi không bao giờ tìm thấy chức năng của tôi ở đâu

Sau khi thêm "file.js", tôi đã giải quyết được sự cố

<html ng-app='myApp'>
    <body ng-controller='TextController'>
    ....
    ....
    ....
    <script src="../file.js"></script>
    </body>
</html>

1
Đã giúp thời gian lớn. Yeoman kéo các thẻ script xuống cuối index.html của trình tạo góc ... rất dễ bỏ sót. Cảm ơn vì điều đó!
JaeGeeTee

đã chạy cùng một thử nghiệm. Phải thêm controller.js tập tin tương ứng trong trang chỉ mục của tôi cùng với các bộ điều khiển khác
ahmednawazbutt

21

Đồng thời đảm bảo rằng bộ điều khiển của bạn được xác định trong các thẻ script ở cuối index.html của bạn ngay trước thẻ đóng cho body.

 <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/Administration.js"></script>
    <script src="scripts/controllers/Leaderboard.js"></script>
    <script src="scripts/controllers/Login.js"></script>
    <script src="scripts/controllers/registration.js"></script>

miễn là mọi thứ được viết "đúng" (giống nhau) trên các trang specific.html, specific.js và app.js của bạn, điều này sẽ giải quyết được sự cố của bạn.


10

Đã xảy ra với tôi vài lần bất cứ khi nào tôi bỏ lỡ "," giữa danh sách các mũi tiêm và chức năng

app.controller('commonCtrl', ['$scope', '$filter',function($scope,$filter) {

}]);

Điều tương tự cũng xảy ra với tôi khi thiếu "" giữa tên điều khiển và danh sách các thuốc tiêm, tức làapp.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);
Benji

5

Tôi cũng gặp phải lỗi này nhưng trong trường hợp của tôi, đó là do quy ước đặt tên bộ điều khiển. Tôi đã khai báo controller: "QuestionController"trong .statenhưng trong định nghĩa bộ điều khiển, tôi đã khai báo nó như

yiiExamApp.controller('questionController' ...

nhưng nó phải là

yiiExamApp.controller('QuestionController' ...

hy vọng rằng sẽ giúp những người gặp phải lỗi này vì sai lầm ngu ngốc này, tôi đã lãng phí 4 giờ để xác định nó.


5

Tôi cũng mắc lỗi tương tự. Tôi đã định nghĩa tập lệnh java như thế này

<script src="controllers/home.js" />

sau đó tôi đã thay đổi cái này

<script src="controllers/home.js"></script>

Sau khi vấn đề của tôi được giải quyết.


4

Tôi cũng gặp phải lỗi tương tự này và cách khắc phục cho tôi là đưa mô-đun con của tôi vào mảng mô-đun chính.

var myApp = angular.module('myApp', ['ngRoute', 'childModuleName']);

4

Nếu ALL ELSE không thành công và bạn đang chạy cục bộ trên ngăn xếp MEAN giống như tôi bị nuốt chửng ... chỉ cần dừng lại và phục vụ lại! Tôi đã cố gắng kiểm tra tỉ mỉ mọi thứ từ tất cả các bài đăng của bạn nhưng không có kết quả cho đến khi tôi chỉ đơn giản là chạy lại phục vụ nuốt chửng.


Điều này cũng xảy ra với giao bóng grunt
acromm

2

Tôi đã có vấn đề tương tự. Cách khắc phục là đảm bảo rằng các ctrollers của bạn không chỉ được xác định trong các thẻ script ở cuối index.html của bạn ngay trước thẻ đóng cho body mà CŨNG phải xác thực rằng chúng theo thứ tự cấu trúc thư mục của bạn.

<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/Administration.js"></script>
<script src="scripts/controllers/Leaderboard.js"></script>
<script src="scripts/controllers/Login.js"></script>
<script src="scripts/controllers/registration.js"></script>

2

Tôi cũng gặp phải vấn đề này trong dự án của mình. Cuối cùng nó đã hoạt động sau khi tôi chèn thẻ my-controller.jsvào karma.conf.jstệp của mình <script>.

Hy vọng điều này sẽ giúp ích. Có khá nhiều lý do có thể dẫn đến vấn đề này.


1

Tôi cũng gặp lỗi này.

Tôi đã phải thêm bộ điều khiển mới của mình vào thông tin định tuyến. \ src \ js \ app.js

angular.module('Lillan', [
  'ngRoute',
  'mobile-angular-ui',
  'Lillan.controllers.Main'
])

Tôi đã thêm bộ điều khiển của mình để làm cho nó trông giống như

angular.module('Lillan', [
  'ngRoute',
  'mobile-angular-ui',
  'Lillan.controllers.Main',
  'Lillan.controllers.Growth'
])

Chúc mừng!


1

Rõ ràng rằng các bài viết trước đây là hữu ích, nhưng bất kỳ bài viết nào ở trên đều không hữu ích trong trường hợp của tôi. Nguyên nhân là do trình tự tải tập lệnh sai . Ví dụ: trong trường hợp của tôi, bộ điều khiển editCtrl.js phụ thuộc vào (sử dụng) ui-bootstrap-tpls.js, vì vậy nó phải được tải trước. Điều này gây ra lỗi:

<script src="scripts/app/station/editCtrl.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>

Điều này là đúng, hoạt động:

<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="scripts/app/station/editCtrl.js"></script>

Vì vậy, để sửa lỗi, trước tiên bạn cần khai báo tất cả các tập lệnh không có phụ thuộc , sau đó là các tập lệnh phụ thuộc vào đã khai báo trước đó.


1

Thử cái này

    <title>My First Angular App</title>

</head>

<body>

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <h3>Adding Simple Controller<h3>        

    <div ng-controller="SimpleController">
        Name:

        <br/>

        <input type = "text" data-ng-model = "name"/> {{name}}

        <br/>

        <ul>    
            <li data-ng-repeat = "cust in customers | filter:name | orderBy:'city'">
                {{cust.name}} - {{cust.city}}
            </li>
        </ul>

    </div>


    <script>

        var angularApp = angular.module('angularApp',[]);

        angularApp.controller('SimpleController', [ '$scope', SimpleController]);

        function SimpleController($scope)
        {

            $scope.customers = [
                                    {name:'Nikhil Mahirrao', city:'Pune'},
                                    {name:'Kapil Mahire', city:'Pune'},
                                    {name:'Narendra Mahirrao', city:'Phophare'},
                                    {name:'Mithun More', city:'Shahada'}

                                ]; 
        }

    </script>

</body>


1

Trong trường hợp của tôi, tôi đã thiếu tên của ứng dụng Angular trong tệp html. Ví dụ: tôi đã bao gồm tệp này để bắt đầu mã ứng dụng của tôi. Tôi đã cho rằng nó đang được chạy, nhưng không phải vậy.

app.module.js

(function () {
    'use strict';

    angular
        .module('app', [
        // Other dependencies here...
        ])
    ;

})();

Tuy nhiên, khi tôi khai báo ứng dụng trong html, tôi có điều này:

index.html

<html lang="en" ng-app>

Nhưng để tham chiếu ứng dụng Angular theo tên tôi đã sử dụng, tôi phải sử dụng:

index.html (Đã sửa)

<html lang="en" ng-app="app">

1

Tôi gặp lỗi vì tôi đã thêm tập lệnh bộ điều khiển trước tập lệnh mà tôi đã xác định mô-đun tương ứng trong ứng dụng. Đầu tiên hãy thêm tập lệnh

<script src = "(path of module.js file)"></script>

Sau đó chỉ thêm

<script src = "(path of controller.js file)"></script>

Trong tệp chính.


1

Lỗi: ng: areq Bad Argument đã khiến tôi gặp phải một vài lần vì tôi đóng dấu ngoặc vuông quá sớm. Trong ví dụ BAD bên dưới, nó được đóng không chính xác sau '$ state' khi nó thực sự phải đi trước dấu ngoặc đơn cuối cùng.

XẤU:

sampleApp.controller('sampleApp', ['$scope', '$state'], function($scope, $state){

});

TỐT:

sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){

}]);

0

Đúng. Như nhiều người đã chỉ ra trước đây, tôi đã thêm đường dẫn src vào tất cả các tệp bộ điều khiển trong index.html.

<script src="controllers/home.js"></script>
<script src="controllers/detail.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/navbar.js"></script>
<script src="controllers/signup.js"></script>

Điều này đã sửa lỗi đó.


0

Tôi đã gặp vấn đề tương tự, nhưng tôi đã quên đưa tệp vào quy trình giảm thiểu grunt / gulp.

grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js']
      }
    }
  }
});

Hy vọng rằng sẽ giúp.


0

Trong tình huống của tôi, lỗi này xuất hiện khi tôi không khai báo hàm trong đối số mảng.

Người có lỗi :

taskAppControllers.controller('MainMenuCtrl', []);

Một trong những cố định:

taskAppControllers.controller('MainMenuCtrl', [function(){

}]);

0

Cũng kiểm tra lỗi chính tả .

var MyApp = angular.module('AppName',[]);
MyApp.controller('WRONG_SPELLING_MyCtrl', ['$scope', MyControllerCtrl])
function MyControllerCtrl($scope) {
   var vm = $scope;
   vm.Apple = 'Android';
}

<div ng-controller="ACTUAL_SPELLING_MyCtrl">
    {{Apple}}
</div>

0

Kiểm tra xem trang HTML của bạn có bao gồm:

  1. angular.min kịch bản
  2. app.js
  3. trang JavaScript bộ điều khiển

Thứ tự các tệp được bao gồm là quan trọng. Đó là giải pháp của tôi cho vấn đề này.

Hi vọng điêu nay co ich.


0
sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){

Điều tương tự đối với tôi, dấu phẩy ',' trước hàm đã giúp tôi khắc phục sự cố - Lỗi: ng: areq Bad Argument


0

Tệp bộ điều khiển của tôi đã được lưu vào bộ nhớ cache là trống. Xóa bộ nhớ cache đã sửa nó cho tôi.


0

Tôi đã vô tình di chuyển HomeController.js của mình ra khỏi trực tiếp, nơi nó được mong đợi. Đặt nó một lần nữa vào vị trí ban đầu.

Sau đó, trang web của tôi bắt đầu tự động tải trang mỗi giây, tôi thậm chí không thể nhìn ra lỗi. Vì vậy, tôi đã xóa bộ nhớ cache của trình duyệt. Nó đã giải quyết được vấn đề

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.