Angularjs: Hata: [ng: areq] Bağımsız Değişken 'HomeController' bir işlev değil, tanımsız alındı


109

Bu, bir hizmet dosyası oluşturmak ve bir denetleyiciye hizmet eklemek için angularjs kullanan demom.

Demomla ilgili iki sorunum var:

  • Birincisi, bu hatayı <script src="HomeController.js">almadan önce koyduğumda <script src="MyService.js">,

Hata: [ng: areq] 'HomeController' bağımsız değişkeni bir işlev değil, tanımsız hale getirildi

  • Diğeri, aşağıdaki hatayı <script src="MyService.js">almadan önce koyduğumda <script src="HomeController.js">,

Hata: [$ injector: unpr] Bilinmeyen sağlayıcı: MyServiceProvider <- MyService

Kaynağım:

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

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

Dosya 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 dosyanızın BundleConfig.cs dosyasına eklenip eklenmediğini kontrol edin. Bu benimkini düzeltir.
Syed Mohamed

Yanıtlar:


210

Bu, yeni bir modül / uygulama oluşturur:

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

Bu, önceden oluşturulmuş bir modüle erişirken (ikinci bağımsız değişkenin atlandığına dikkat edin ):

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

Her iki komut dosyasında da ilk yaklaşımı kullandığınız için, temelde önceden oluşturduğunuz modülü geçersiz kılıyorsunuz.

Yüklenen ikinci komut dosyasında var myApp = angular.module('myApp');.


Bu benim hatamı da düzeltti. Yanlışlıkla angular.module ('myApp', ['ui.router']) 2 farklı dosyada (app.js ve route.js) bıraktım. Diziyi route.js'den kaldırdığımda, birim testlerini düzeltti.
Allan Bogh

64

Bu hatayı bir kez yaşadım. Sorunum, FILE_NAME_WHERE_IS_MY_FUNCTION.js’yi eklemiyor olmamdı.

bu yüzden benim file.html işlevimin nerede olduğunu asla bulamadı

"File.js" yi ekledikten sonra sorunu çözdüm

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

1
Çok yardımcı oldu. Yeoman, komut dosyası etiketlerini açısal oluşturucunun index.html'sinin altına sıkıştırıyor ... gözden kaçırmak çok kolay. Bunun için teşekkürler!
JaeGeeTee

aynı probu çalıştırdı. Diğer denetleyicilerle birlikte dizin sayfama karşılık gelen controller.js dosyasını
eklemem gerekiyordu

21

Ayrıca, denetleyicilerinizin komut dosyası etiketleri içinde index.html'nizin alt kısmında body için kapanış etiketinin hemen öncesinde tanımlandığından emin olun.

 <!-- 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 ve app.js sayfalarınızda her şeyin "doğru" (aynı) yazılması koşuluyla, bu sorununuzu çözecektir.


10

Enjeksiyon listesi ve işlevi arasında "" "" özlediğimde birkaç kez başıma geldi

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

}]);

Denetleyici adı ve enjeksiyon listesi arasında "," eksik olduğunda da bana aynı şey oldu, yaniapp.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);
Benji

5

Ben de bu hatayı yaşadım ama benim durumumda bunun nedeni denetleyici adlandırma kuralıydı. Ben ilan controller: "QuestionController"içinde .stateama denetleyici tanımında bunun gibi ilan

