Error ng areq

This is a long shot, but has anyone seen this error before? I am trying to add ‘Transporters’ using express, angular and mongoDB. I get this error whenever I access a page ruled by the transporters controller:

Error: [ng:areq] http://errors.angularjs.org/1.2.12/ng/areq?p0=TransportersController&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)
    at http://localhost:3000/lib/angular/angular.min.js:6:450
    at tb (http://localhost:3000/lib/angular/angular.min.js:18:360)
    at Pa (http://localhost:3000/lib/angular/angular.min.js:18:447)
    at http://localhost:3000/lib/angular/angular.min.js:62:17
    at http://localhost:3000/lib/angular/angular.min.js:49:43
    at q (http://localhost:3000/lib/angular/angular.min.js:7:386)
    at H (http://localhost:3000/lib/angular/angular.min.js:48:406)
    at f (http://localhost:3000/lib/angular/angular.min.js:42:399)
    at http://localhost:3000/lib/angular/angular.min.js:42:67 

The transporters controller looks like this:

'use strict';

angular.module('mean.transporters').controller('TransportersController', ['$scope', '$routeParams', '$location', 'Global', 'Transporters', function ($scope, $routeParams, $location, Global, Transporters) {
    $scope.global = Global;

    $scope.create = function() {
        var transporter = new Transporters({
            name: this.name,
            natl_id: this.natl_id,
            phone: this.phone
        });
        transporter.$save(function(response) {
            $location.path('transporters/' + response._id);
        });

        this.title = '';
        this.content = '';
    };

    $scope.remove = function(transporter) {
        if (transporter) {
            transporter.$remove();

            for (var i in $scope.transporters) {
                if ($scope.transporters[i] === transporter) {
                    $scope.transporters.splice(i, 1);
                }
            }
        }
        else {
            $scope.transporter.$remove();
            $location.path('transporters');
        }
    };

    $scope.update = function() {
        var transporter = $scope.transporter;
        if (!transporter.updated) {
            transporter.updated = [];
        }
        transporter.updated.push(new Date().getTime());

        transporter.$update(function() {
            $location.path('transporters/' + transporter._id);
        });
    };

    $scope.find = function() {
        Transporters.query(function(transporters) {
            $scope.transporters = transporters;
        });
    };

    $scope.findOne = function() {
        Transporters.get({
            transporterId: $routeParams.transporterId
        }, function(transporter) {
            $scope.transporter = transporter;
        });
    };
}]);

In my views I call the list and create methods. They generate the above error

I got this from the angular docs for ng:areq though still can’t figure what’s going on

AngularJS often asserts that certain values will be present and truthy
using a helper function. If the assertion fails, this error is thrown.
To fix this problem, make sure that the value the assertion expects is
defined and truthy.

Here’s the view that calls the controller public/views/transporters/list.html:

<section data-ng-controller="TransportersController" data-ng-init="find()">
    <ul class="transporters unstyled">
        <li data-ng-repeat="transporter in transporters">
            <span>{{transporter.created | date:'medium'}}</span> /
            <h2><a data-ng-href="#!/transporters/{{transporter._id}}">{{transporter.name}}</a></h2>
            <div>{{transporter.natl_id}}</div>
            <div>{{transporter.phone}}</div>
        </li>
    </ul>
    <h1 data-ng-hide="!transporters || transporters.length">No transporters yet. <br> Why don't you <a href="/#!/transporters/create">Create One</a>?</h1>
</section>

Transporters service code:

angular.module('transporterService', [])
    .factory('Transporter', ['$http', function($http){
        // all return promise objects
        return {
            get: function(){
                return $http.get('/api/transporters');
            },
            create: function(transporterData){
                return $http.post('/api/transporters', transporterData);
            },
            delete: function(id){
                return $http.delete('/api/transporters/'+id);
            }
        };
    }]);

User448619955 posted

I try to use AngularJS and ASP.NET MVC together. I use some pages such as masterpage.cshtml, changepassword and etc. in _layout I’ve used ngRoute to use my pages like SPA ,so far so good, here is my codes and scripts in masterpage.cshtml.

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
<script type="text/javascript">
    var angualarModule1 = angular.module('myApp', ['ngRoute']);
    angualarModule1.config(function ($routeProvider) {
        debugger;
        $routeProvider.when('/firstPage',
            {
                templateUrl: 'ManageUsers/changepassword',
                controller: 'ManageUsersController'
            });
    });
</script>
...
...
 <div ng-view></div>
...
...

and in changepassword.cshtml page

@model BranchPanel.Models.ResetPasswordViewModel
@{
    Layout = null;
}

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script>
    angualarModule1.controller('myCtrl',
        function ($scope, $http, $location, $window) {
           
            //******=========Change Password=========******
            $scope.saveCustomer = function () {
                $scope.result = false;
                debugger;
                $http({
                    method: 'POST',
                    url: '/ManageUsers/ChangePassword',
                    data: $scope.custModel
                }).success(function (data, status, headers, config) {
                    debugger;
                    if (data[0] === "success") {

                        $scope.result = true;
                        $scope.status = data[0];
                        $scope.message = data[1];

                        console.log(data);
                    } else {
                        $scope.result = true;
                        $scope.status = data[0];
                        $scope.message = data[1];

                    }
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error while saving data!!' + data.errors;

                    console.log($scope.message);
                });


            };
        });
</script>
<title>Change Pass</title>

<section class="content" >
   
    <div class="row" ng-controller="myCtrl">

            <div class="col-md-12">
                <div ng-include="'/Message.html'" ng-show="result">

                </div>
                <!-- USERS LIST -->
                <div class="box box-success">

                    <div class="box-body">

                        <div class="form-horizontal">
                   
                            <hr/>
                            @Html.ValidationSummary(true, "", new {@class = "text-danger"})

                            <div class="form-group">
                                @Html.LabelFor(model => model.CurrentPassword, htmlAttributes: new {@class = "control-label col-md-2"})
                                <div class="col-md-2">
                                    @Html.EditorFor(model => model.CurrentPassword, new {htmlAttributes = new {@class = "form-control", ng_model = "custModel.CurrentPassword"}})
                                    @Html.ValidationMessageFor(model => model.CurrentPassword, "", new {@class = "text-danger"})


                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.Password, htmlAttributes: new {@class = "control-label col-md-2"})
                                <div class="col-md-2">
                                    @Html.EditorFor(model => model.Password, new {htmlAttributes = new {@class = "form-control", id = "password", ng_model = "custModel.Password"}})
                                    @Html.ValidationMessageFor(model => model.Password, "", new {@class = "text-danger"})


                                </div>
                            </div>

                            <div class="form-group">
                                @Html.LabelFor(model => model.ConfirmPassword, htmlAttributes: new {@class = "control-label col-md-2"})
                                <div class="col-md-2">
                                    @Html.EditorFor(model => model.ConfirmPassword, new {htmlAttributes = new {@class = "form-control", ng_model = "custModel.ConfirmPassword"}})
                                    @Html.ValidationMessageFor(model => model.ConfirmPassword, "", new {@class = "text-danger"})


                                </div>
                            </div>

                        </div>
                    </div>
                    <hr/>
                    <div class="box-footer">
                        <div class="form-group">
                            <div class="col-md-12">
                                <input type="submit" id="ChangePass" value="change" class="btn btn-success col-md-1 text-left" ng-click="saveCustomer()"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</section>
@*}*@

after clicking on my button saveCustomer
function must be run ,but it does not.in console watch I get an error as bellow:

angular.js:9997 Error: [ng:areq] http://errors.angularjs.org/1.2.20/ng/areq?p0=ManageUsersController&p1=not%20a%20function%2C%20got%20undefined
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js:6:450
at Bb (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js:19:68)
at Ua (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js:19:155)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js:67:405
at link (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js:7:248)
at K (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js:54:390)
at f (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js:47:261)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js:46:377
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js:48:217
at w (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js:52:47) <div ng-view="" class="ng-scope">

I shared an error that I got stuck for several hours.

Error message

Error: [ng:areq] http://errors.angularjs.org/1.3.10/ng/areq?p0=userRequestController&p1=not%20aNaNunction%2C%20got%20undefined

error code

The above error occurred when I customized an angular route. The previous code is as follows:

.state('userRequestController', {
    url: "/ossapp/zk/synchronized.html",
    templateUrl: "views/request/userRequest.html",
    params: {reqUrl: null, backUrl: null},
    data: {pageTitle: 'Sync Switch'},
    controller: "userRequestController",
    resolve: {
        deps: ['$ocLazyLoad', function ($ocLazyLoad) {
            return $ocLazyLoad.load([{
                insertBefore: '#ng_load_plugins_before',
                files: [
                    'js/scripts/modules/request/userRequestController.js'
                ]
            }]);
        }]
    }
})

Official misinterpretation

Check the angularjs error message document (Document address), the error message given is as follows:

DESCRIPTION

AngularJS often asserts that certain values will be present and truthy using a helper function. If the assertion fails, this error is thrown. To fix this problem, make sure that the value the assertion expects is defined and truthy.

translate to Chinese:

description

AngularJS usually asserts that certain values ​​will appear to ensure that the referenced function is useful. To solve this problem, make sure that the value of the assertion is correctly defined and referenced.

Troubleshooting stage:

1. Check that the referenced controller and html template address are correct
2. Check the name of the viewing page and the controller reference is correct
3. Ensure that all dependencies used have no reference errors
4. 。。。
   The error is found here, the text on the page has been able to be displayed correctly, butError: [ng:areq]It still exists. Although it does not affect the page, the error is still very dazzling in the console (if it was a warning at the time, I might not care).

After that, I checked the referenced controller, and the reference was correct, but when I commented out the code referenced to the controller in the route, the error disappeared. Suddenly understand

In other words, if the controller is not used in the page for a while, don’t reference it in the route. Comment out in the routecontroller: “userRequestController”Can。

Solved this inexplicable bug, I really feel sour and refreshed, continue to code~~

END

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

(function(angular){
    'use strict';

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

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

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

25 Answers

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

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

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

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

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

}]);

yiiExamApp.controller('questionController' ...

yiiExamApp.controller('QuestionController' ...

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

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

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

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

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

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

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

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

(function () {
    'use strict';

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

})();

<html lang="en" ng-app>

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

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

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

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

});

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

}]);

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

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

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

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

}]);

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>

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

//Corrected code is :
app.controller('HomeController', function($scope, $http, $log) {

  $scope.demo1 = function(){
      console.log("In demo");
  } //Here i forgot to add the semicolon
  
  $scope.demo2 = function(){
      console.log("In demo");
  };
  
});