Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

ANGULARJS SEM FUNCIONAR

Referente ao curso AngularJS: crie webapps poderosas, no capítulo Construindo o alicerce da nossa aplicação e atividade Construindo o alicerce da aplicação

por Leandro Toscano Ferreira
| 146.3k xp | 44 posts
Desenvolvedor Java

No navegador aparece:

{{foto.titulo}}

Sem carregar o conteúdo da variável, que no caso seria Leão.

angular.module('alurapic').controller('FotosController', function($scope) {
    $scope.foto = {
        titulo = "Leão",
        url = "http://www.fundosanimais.com/Minis/leoes.jpg"
    };
});
<body ng-controller="FotosController">
        <div class="container">

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

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{{foto.titulo}}</h3>
                </div>
                <div class=panel-body>
                    <img class="img-responsive center block" src="{{foto.url}}" alt="{{foto.titulo}}">
                </div>
            </div> <!-- fim panel -->
        </div> <!-- fim container -->        
    </body>
4 respostas
por Leandro Toscano Ferreira
| 146.3k xp | 44 posts
Desenvolvedor Java

Troquei para a versão 1.7 do angular js e aparece o seguinte erro agora:

Error: [$controller:ctrlreg]

por Robert de Jesus
| 353.9k xp | 10 posts
Analista Programador (SRI)

Na sua página é necessário ter a diretiva ng-app em um elemento como <body> ou <html>. Você chegou a inserir a diretiva <html ng-app="alurapic">?

por Leandro Toscano Ferreira
| 146.3k xp | 44 posts
Desenvolvedor Java

Sim, está dessa forma:

<!DOCTYPE html>
<html lang="pt-br" ng-app="alurapic"> <!-- Importando o módulo principal para a VIEW -->

    <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">
        <!-- Importando o AngularJS -->
        <script src="js/lib/angular.min.js"></script>
        <!-- Importando a página principal que contém o módulo principal -->
        <script src="js/main.js"></script>
        <!-- Importando o controller de fotos -->
        <script src="js/controllers/fotos-controller.js"></script>
    </head>

    <body ng-controller="FotosController">
        <div class="container">

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

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{{foto.titulo}}</h3>
                </div>
                <div class=panel-body>
                    <img class="img-responsive center block" src="{{foto.url}}" alt="{{foto.titulo}}">
                </div>
            </div> <!-- fim panel -->
        </div> <!-- fim container -->        
    </body>

</html>
solução!
por Leandro Toscano Ferreira
| 146.3k xp | 44 posts
Desenvolvedor Java 
angular.module('alurapic', [])
angular.module('alurapic').controller('FotosController', function($scope) {
    $scope.foto = {
        titulo = "Leão",
        url = "http://www.fundosanimais.com/Minis/leoes.jpg"
    };
});