Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Foto não é carregada durante o cadastro

Durante o cadastro de uma nova foto, ao digitar a url a imagem não é carregada na área reservada. O título da foto é apresentado corretamente durante a digitação.

Alguma sugestão?

Abaixo os códigos:

partials/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>

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.otherwise({redirectTo: '/fotos'});

    });

controllers/foto-controler

angular.module('alurapic')
    .controller('FotoController', function($scope, $http) {

        $scope.foto = {};
        $scope.mensagem = '';

        $scope.submeter = function() {

            if ($scope.formulario.$valid) {

                $http.post('/v1/fotos', $scope.foto)
                .success(function() {
                    $scope.mensagem = 'Foto cadastrada com sucesso';
                })
                .error(function(erro) {
                    console.log(erro);
                    $scope.mensagem = 'Não foi possível cadastrar a foto';
                })
            }
        };
    });
4 respostas
solução!

Há um exercício que cria a diretiva minha-foto que você não deve ter feito.

https://cursos.alura.com.br/course/angularjs-mvc/task/9058

Mostre-me o código do seu arquivo minhas-diretivas.js para eu ver se implementou ou não.

Realmente Flávio, faltava criar a diretiva. Obrigado pela ajuda.

Em tempo, existe alguma ferramenta que nos ajude a descobrir esse tipo de erro? Durante o curso estou sentindo falta de algo que ajude o desenvolvedor a descobrir erros como esse, ou digitação incorreta, etc.

Aproveitando a oportunidade, no início do curso você cita que o backend utiliza Express para criar endpoints REST e o NeDB como banco de dados. Existem cursos no Alura sobre esses temas?

Quando não há erro no console e a diretiva não é renderizada é porque não foi registrada.

Com o tempo você pega os macetes.

Existe o curso de mean que ensina a criar apis com express e mongo.

Sucesso e bom estudo.