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);
javascript angularjs angularjs-service Cuong.Ho
sumber
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');.

bmleite
sumber
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>
Jorge Casariego
sumber
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.

AA11oAKas
sumber
10

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

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

}]);
jprism
sumber
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.

Kuldeep Dangi
sumber
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.

Damith Ganegoda
sumber
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']);
James
sumber
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.

sigmapi13
sumber
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>
Maurizio L.
sumber
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.

sosostris.dll
sumber
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!

zaini
sumber
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.

Sergey Kulgan
sumber
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>

Nikhil Mahirrao
sumber
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">
Casey Plummer
sumber
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.

pengguna2470087
sumber
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){

}]);
selada lipat
sumber
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>
Luaskan cuplikan

Ini memperbaiki kesalahan itu.

obscure79
sumber
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.

Patrik Bego
sumber
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(){

}]);
Kunok
sumber
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>
Mahesh
sumber
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.

Yehudit Grinwald
sumber
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

memperbaikinya
sumber
0

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

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

Charlie
sumber