Angularjs: Error: [ng: areq] Argumen 'HomeController' bukan fungsi, tidak terdefinisi


109

Ini adalah demo saya menggunakan angularjs, untuk membuat file layanan, dan menambahkan layanan ke pengontrol.

Saya memiliki dua masalah dengan demo saya:

  • Salah satunya adalah ketika saya meletakkan <script src="HomeController.js">sebelum <script src="MyService.js">saya mendapatkan kesalahan ini,

Kesalahan: [ng: areq] Argumen 'HomeController' bukan fungsi, tidak ditentukan

  • Yang lainnya adalah ketika saya meletakkan <script src="MyService.js">sebelum <script src="HomeController.js">saya mendapatkan kesalahan berikut,

Kesalahan: [$ injector: tidak aktif] Penyedia tidak dikenal: MyServiceProvider <- MyService

Sumber saya:

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

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

File 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
Konfirmasikan apakah Anda telah menambahkan * .controller.js Anda telah ditambahkan di file BundleConfig.cs. Ini memperbaiki milikku.
Syed Mohamed

Jawaban:


210

Ini membuat modul / aplikasi baru:

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

Saat ini mengakses modul yang sudah dibuat ( perhatikan kelalaian argumen kedua ):

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

Karena Anda menggunakan pendekatan pertama pada kedua skrip, pada dasarnya Anda mengganti modul yang Anda buat sebelumnya.

Pada skrip kedua yang dimuat, gunakan var myApp = angular.module('myApp');.


Ini memperbaiki kesalahan saya juga. Saya keliru meninggalkan angular.module ('myApp', ['ui.router']) di 2 file berbeda (app.js dan routes.js). Setelah saya menghapus array dari routes.js, itu memperbaiki tes unit.
Allan Bogh

64

Saya mengalami kesalahan ini sekali. Masalah saya adalah saya tidak menambahkan FILE_NAME_WHERE_IS_MY_FUNCTION.js

jadi file.html saya tidak pernah menemukan di mana fungsi saya

Setelah saya menambahkan "file.js" saya menyelesaikan masalah

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

1
Membantu waktu besar. Yeoman menyelipkan tag skrip ke bawah di bagian bawah index.html generator sudut ... sangat mudah untuk dilewatkan. Terima kasih untuk ini!
JaeGeeTee

menjalankan prob yang sama. Harus menambahkan file controller.js yang sesuai di halaman indeks saya bersama dengan pengontrol lain
ahmednawazbutt

21

Pastikan juga bahwa pengontrol Anda ditentukan dalam tag skrip di bagian bawah index.html tepat sebelum tag penutup untuk badan.

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

asalkan semuanya dieja "dengan benar" (sama) di halaman spesifik.html, spesifik.js, dan app.js, ini akan menyelesaikan masalah Anda.


10

Terjadi pada saya beberapa kali setiap kali saya melewatkan "," antara daftar suntikan dan fungsi

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

}]);

Hal yang sama terjadi pada saya ketika kehilangan "," antara nama pengontrol dan daftar suntikan, yaituapp.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);
Benji

5

Saya juga mengalami kesalahan ini tetapi dalam kasus saya itu karena konvensi penamaan pengontrol. Saya menyatakan controller: "QuestionController"dalam .statetetapi dalam definisi pengontrol saya menyatakannya seperti

