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

Imagens não aparecem ao usar o ng-route

Faço todos os paços como no vídeo, mas na hora que acesso a url localhost:3000/#/fotos no navegador as fotos não aparecem. Só aparece o título Alurapic e o input text.

No console do navegador um erro é mostrado:
angular.js:11655 Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=FotosController&p1=not%20aNaNunction%2C%20got%20undefined
    at http://localhost:3000/js/lib/angular.min.js:6:417
    at Rb (http://localhost:3000/js/lib/angular.min.js:19:510)
    at sb (http://localhost:3000/js/lib/angular.min.js:20:78)
    at http://localhost:3000/js/lib/angular.min.js:75:396
    at link (http://localhost:3000/js/lib/angular-route.min.js:7:268)
    at $ (http://localhost:3000/js/lib/angular.min.js:70:197)
    at B (http://localhost:3000/js/lib/angular.min.js:59:255)
    at g (http://localhost:3000/js/lib/angular.min.js:51:335)
    at http://localhost:3000/js/lib/angular.min.js:50:444
    at http://localhost:3000/js/lib/angular.min.js:52:322

Seguem os códigos:

View:

<!DOCTYPE html>
<html lang="pt-br" ng-app="alurapic">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Alurapic</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/efeitos.css">
        <script src="js/lib/angular.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/controllers/fotos-controller.js"></script>
        <script src="js/directives/minhas-diretivas.js"></script>
        <script src="js/lib/angular-animate.min.js"></script>
        <script src="js/lib/angular-route.min.js"></script>
    </head>
    <body ng-controller="FotoController">
        <div class="container">
            <ng-view></ng-view>
        </div>      
    </body>
</html>

Principal.html

<div class="jumbotron">
    <h1 class="text-center">Alurapic</h1>    
</div>

<div class="row">
    <div class="col-md-12">
        <form>
            <input ng-model="filtro" ng-model-options="{debounce: 500}" 
            class="form-control" placeholder="Filtrar">
        </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}}">
    </meu-painel>
</div>

main.js

angular.module('alurapic', ['minhasDiretivas', 'ngAnimate', 'ngRoute'])
.config(function($routeProvider) {

    $routeProvider.when('/fotos', {
        templateUrl: 'partials/principal.html',
        controller: 'FotosController'
    });

});
2 respostas
solução!

O seu controller é FotosController, como está no main.js ou FotoController como está no index.html?

O erro que você enviou indica erro no nome do Controller. Tenta verificar isso que te falei.

Outra coisa, se você está usando a definição do controller na rota, você não deveria estar usando um controler no body, pois quando você utilizar outras rotas, provavelmente você vai definir outros controllers para elas, e definindo o controller no body pode te atrapalhar nesse processo.

O melhor é declarar na declaração das rotas mesmo.

Descobri o erro, foi apenas semântica. ao criar o Controller, nomeei-o de FotoController mas no meu main.js coloquei o controller como FotosController (com s), ou seja. O controller da rota estava diferente do nome declarado no controller.

Solução:

Mudei de o nome do controller para FotosController e ajustei na view, quando rodei, tudo funcionou:

De:

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

Para:

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