Erreur: [ng:areq] http://errors.angularjs.org/1.2.12/ng/areq?p0=CustomersController&p1=not%20aNaNunction%2C%20got%20undefined
J'ai de la pratique du projet en angular js,
Description
- demoangular.html page
- Logout.html page
demoangular page est la page de login, il redirige vers logout.html
Mais logout.html ne pas se comporter correctement
il montre d'erreur suivant sur la 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/". suivants du 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>
vous avez oublié
il me semble, une erreur dans votre itinéraire configs
pouvez-vous fournir une url où vous redirige? je pense que vous restez sur la même page et que vous vous en config route essayez de charge logout.html en tant que modèle d'url, et essayer de le traiter avec un
si vous avez le temps je vous le dis, le concept du début à la fin @Grundy
vous pouvez également l'ajouter à l'OP 🙂
data-ng-app="customerApp" dans logout.htmlil me semble, une erreur dans votre itinéraire configs
pouvez-vous fournir une url où vous redirige? je pense que vous restez sur la même page et que vous vous en config route essayez de charge logout.html en tant que modèle d'url, et essayer de le traiter avec un
newControllersi vous avez le temps je vous le dis, le concept du début à la fin @Grundy
vous pouvez également l'ajouter à l'OP 🙂
OriginalL'auteur Jot Dhaliwal | 2014-05-28
Vous devez vous connecter pour publier un commentaire.
Vous définissez
CustomersControllersur logout.html à l'intérieur du module de "customerApp", mais il a oublié d'ajouterdata-ng-app="customerApp"à html tag sur cette page.Si vous avez besoin d'ajouter dans logout.html
Avez-vous essayé le suivant?
<html data-ng-app="customer-app">En supposant que AngularJS est cohérent, alors quand vous avez camelcase noms qu'ils doivent être la référence dans les vues comme un trait d'union. C'est certainement le cas des directives, mais je ne peux pas dire que j'ai nommé mon application modules d'autre chose que de l'application dans la plupart des cas.je suis basé sur travaillé
Demoangular.htmlrésolu @Grundy stackoverflow.com/questions/23933501/...
merci, ne vous inquiétez pas 🙂
OriginalL'auteur Grundy
Votre déclaration de CustomersController semble incorrect. Vous avez spécifié:
Il devrait être:
L'autre problème que je vois est la suivante:
<button type="button" data-ng-click="logout()">logout</button>Il n'y a pas de contrôleur /portée contexte sur lequel appeler une fonction logout (). Il semble comme si vous êtes la manipulation de ce par le biais de routage, dans ce cas, vous devez juste avoir un lien pour se déconnecter, par exemple
<a href="/logout">Logout</a>Il est intéressant de noter que ce ne sera toujours pas à résoudre votre problème. Il va charger votre
newControlleret la déconnexion partielle. À ce stade, vous voulez toujours quelque chose à l'appel de la fonction de déconnexion sur newController, par exemple, une sorte de confirmation.plz ont un look stackoverflow.com/questions/23933501/...
OriginalL'auteur Nat Wallbank
Quelque temps, nous avons utiliser le même nom de module dans l'usine,les contrôleurs et le module principal.donc, c'est la principale raison pour laquelle cela va donner d'erreur Erreur: [ng:areq] Argument,ne pas utiliser le même nom de module quand u appellent appel à vos services,contrôleurs,d'usine.
OriginalL'auteur Gaurav verma