Solucionado
Flávio, meu projeto deu algum problema nesse ponto. Quase tudo funciona. Quando removo uma foto, ela desaparece, mas depois volta quando atualizo a página. Parece que não remove do banco de dados.
Outro problema é que quando aparto em EDITAR, a página abre com título e URL, porém sem a foto. As alterações em título, URL e Descrição não ficam salvas.
Estou usando ubuntu 14.04, firefox 48. Tem alguma dica do que está faltando? Valeu
Olá Jenipapos! Cole o código de FotoController, inclusive o código das duas parciais principal.html e foto.html. Por fim, o código de main.js.
Pode ficar tranquilíssimo que a gente resolve. Mas só para desencargo, testou no Chrome e deu a mesma coisa?
Resolveu? Onde esta seu código?
Oi Flávio. Ainda não. Já testei no chrome e o problema permanece.
Aqui vai meu foto-controller.js:
angular.module('alurapic').controller('FotoController', function ($scope, $http, $routeParams) {
$scope.foto = {};
$scope.mensagem = '';
if ($routeParams.fotoId) {
$http.get('/v1/fotos/' + $routeParams.fotoId)
.success(function (foto) {
$scope.foto = foto;
})
.error(function (erro) {
console.log(erro);
$scope.mensagem = 'Não foi possível obter a foto'
});
};
$scope.submeter = function () {
if ($scope.formulario.$valid) {
if ($routeParams.fotoId) {
$http.put('/v1/fotos' + $scope.foto._id, $scope.foto)
.success(function () {
$scope.mensagem = 'Foto alterada com sucesso';
})
.error(function (erro) {
console.log(erro);
$scope.mensagem = 'Não foi possível alterar';
});
} else {
$http.post('/v1/fotos', $scope.foto)
.success(function () {
$scope.foto = {};
$scope.mensagem = 'Foto cadastrada com sucesso';
})
.error(function (erro) {
console.log(erro);
$scope.mensagem = 'Não foi possível cadastrar a foto';
})
}
}
};
});aqui vai meu principal.html:
<div class="jumbotron">
<h1 class="text-center">Alurapic</h1>
</div>
<p ng-show="mensagem.length" class="alert alert-info">{{mensagem}}</p>
<div class="row">
<div class="col-md-12">
<form>
<div class="input-group">
<span class="input-group-btn">
<a href="/fotos/new" class="btn btn-primary" type="button">Nova foto</a>
</span>
<input class="form-control" placeholder="filtrar pelo título da foto" ng-model="filtro" ng-model-options="{ debounce: 500 }">
</div>
</form>
</div>
<!-- fim col-md-12 -->
</div>
<!-- fim row -->
<div class="row">
<meu-painel class="col-md-2 painel-animado" ng-repeat="foto in fotos | filter: filtro" titulo="{{foto.titulo}}">
<img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
<a class="btn btn-primary btn-block" href="/fotos/edit/{{foto._id}}">Editar</a>
<button class="btn btn-danger btn-block" ng-click="remover(foto)">Remover</button>
</meu-painel>
</div>aqui vai o foto.html:
<div class="page-header text-center">
<h1>{{foto.titulo}}</h1>
</div>
<p ng-show="mensagem.length" class="alert alert-info">{{mensagem}}</p>
<form novalidate name="formulario" class="row" ng-submit="submeter()">
<div class="col-md-6">
<div class="form-group">
<label>Título</label>
<input name="titulo" class="form-control" ng-model="foto.titulo" required ng-maxlength="20">
<span ng-show="formulario.$submitted && formulario.titulo.$error.required" class="form-control alert-danger">Título obrigatório</span>
<span ng-show="formulario.$submitted && formulario.titulo.$error.maxlength" class="form-control alert-danger">No máximo 20 caracteres</span>
</div>
<div class="form-group">
<label>URL</label>
<input name="url" class="form-control" ng-model="foto.url" required>
<span ng-show="formulario.$submitted && formulario.url.$error.required" class="form-control alert-danger">URL obrigatória</span>
</div>
<div class="form-group">
<label>Descrição</label>
<textarea name="descricao" class="form-control" ng-model="foto.descricao"></textarea>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="formulario.$invalid">Salvar</button>
<a href="/" class="btn btn-primary">Voltar</a>
<!--<hr>-->
</div>
<div class="col-md-6">
<minha-foto url="{{foto.url}}" titulo="{{foto.titulo}}"></minha-foto>
</div>
</form>aqui vai o main.js:
angular.module('alurapic', ['minhasDiretivas', 'ngAnimate', 'ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/fotos', {
templateUrl: 'partials/principal.html'
, controller: 'FotosController'
});
$routeProvider.when('/fotos/new', {
templateUrl: 'partials/foto.html'
, controller: 'FotoController'
});
$routeProvider.when('/fotos/edit/:fotoId', {
templateUrl: 'partials/foto.html'
, controller: 'FotoController'
});
$routeProvider.otherwise({
redirectTo: '/fotos'
});
});Valeu! Renato
Você vai fazer um simples testes. No seu if do controller, imprima foto._id no console e verifique se esta chegando uma ID.
Creio que o id está chegando sim. O console deu algo como E18e8augUd5ixcde ao clicar no botão de editar de alguma foto.
Espero ter feito certo. Eis o código com console.log no primeiro if:
angular.module('alurapic').controller('FotoController', function ($scope, $http, $routeParams) {
$scope.foto = {};
$scope.mensagem = '';
if ($routeParams.fotoId) {
$http.get('/v1/fotos/' + $routeParams.fotoId)
.success(function (foto) {
$scope.foto = foto;
console.log(foto._id);
})
.error(function (erro) {
console.log(erro);
$scope.mensagem = 'Não foi possível obter a foto'
});
};
$scope.submeter = function () {
if ($scope.formulario.$valid) {
if ($routeParams.fotoId) {
$http.put('/v1/fotos' + $scope.foto._id, $scope.foto)
.success(function () {
$scope.mensagem = 'Foto alterada com sucesso';
})
.error(function (erro) {
console.log(erro);
$scope.mensagem = 'Não foi possível alterar';
});
} else {
$http.post('/v1/fotos', $scope.foto)
.success(function () {
$scope.foto = {};
$scope.mensagem = 'Foto cadastrada com sucesso';
})
.error(function (erro) {
console.log(erro);
$scope.mensagem = 'Não foi possível cadastrar a foto';
})
}
}
};
});Jenipapos, você criou a diretiva minha-foto? É um exercício que coloquei de propósito no treinamento para saber se o aluno esta acompanhando os exercícios. Se você pulou esse exercício, o navegador ignorará minha-foto.
Agora eu entendi que é a remoção, sendo assim, preciso que compartilhe FotosController e principal.html para que eu possa olhar.
Poisé, eu reparei que no meu código não tinha essa diretiva. Eu vim acompanhando, não sei como pulei essa parte. Está em qual aula?
Aqui está o fotos-controller.js
angular.module('alurapic').controller('FotosController', function ($scope, $http) {
$scope.fotos = [];
$scope.filtro = '';
$scope.mensagem = '';
$http.get('/v1/fotos')
.success(function (retorno) {
$scope.fotos = retorno;
})
.error(function (erro) {
console.log(erro);
});
$scope.remover = function (foto) {
$http.delete('/v1/fotos' + foto._id)
.success(function () {
var indiceDaFoto = $scope.fotos.indexOf(foto);
$scope.fotos.splice(indiceDaFoto, 1);
$scope.mensagem = 'Foto ' + foto.titulo + ' removida com sucesso!';
})
.error(function (erro) {
console.log(erro);
$scope.mensagem = 'Não foi possível apagar a foto ' + foto.titulo;
});
};
});aqui está o principal.html
<div class="jumbotron">
<h1 class="text-center">Alurapic</h1>
</div>
<p ng-show="mensagem.length" class="alert alert-info">{{mensagem}}</p>
<div class="row">
<div class="col-md-12">
<form>
<div class="input-group">
<span class="input-group-btn">
<a href="/fotos/new" class="btn btn-primary" type="button">Nova foto</a>
</span>
<input class="form-control" placeholder="filtrar pelo título da foto" ng-model="filtro" ng-model-options="{ debounce: 500 }">
</div>
</form>
</div>
<!-- fim col-md-12 -->
</div>
<!-- fim row -->
<div class="row">
<meu-painel class="col-md-2 painel-animado" ng-repeat="foto in fotos | filter: filtro" titulo="{{foto.titulo}}">
<img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
<a class="btn btn-primary btn-block" href="/fotos/edit/{{foto._id}}">Editar</a>
<button class="btn btn-danger btn-block" ng-click="remover(foto)">Remover</button>
</meu-painel>
</div>Valeu
O exercício é esse:
https://cursos.alura.com.br/course/angularjs-mvc/section/6/task/4
Seu código não funciona porque está assim:
$http.delete('/v1/fotos' + foto._id)Veja que faltou uma /:
O correto é
$http.delete('/v1/fotos/' + foto._id)Belezinha? Sucesso e bom estudo!
Muito bom. Era isso mesmo. Coloquei umas três barras faltantes e tudo funcionou. Implementei também a diretiva minha-foto. Obrigado pela ajuda. Vamos em frente. Abs