Bonjour,
Je tiens d'abord à remercier Grafikart pour la qualité de toutes les formations que ce site propose.
Malheuresement, je reste déspérement bloqué, dans la formation pour AngularJS lorsqu'est abordé la question de la directive ngSubmit.
J'ai beau cliquer sur mon input de type submit, rien ne se passe.
J'ai tout vérifié par rapport au formateur et à la documentation avec les exemples, après plus de trois heures, je ne trouve pas l'erreur.
Je remercie d'avance celui qui pourra me débloquer !
Voici mon index.html :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="MonApp">
<div ng-view></div>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js></script>
<script src=https://code.angularjs.org/1.2.18/angular-route.js></script>
<script>
var app = angular.module('MonApp', 'ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{templateUrl : 'partials/home.html', controller : 'PostsCtrl'})
.when('/comments/:id',{templateUrl : 'partials/comments.html', controller : 'CommentsCtrl'})
.otherwise({redirectTo : '/'})
})
app.factory('Post', function($http, $q, $timeout){
var factory = {
posts : false,
getPosts : function(){
var deferred = $q.defer();
if(factory.posts !==false){
deferred.resolve(factory.posts);
}else{
$http.get('posts.json')
.success(function(data, status){
factory.posts=data;
$timeout(function(){
deferred.resolve(factory.posts);
},500)
}).error(function(data, status){
deferred.reject('Impossible de récupérer les articles');
});
}
return deferred.promise;
},
getPost : function(id){
var deferred = $q.defer();
var post = {};
var post = factory.getPosts().then(function(posts){
angular.forEach(posts, function(value, key) {
if(value.id == id){
post = value
}
});
deferred.resolve(post);
}, function(msg){
deferred.reject(msg);
});
return deferred.promise;
}
}
return factory;
})
app.controller('PostsCtrl', function ($scope, Post){
$scope.loading = true;
Post.getPosts().then(function(posts){
$scope.loading = false;
$scope.posts = posts;
}, function(msg){
alert(msg);
});
})
app.controller('CommentsCtrl', function ($scope, Post, $routeParams){
$scope.loading = true;
$scope.newComment = {}
Post.getPost($routeParams.id).then(function(post){
$scope.loading = false;
$scope.title = post.name;
$scope.comments = post.comments;
}, function(msg){
alert(msg);
})
$scope.addComment = function(){
$scope.comments.push($scope.newComment);
$scope.newComment = {};
}
});
</script>
</body>
</html>Et le second fichier comments.html :
<a href="#/">Revenir aux articles<a><br>
<div ng-show="loading"> Chargement ...</div>
<div ng-hide="loading">
<h1>{{title}}</h1>
<div ng-repeat="comment in comments | orderBy:order">
<p>
<strong>{{comment.username}}</strong>
{{comment.content}}
</p>
</div>
<form ng-submit="addComment()">
<input type="text" placeholder="username" ng-model="newComment.username" /><br>
<input type="text" placeholder="city" ng-model="newComment.city" /><br>
<input type="text" placeholder="email" ng-model="newComment.email" /><br>
<textarea placeholder="content" ng-model="newComment.content"></textarea><br>
<p>{{newComment}}</p>
<input type="submit" value="Envoyer"/>
</form>
</div>
4 réponses
Salut, il te manque pour commencer un crochet ouvrant dans la déclaration de ton module :
var app = angular.module('MonApp', ['ngRoute']); //devant 'ngRoute'Sinon, on ne peut pas trop tester, il faudrait le fichier 'posts.json'
Le submit du formulaire ne fonctionne pas car ton balisage n'est pas correct, ton lien "Revenir aux articles" n'est pas fermé...
<a href="#/">Revenir aux articles</a><br>Ça ira beaucoup mieux après...