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

angularjs angularjs-directive angularjs-ng-route

14,904

Solution 1

You define CustomersController on logout.html inside module "customerApp", but forgot add data-ng-app="customerApp" to html tag on this page.
So you need add in logout.html

<html data-ng-app="customerApp">

Solution 2

Your declaration for CustomersController looks wrong. You've specified:

app.controller('CustomersController', function PostsController($scope, customerFactory) { .. });

It should be:

app.controller('CustomersController', function ($scope, customerFactory) { .. });

The other problem I see is with the following:

<button type="button" data-ng-click="logout()">logout</button>

There's no controller / scope context on which to call a logout() function. It looks as though you're handling this via routing, in which case you should just have a link to logout, e.g.

<a href="/logout">Logout</a>

It's worth noting that this will still not solve your problem. It'll load your newController and the logout partial. At that point you'll still want something to call the logout function on newController, e.g. some kind of confirmation.

14,904

Author by

Jot Dhaliwal

Updated on June 26, 2022

Comments

Jot Dhaliwal almost 2 years

I have practice project in angular js, Description

demoangular.html page
Logout.html page

demoangular page is login page it redirects to logout.html

But logout.html doesnt behave properly

it shows following error on console

Error: [ng:areq] http://errors.angularjs.org/1.2.12/ng/areq?p0=CustomersController&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)
    at http://localhost:52078/scripts/angular.min.js:6:450
    at tb (http://localhost:52078/scripts/angular.min.js:18:360)
    at Pa (http://localhost:52078/scripts/angular.min.js:18:447)
    at http://localhost:52078/scripts/angular.min.js:62:17
    at http://localhost:52078/scripts/angular.min.js:49:43
    at q (http://localhost:52078/scripts/angular.min.js:7:386)
    at H (http://localhost:52078/scripts/angular.min.js:48:406)
    at f (http://localhost:52078/scripts/angular.min.js:42:399)
    at http://localhost:52078/scripts/angular.min.js:42:67 angular.min.js:8203
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://getbootstrap.com/2.3.2/".

following is code ...

Demoangular.html

<!DOCTYPE html>
<html data-ng-app="customerApp">
<head>
    <title>Angular js</title>

    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/angular-route.js"></script>

</head>
<body>
    <div>
        <div data-ng-view=""></div>
    </div>
    <script>
        var demoapp = angular.module('customerApp', ['ngRoute']);
        demoapp.config(function ($routeProvider) {
            $routeProvider.when('/hello', {
                controller: 'SimpleController',
                templateUrl: 'partials/hello.html'
            });
            $routeProvider.when('/logout', {
                controller: 'newController',
                templateUrl: 'partials/logout.html'
            });
            $routeProvider.otherwise({ redirectTo: '/hello' });
        });

        demoapp.factory("authser", function ($location, $http) {
            return {
                login: function (cardentials) {
                    if (cardentials.username != "jot") {
                        alert("its ");
                    }
                    else {

                        $location.path('/logout');

                    }
                },
                logout: function () {
                    $location.path('/hello');
                }
            }
        })

        demoapp.controller('SimpleController', function ($scope, authser) {
            $scope.cardentials = { username: "", password: "" };

            $scope.login = function () {
                authser.login($scope.cardentials);
            };

        });
        demoapp.controller('newController', function ($scope, authser) {
            $scope.logout = function () {
                authser.logout();

            };
        });
    </script>
</body>
</html>

logout.html

<!DOCTYPE html>
<html>
<head>
   <title></title>
    <script src="../Scripts/jquery-1.8.2.min.js"></script>
    <script src="scripts/angular.min.js"></script>
</head>
<body>
    <h1>I am Inside the Angular Knowledge</h1>
    <button type="button" data-ng-click="logout()">logout</button>


    <style>
        #mydiv {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            background-color: grey;
            opacity: .8;
        }
    </style>
    <div data-ng-controller="CustomersController" class="container">

        <strong class="error">{{ error }}</strong>
        <p data-ng-hide="addMode">
            <a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a>

        </p>
        <form name="addCustomer" data-ng-show="addMode" style="width: 600px; margin: 0px auto;">
            <label>Name:</label><input type="text" data-ng-model="newcustomer.Name" required />
            <label>Email:</label><input type="email" data-ng-model="newcustomer.Email" required />
            <br />
            <span class="error" data-ng-show="addCustomer.$error.email">Invalid Email format!</span>
            <br />
            <input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addCustomer.$valid" class="btn btn-primary" />
            <input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
            <br />
            <br />
        </form>
        <table class="table table-bordered table-hover" style="width: 800px">
            <tr>
                <th>#id</th>
                <th>Name</th>
                <th>Email</th>
                <th></th>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="text" data-ng-model="search.Name" /></td>
                <td>
                    <input type="text" data-ng-model="search.Email" /></td>
                <td></td>
            </tr>

            <tr data-ng-repeat="customer in customers | filter:search">
                <td><strong data-ng-hide="customer.editMode">{{ customer.CustomerID }}</strong></td>
                <td>
                    <p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
                    <p data-ng-show="customer.editMode">
                        <input type="text" data-ng-model="customer.Name" />
                    </p>
                </td>
                <td>
                    <p data-ng-hide="customer.editMode">{{ customer.Email }}</p>
                    <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Email" /></td>
                <td>
                    <p data-ng-hide="customer.editMode"><a data-ng-click="toggleEdit(customer)" href="javascript:;">Edit</a> | <a data-ng-click="delcustomer(customer)" href="javascript:;">Delete</a></p>
                    <p data-ng-show="customer.editMode"><a data-ng-click="save(customer)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(customer)" href="javascript:;">Cancel</a></p>
                </td>
            </tr>
        </table>
        <hr />
    </div>
    <script>
        var app = angular.module('customerApp', []);
        var url = 'api/Customers/';

        app.factory('customerFactory', function ($http) {
            return {
                getCustomer: function () {
                    return $http.get(url);
                },
                addCustomer: function (customer) {
                    return $http.post(url, customer);
                },
                deleteCustomer: function (customer) {
                    return $http.delete(url + customer.CustomerID);
                },
                updateCustomer: function (customer) {
                    return $http.put(url + customer.Id, customer);
                }
            };
        });

        app.controller('CustomersController', function PostsController($scope, customerFactory) {
            $scope.customers = [];
            //$scope.loading = true;
            $scope.addMode = false;

            $scope.toggleEdit = function () {
                this.customer.editMode = !this.customer.editMode;
            };
            $scope.toggleAdd = function () {
                $scope.addMode = !$scope.addMode;
            };
            $scope.save = function () {
                //$scope.loading = true;
                var cust = this.customer;
                customerFactory.updateCustomer(cust).success(function (data) {
                    alert("Saved Successfully!!");
                    cust.editMode = false;
                    //$scope.loading = false;
                }).error(function (data) {
                    $scope.error = "An Error has occured while Saving customer! " + data.ExceptionMessage;
                    //$scope.loading = false;

                });
            };

            // add Customer
            $scope.add = function () {
                $scope.loading = true;
                customerFactory.addCustomer(this.newcustomer).success(function (data) {
                    alert("Added Successfully!!");
                    $scope.addMode = false;
                    $scope.customers.push(data);
                    //$scope.loading = false;
                }).error(function (data) {
                    $scope.error = "An Error has occured while Adding customer! " + data.ExceptionMessage;
                    //$scope.loading = false;

                });
            };
            // delete Customer
            $scope.delcustomer = function () {
                //$scope.loading = true;
                var currentCustomer = this.customer;
                customerFactory.deleteCustomer(currentCustomer).success(function (data) {
                    alert("Deleted Successfully!!");
                    $.each($scope.customers, function (i) {
                        if ($scope.customers[i].CustomerID === currentCustomer.CustomerID) {
                            $scope.customers.splice(i, 1);
                            return false;
                        }
                    });
                    //$scope.loading = false;
                }).error(function (data) {
                    $scope.error = "An Error has occured while Saving customer! " + data.ExceptionMessage;
                    //$scope.loading = false;

                });
            };

            //get all Customers
            customerFactory.getCustomer().success(function (data) {
                $scope.customers = data;
                //$scope.loading = false;
            })
            .error(function (data) {
                $scope.error = "An Error has occured while loading posts! " + data.ExceptionMessage;
                //$scope.loading = false;
            });

        });
    </script>

</body>
</html>

Jot Dhaliwal almost 10 years

i added but same issue resides @
Nat Wallbank almost 10 years

Have you tried the following? <html data-ng-app="customer-app"> Assuming AngularJS is consistent, then when you have camel-cased names they must be reference in views as hyphenated. This is certainly the case with directives, but I can't say that I've named my app modules anything other than 'app' in most cases.
Grundy almost 10 years

@natwallbank, i'm based on worked Demoangular.html
Jot Dhaliwal almost 10 years

plz have a look stackoverflow.com/questions/23933501/…
Jot Dhaliwal almost 10 years

solved @Grundy stackoverflow.com/questions/23933501/…
Jot Dhaliwal almost 10 years

@Grundy are you around
Grundy almost 10 years

@Jatt.net-Born2Code what you mean? :-)
Jot Dhaliwal almost 10 years

i solved the problem now the app is fine @Grundy ... i wana appreciate you help
user007 over 9 years

@Jot, could you explain how you fixed the problem? I tried to click on the link and that does not exist any more.
Grundy over 9 years

@SharminJose do you have a same problem? you can create your own question, and we try help you :-)
Jot Dhaliwal over 9 years

@SharminJose , i was on christmas vacations , please have a look over the link i undelete that post