yiiExamApp.controller('questionController' ...

tapi seharusnya begitu

yiiExamApp.controller('QuestionController' ...

harapan yang membantu orang-orang yang menghadapi kesalahan ini karena kesalahan bodoh ini saya menyia-nyiakan 4 jam untuk mengidentifikasinya.


5

Saya mendapat kesalahan yang sama. Saya mendefinisikan skrip java seperti ini

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

lalu saya berubah menjadi ini

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

Setelah ini masalah saya teratasi.


4

Saya juga mengalami kesalahan yang sama dan perbaikan bagi saya adalah memasukkan modul anak saya ke dalam array modul utama.

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

4

Jika SEMUA LAIN gagal dan Anda berjalan secara lokal di tumpukan MEAN seperti saya dengan teguk ... berhenti dan sajikan lagi! Saya menarik dengar saya dengan cermat memeriksa semuanya dari semua posting Anda tidak berhasil sampai saya hanya menjalankan ulang teguk servis.


Ini terjadi juga dengan grunt serve
acromm

2

Saya memiliki masalah serupa. Perbaikannya adalah memastikan bahwa ctrollers Anda tidak hanya ditentukan dalam tag skrip di bagian bawah index.html Anda tepat sebelum tag penutup untuk body tetapi JUGA memvalidasi bahwa mereka sesuai dengan bagaimana folder Anda terstruktur.

<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

Saya juga mengalami masalah ini dalam proyek saya. Ini akhirnya berfungsi setelah saya memasukkan my-controller.jske dalam karma.conf.jsfile saya , dengan <script>tag.

Semoga ini bisa membantu. Ada cukup banyak alasan yang bisa memicu munculnya masalah ini.


1

Saya juga mendapat kesalahan ini.

Saya harus menambahkan pengontrol baru saya ke informasi perutean. \ src \ js \ app.js

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

Saya menambahkan pengontrol saya agar terlihat seperti

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

Bersulang!


1

Jelas bahwa posting sebelumnya bermanfaat, tetapi semua di atas tidak membantu dalam kasus saya. Alasannya adalah urutan pemuatan skrip yang salah . Misalnya, dalam kasus saya, kontroler editCtrl.js bergantung pada (menggunakan) ui-bootstrap-tpls.js, jadi harus dimuat terlebih dahulu. Ini menyebabkan kesalahan:

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

Ini benar, berhasil:

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

Jadi, untuk memperbaiki kesalahan, pertama - tama Anda perlu mendeklarasikan semua skrip tanpa dependensi , lalu skrip yang bergantung pada deklarasi sebelumnya.


1

Coba ini

    <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

Dalam kasus saya, saya kehilangan nama aplikasi Angular di file html. Misalnya, saya telah menyertakan file ini untuk memulai kode aplikasi saya. Saya telah berasumsi itu sedang dijalankan, tetapi ternyata tidak.

app.module.js

(function () {
    'use strict';

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

})();

Namun, ketika saya mendeklarasikan aplikasi di html, saya memiliki ini:

index.html

<html lang="en" ng-app>

Tetapi untuk mereferensikan aplikasi Angular dengan nama yang saya gunakan, saya harus menggunakan:

index.html (Tetap)

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

1

Saya mendapatkan kesalahan karena saya telah menambahkan skrip pengontrol sebelum skrip tempat saya mendefinisikan modul yang sesuai di aplikasi. Pertama tambahkan skrip

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

Kemudian tambahkan saja

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

Di file utama.


1

Kesalahan: ng: areq Argumen Buruk telah membuat saya beberapa kali karena saya menutup tanda kurung siku terlalu cepat. Dalam contoh BAD di bawah ini ditutup dengan tidak benar setelah '$ state' padahal seharusnya benar-benar diletakkan sebelum tanda kurung terakhir.

BURUK:

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

});

BAIK:

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

}]);

0

Iya. Seperti yang telah ditunjukkan sebelumnya, saya telah menambahkan path src ke semua file controller di 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>

Ini memperbaiki kesalahan itu.


0

Saya memiliki masalah yang sama, tetapi saya lupa memasukkan file tersebut ke dalam proses minimisasi grunt / gulp.

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

Semoga membantu.


0

Dalam situasi saya, kesalahan ini muncul ketika saya tidak mendeklarasikan fungsi dalam argumen array.

Yang mengalami kesalahan :

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

Yang diperbaiki:

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

}]);

0

Periksa juga kesalahan ejaan .

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

Periksa apakah halaman HTML Anda mencakup:

  1. angular.min naskah
  2. app.js
  3. pengontrol halaman JavaScript

Urutan file disertakan itu penting. Itu adalah solusi saya untuk masalah ini.

Semoga ini membantu.


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

Hal yang sama untuk saya, koma ',' before function membantu saya dalam memperbaiki masalah - Error: ng: areq Bad Argument


0

File pengontrol saya di-cache sebagai kosong. Menghapus cache telah memperbaikinya untuk saya.


0

Saya tidak sengaja memindahkan HomeController.js saya secara langsung, di tempat yang diharapkan. Menempatkannya lagi di lokasi aslinya.

Setelah itu situs web saya mulai memuat halaman secara otomatis setiap detik, saya bahkan tidak dapat melihat kesalahannya. Jadi saya membersihkan cache browser. Itu memecahkan masalah

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.