Angularjs: ข้อผิดพลาด: [ng: areq] อาร์กิวเมนต์ 'HomeController' ไม่ใช่ฟังก์ชันไม่ได้กำหนด


109

นี่คือการสาธิตของฉันโดยใช้ angularjs สำหรับสร้างไฟล์บริการและเพิ่มบริการให้กับคอนโทรลเลอร์

ฉันมีปัญหาสองประการกับการสาธิตของฉัน:

  • หนึ่งคือเมื่อฉันใส่<script src="HomeController.js">ก่อนที่จะ<script src="MyService.js">ได้รับข้อผิดพลาดนี้

ข้อผิดพลาด: [ng: areq] อาร์กิวเมนต์ 'HomeController' ไม่ใช่ฟังก์ชันไม่ได้กำหนด

  • อีกอย่างคือเมื่อฉันใส่<script src="MyService.js">ก่อนที่จะ<script src="HomeController.js">ได้รับข้อผิดพลาดต่อไปนี้

ข้อผิดพลาด: [$ injector: unpr] ผู้ให้บริการที่ไม่รู้จัก: MyServiceProvider <- MyService

แหล่งที่มาของฉัน:

ไฟล์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>

ไฟล์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);

ไฟล์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
ยืนยันว่าคุณได้เพิ่ม * .controller.js ของคุณไว้ในไฟล์ BundleConfig.cs หรือไม่ สิ่งนี้แก้ไขของฉัน
Syed Mohamed

คำตอบ:


210

สิ่งนี้จะสร้างโมดูล / แอปใหม่:

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

ในขณะนี้เข้าถึงโมดูลที่สร้างขึ้นแล้ว ( สังเกตการละเว้นของอาร์กิวเมนต์ที่สอง ):

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

เนื่องจากคุณใช้แนวทางแรกกับทั้งสองสคริปต์คุณจึงกำลังลบล้างโมดูลที่คุณสร้างไว้ก่อนหน้านี้

ในสคริปต์ที่สองที่กำลังโหลดให้ใช้var myApp = angular.module('myApp');.


สิ่งนี้แก้ไขข้อผิดพลาดของฉันด้วย ฉันผิดพลาด angular.module ('myApp', ['ui.router']) ใน 2 ไฟล์ที่แตกต่างกัน (app.js และ route.js) เมื่อฉันลบอาร์เรย์ออกจากเส้นทาง js มันจะแก้ไขการทดสอบหน่วย
Allan Bogh

64

ฉันพบข้อผิดพลาดนี้หนึ่งครั้ง ปัญหาของฉันคือฉันไม่ได้เพิ่มFILE_NAME_WHERE_IS_MY_FUNCTION.js

ดังนั้นfile.htmlของฉันไม่พบว่าฟังก์ชันของฉันอยู่ที่ไหน

เมื่อฉันเพิ่ม "file.js" ฉันก็แก้ไขปัญหาได้

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

1
ช่วยครั้งใหญ่ Yeoman ดึงแท็กสคริปต์ลงที่ด้านล่างของ index.html ของตัวสร้างเชิงมุม ... พลาดง่ายมาก ขอบคุณสำหรับสิ่งนี้!
JaeGeeTee

วิ่งพร็อบเดียวกัน ต้องเพิ่มไฟล์ controller.js ที่เกี่ยวข้องในหน้าดัชนีของฉันพร้อมกับคอนโทรลเลอร์อื่น ๆ
ahmednawazbutt

21

ตรวจสอบให้แน่ใจว่าคอนโทรลเลอร์ของคุณถูกกำหนดไว้ในแท็กสคริปต์ที่ด้านล่างของ index.html ก่อนแท็กปิดสำหรับ 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>

หากทุกอย่างสะกดว่า "ถูกต้อง" (เหมือนกัน) ในหน้า specific.html, specific.js และ app.js สิ่งนี้จะช่วยแก้ปัญหาของคุณได้


10

เกิดขึ้นกับฉันสองสามครั้งเมื่อใดก็ตามที่ฉันพลาด "," ระหว่างรายการฉีดยาและฟังก์ชัน

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

}]);

