3

我有 Angular js 的练习项目， 描述

  1. demoangular.html 页面
  2. Logout.html 页面

demoangular 页面是登录页面，它重定向到 logout.html

但是 logout.html 行为不正常

它在控制台上显示以下错误

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/".

以下是代码...

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>

注销.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>
4

3 回答 3

3

您对 CustomersController 的声明看起来错误。您已指定：

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

它应该是：

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

我看到的另一个问题是：

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

没有可以调用 logout() 函数的控制器/范围上下文。看起来好像您正在通过路由处理此问题，在这种情况下，您应该只有一个注销链接，例如

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

值得注意的是，这仍然无法解决您的问题。它会加载你newController和注销部分。此时，您仍然需要调用 newController 上的注销功能，例如某种确认。

于 2014-05-28T15:23:08.350 回答
2

您在模块"customerApp"内的logout.htmlCustomersController上定义，但忘记添加到此页面上的html标记。 所以你需要添加logout.htmldata-ng-app="customerApp"

<html data-ng-app="customerApp">
于 2014-05-28T16:06:01.527 回答
0

有时我们在工厂，控制器和主模块中使用相同的模块名称。所以，这是它会给出错误的主要原因 Error: [ng:areq] Argument,don't use same module name when you call your services,controllers,factory .

于 2015-03-04T11:51:02.903 回答