我在角js练习项目， 的描述
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>
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>
答案 0 :(得分：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上调用logout函数，例如某种确认。
答案 1 :(得分：2)
您在模块“customerApp”中的 logout.html 上定义CustomersController，但忘记将<{1}}添加到 html 此页面上的标签。
因此，您需要添加 logout.html
data-ng-app="customerApp"答案 2 :(得分：0)
有时我们在工厂，控制器和主模块中使用相同的模块名称。因此，这是导致错误的主要原因错误：[ng：areq]参数，当你打电话给你时，不要使用相同的模块名称服务，控制器，工厂。