สิ่งเดียวกันเกิดขึ้นกับฉันเมื่อไม่มี "," ระหว่างชื่อผู้ควบคุมและรายชื่อการฉีดยานั่นคือapp.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);
Benji

5

ฉันยังพบข้อผิดพลาดนี้ แต่ในกรณีของฉันเป็นเพราะหลักการตั้งชื่อคอนโทรลเลอร์ ผมประกาศcontroller: "QuestionController"ใน.stateแต่ในความหมายควบคุมผมประกาศว่ามันชอบ

yiiExamApp.controller('questionController' ...

แต่มันควรจะเป็น

yiiExamApp.controller('QuestionController' ...

หวังว่าจะช่วยให้ผู้ที่เผชิญกับข้อผิดพลาดนี้เนื่องจากความผิดพลาดโง่ ๆ นี้ฉันเสียเวลาไป 4 ชั่วโมงในการระบุ


5

ฉันได้รับข้อผิดพลาดเดียวกัน ฉันกำหนดสคริปต์ java ไว้เช่นนี้

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

จากนั้นฉันก็เปลี่ยนเป็นสิ่งนี้

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

หลังจากนี้ปัญหาของฉันจะได้รับการแก้ไข


4

ฉันยังพบข้อผิดพลาดเดียวกันนี้และการแก้ไขสำหรับฉันคือรวมโมดูลลูกของฉันไว้ในอาร์เรย์โมดูลหลัก

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

4

หาก ALL ELSE ล้มเหลวและการวิ่งของคุณอยู่บน MEAN stack เช่นฉันด้วยอึก ... หยุดและรับใช้อีกครั้ง! ฉันดึงการได้ยินของฉันออกมาอย่างพิถีพิถันในการตรวจสอบทุกอย่างจากโพสต์ทั้งหมดของคุณโดยไม่มีประโยชน์ใด ๆ จนกว่าฉันจะรีรันเสิร์ฟอีกครั้ง


สิ่งนี้เกิดขึ้นกับการเสิร์ฟแบบฮึดฮัดด้วย
acromm

2

ฉันมีปัญหาที่คล้ายกัน การแก้ไขนี้ตรวจสอบให้แน่ใจว่า ctrollers ของคุณไม่ได้กำหนดเฉพาะในแท็กสคริปต์ที่ด้านล่างของ index.html ก่อนแท็กปิดสำหรับ body เท่านั้น แต่ยังตรวจสอบความถูกต้องด้วยว่าเป็นไปตามลำดับโครงสร้างโฟลเดอร์ของคุณ

<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

ฉันยังพบปัญหานี้ในโครงการของฉัน ในที่สุดมันก็ใช้งานได้หลังจากที่ฉันแทรกไฟล์my-controller.jsลงในkarma.conf.jsไฟล์ด้วยนามสกุล<script>แท็ก

หวังว่านี่จะช่วยได้ มีสาเหตุหลายประการที่สามารถนำไปสู่ปัญหานี้


1

ฉันยังได้รับข้อผิดพลาดนี้

ฉันต้องเพิ่มคอนโทรลเลอร์ใหม่ในข้อมูลเส้นทาง \ src \ js \ app.js

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

ฉันเพิ่มคอนโทรลเลอร์เพื่อให้ดูเหมือน

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

ไชโย!


1

เห็นได้ชัดว่าโพสต์ก่อนหน้านี้มีประโยชน์ แต่ข้อใด ๆ ข้างต้นไม่เป็นประโยชน์ในกรณีของฉัน เหตุผลที่อยู่ในลำดับที่ไม่ถูกต้องของสคริปต์โหลด ตัวอย่างเช่นในกรณีของฉันคอนโทรลเลอร์ editCtrl.js ขึ้นอยู่กับ (ใช้) ui-bootstrap-tpls.js ดังนั้นจึงควรโหลดก่อน สิ่งนี้ทำให้เกิดข้อผิดพลาด:

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

ถูกต้องแล้วใช้งานได้:

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

ดังนั้นในการแก้ไขข้อผิดพลาดคุณต้องประกาศสคริปต์ทั้งหมดโดยไม่มีการอ้างอิงก่อนจากนั้นสคริปต์ที่ขึ้นอยู่กับการประกาศก่อนหน้านี้


1

ลองทำตามนี้

    <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

ในกรณีของฉันฉันไม่มีชื่อแอปพลิเคชัน Angular ในไฟล์ html ตัวอย่างเช่นฉันได้รวมไฟล์นี้เพื่อเริ่มต้นรหัสแอปพลิเคชันของฉัน ฉันเดาว่ามันกำลังวิ่งอยู่ แต่มันไม่ใช่

app.module.js

(function () {
    'use strict';

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

})();

อย่างไรก็ตามเมื่อฉันประกาศแอปใน html ฉันมีสิ่งนี้:

index.html

<html lang="en" ng-app>

แต่ในการอ้างอิงแอปพลิเคชัน Angular ตามชื่อที่ฉันใช้ฉันต้องใช้:

index.html (คงที่)

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

1

ฉันได้รับข้อผิดพลาดเนื่องจากฉันได้เพิ่มสคริปต์คอนโทรลเลอร์ก่อนสคริปต์ที่ฉันกำหนดโมดูลที่เกี่ยวข้องในแอพ ก่อนอื่นให้เพิ่มสคริปต์

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

จากนั้นเพิ่มเท่านั้น

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

ในไฟล์หลัก


1

ข้อผิดพลาด: ng: areq Bad Argumentทำให้ฉันได้รับสองสามครั้งเพราะฉันปิดวงเล็บเหลี่ยมเร็วเกินไป ในตัวอย่าง BAD ด้านล่างปิดไม่ถูกต้องหลังจาก '$ state' เมื่อควรไปก่อนวงเล็บสุดท้าย

ไม่ดี:

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

});

