Error: [ng:areq] http://errors.angularjs.org/1.2.12/ng/areq?p0=CustomersController&p1=not%20aNaNunction%2C%20got%20undefined
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>
Answer
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.