ANGULARJS SEM FUNCIONAR | AngularJS: crie webapps poderosas

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

por Leandro Toscano Ferreira

| 146.3k xp | 44 posts

Desenvolvedor Java

No navegador aparece:

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

06/09/2018

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)

06/09/2018

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

06/09/2018

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

06/09/2018

angular.module('alurapic', [])

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