ดี:

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

}]);

0

ใช่. ดังที่หลายคนได้กล่าวไว้ก่อนหน้านี้ฉันได้เพิ่มเส้นทาง src ลงในไฟล์คอนโทรลเลอร์ทั้งหมดใน 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>

สิ่งนี้แก้ไขข้อผิดพลาดนั้น


0

ฉันมีปัญหาเดียวกัน แต่ฉันลืมที่จะรวมไฟล์ไว้ในกระบวนการย่อขนาดฮึดฮัด / อึก

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

หวังว่าจะช่วยได้


0

ในสถานการณ์ของฉันข้อผิดพลาดนี้ปรากฏขึ้นเมื่อฉันไม่ได้ประกาศฟังก์ชันภายในอาร์กิวเมนต์อาร์เรย์

หนึ่งที่มีข้อผิดพลาด :

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

หนึ่งคงที่:

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

}]);

0

ตรวจสอบการสะกดผิดด้วย

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

ตรวจสอบว่าหน้า HTML ของคุณมี:

  1. angular.min สคริปต์
  2. app.js
  3. หน้าจาวาสคริปต์ตัวควบคุม

ลำดับที่รวมไฟล์เป็นสิ่งสำคัญ มันเป็นวิธีแก้ปัญหาของฉันสำหรับปัญหานี้

หวังว่านี่จะช่วยได้


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

สิ่งเดียวกันสำหรับฉันลูกน้ำ ',' ก่อนหน้าที่จะช่วยฉันในการแก้ไขปัญหา - ข้อผิดพลาด: ng: areq Bad Argument


0

ไฟล์คอนโทรลเลอร์ของฉันถูกแคชว่าว่างเปล่า การล้างแคชแก้ไขให้ฉัน


0

ฉันย้ายHomeController.jsของฉันออกจากที่ที่คาดไว้โดยไม่ได้ตั้งใจ วางอีกครั้งในตำแหน่งเดิม

หลังจากนั้นเว็บไซต์ของฉันก็เริ่มโหลดหน้าเว็บโดยอัตโนมัติทุกๆวินาทีฉันก็ไม่สามารถมองเห็นข้อผิดพลาดได้ ดังนั้นฉันจึงล้างแคชของเบราว์เซอร์ มันแก้ปัญหาได้

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.