yiiExamApp.controller('questionController' ...

ama olmalı

yiiExamApp.controller('QuestionController' ...

Umarım bu, bu hatayla karşılaşan insanlara bu aptalca hata nedeniyle onu tanımlamak için 4 saat harcadım.


5

Aynı hatayı aldım. Java betiğini böyle tanımladım

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

sonra buna değiştirdim

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

Bundan sonra sorunum çözüldü.


4

Ben de aynı hatayla karşılaştım ve benim için düzeltme, alt modülümü ana modül dizisine dahil etmekti.

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

4

HEPSİ başarısız olursa ve benim gibi MEAN yığını üzerinde yerel olarak koşarsanız ... sadece durun ve tekrar servis yapın! Tüm gönderilerinizden boşuna her şeyi titizlikle kontrol ettiğimde, sadece yudum servisini yeniden çalıştırana kadar duydum.


Bu aynı zamanda grunt
serviste

2

Benzer bir sorun yaşadım. Düzeltme, denetleyicilerinizin yalnızca body için kapanış etiketinden hemen önce index.html'nizin altına doğru komut dosyası etiketleri içinde tanımlanmasını değil, aynı zamanda klasörünüzün nasıl yapılandırıldığına göre olduklarını da doğrulamasını sağlamaktı.

<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

Projemde de bu sorunla karşılaştım. Ben takılı sonra sonunda çalıştı my-controller.jsbenim içine karma.conf.jsdosya ile, <script>etiketinin.

Umarım bu yardımcı olur. Bu soruna yol açabilecek pek çok neden var.


1

Ben de bu hatayı aldım.

Yeni denetleyicimi yönlendirme bilgilerine eklemem gerekiyordu. \ Src \ js \ app.js

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

Gibi görünmesi için denetleyicimi ekledim

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

Şerefe!


1

Açıkçası, önceki gönderiler yararlı, ancak yukarıdakilerden herhangi biri benim durumumda yardımcı olmuyor. Nedeni, komut dosyalarını yanlış yükleme sırasındaydı . Örneğin, benim durumumda, controller editCtrl.js ui-bootstrap-tpls.js'ye bağlıdır (kullanır), bu yüzden önce yüklenmelidir. Bu bir hataya neden oldu:

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

Bu doğru, çalışır:

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

Bu nedenle, hatayı düzeltmek için önce bağımlılık içermeyen tüm komut dosyalarını ve ardından önceden bildirilmiş olan komut dosyalarını bildirmeniz gerekir .


1

Bunu dene

    <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

Benim durumumda, html dosyasında Angular uygulamasının adı eksikti. Örneğin, bu dosyayı uygulama kodumun başlangıcı olarak eklemiştim. Çalıştırıldığını varsaymıştım ama değildi.

app.module.js

(function () {
    'use strict';

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

})();

Ancak, uygulamayı html'de ilan ettiğimde şuna sahiptim:

index.html

<html lang="en" ng-app>

Ancak Angular uygulamasına kullandığım adla atıfta bulunmak için şunu kullanmalıydım:

index.html (Sabit)

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

1

Hatayı alıyordum çünkü denetleyici komut dosyasını uygulamada karşılık gelen modülü tanımladığım komut dosyasından önce ekledim. Önce komut dosyasını ekleyin

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

O zaman sadece ekle

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

Ana dosyada.


1

Hata: ng: areq Hatalı Bağımsız Değişken , köşeli parantezi çok erken kapattığım için beni birkaç kez . Aşağıdaki BAD örneğinde, aslında son parantezden önce gelmesi gerektiğinde, '$ state'den sonra yanlış bir şekilde kapatılmıştır.

KÖTÜ:

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

});

İYİ:

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

}]);

0

Evet. Birçoğunun daha önce işaret ettiği gibi, src yolunu index.html'deki tüm denetleyici dosyalarına ekledim.

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

Bu, bu hatayı düzeltti.


0

Aynı sorunu yaşadım, ancak dosyayı grunt / yudum küçültme sürecine dahil etmeyi unuttum.

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

Umarım yardımcı olur.


0

Benim durumumda bu hata, bir dizi argümanı içinde işlev bildirmediğimde ortaya çıktı.

İle bir hata :

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

Sabit olan:

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

}]);

0

Ayrıca yazım hatalarını da kontrol edin .

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 sayfanızın şunları içerip içermediğini kontrol edin:

  1. angular.min senaryo
  2. app.js
  3. denetleyici JavaScript sayfası

Dosyaların dahil edilme sırası önemlidir. Bu soruna benim çözümüm buydu.

Bu yardımcı olur umarım.


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

Benim için aynı şey, virgül ',' işlevinden önce sorunu çözmeme yardımcı oldu - Hata: ng: areq Kötü Bağımsız Değişken


0

Denetleyici dosyam boş olarak önbelleğe alındı. Önbelleği temizlemek onu benim için düzeltti.


0

Yanlışlıkla HomeController.js'mi beklendiği yerden doğrudan dışarı taşıdım . Tekrar orijinal yerine koymak.

Bundan sonra web sitem her saniye otomatik olarak sayfa yüklemeye başladı, hatta hataya bakamadım. Bu yüzden tarayıcı önbelleğini temizledim. Sorunu çözdü

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.