Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

13
respostas

Erro ao criar o controller

Ao criar o controller, está sendo exibido as seguintes mensagens de erro:

" 2 JSLint Problems × 1 'angular' was used before it was defined. angular.module('alurapic').controller('FotosController', function ($scope) { 3 Missing 'use strict' statement. $scope.foto = { "

Código:

<!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">
        <script src="js/lib/angular.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/controllers/FotosController.js"></script>


    </head>
    <body ng-controller="FotosController">


        <div class="container">
           <h1 class="text-center">Alurapic</h1>
           <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
        </div><!-- fim container -->


    </body>
</html>
angular.module('alurapic').controller('FotosController', function ($scope) {

    $scope.foto = {
        titulo : 'Leão',
        url : 'http://www.fundosanimais.com/Minis/leoes.jpg'
    };

});
13 respostas

tenta colocar assim

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

"use strict";

 $scope.foto = {
        titulo : 'Leão',
        url : 'http://www.fundosanimais.com/Minis/leoes.jpg'
    };

});

este erro parece acontecer por que não foi declarado o modulo principal.

ex: angular.module('alurapic', []);

Obrigado pela resposta, Thadeu. Mas não resolveu. Ainda retornou mais um erro.

3 JSLint Problems × 1 'angular' was used before it was defined. angular.module('alurapic').controller('FotosController', function ($scope) {

3 Expected 'use strict' at column 5, not column 1. "use strict";

5 Expected '$scope' at column 5, not column 2. $scope.foto = {

o use strict resolvi. Era isso mesmo, Thadeu.

Falta o outro:

'angular' was used before it was defined. angular.module('alurapic').controller('FotosController', function ($scope) {

Ninguém?

Angular é um global. Você precisa indicar isso para o jshint. Consulte a documentação desse linter para dar uma pista para ele que Angular é Global.

Exemplos

https://stackoverflow.com/questions/17709657/how-to-tell-jslint-jshint-what-global-variables-are-already-defined

https://stackoverflow.com/questions/20837139/jshint-r10-angular-is-not-defined

Sugiro usar no seu pipeline apenas as ferramentas que você domina e ir gradativamente colocando novidades.

No curso em nenhum momento uso jshi t. Quando modificar o projeto deixe isso claro para não confundir quem quer te ajudar.

Obrigado pela resposta, Flávio, mas não modifiquei nada. O código foi escrito exatamente como nos exemplos.

Refiz mais uma vez, copiei e colei e o problema persiste.

Ah, estou usando o brackets.

Você está usando jshint. Não? brackets deve estar usando. Desabilita ou segue o que eu disse antes.

Use apenas ide ou editores que você domina. Caso contrário quebrará a cabeça com ele em vez de focar no curso.

Talvez você tenha ativado algum plugin de lint.

Veja a mensagem que você recebe

 JSLint Problems

Seu lint que você nem sabia que estava ativo não sabe que Angular é Global.

Vou explicar como proceder caso não consiga desativa-lo.

Veja a documentação

http://jshint.com/docs/

Quando se usa um lint você precisa indicar via comentário que tal variável é um global. Não há erro no seu código, mas desconhecimento de um detalhe especifico do lint.

Exemplo tirado da documentação

* jshint undef: true, unused: true */
/* globals angular */

Mas jslint quer que globais estejam em caixa alta e angular é caixa baixa.

O mais bizarro é que jslint caiu em desuso, a comunidade tem usado jshint.

Mas além disso você terá que ler a documentação do jshint para escrever código de acordo com as regras dele. Caso contrário receberá milhares de mensagem de erros.

Sugiro desabilitar esse recurso até que você o domine por completo, caso contrário ele o atrapalhará no curso.

Conseguiu com as orientações?

Oi Felipe! Conseguiu? Viu a questão do comentário especial para ensinar para o lint que Angular é Global?

Felipe, verifica se vocÊ importou o controller correto.

De:

<script src="js/controllers/FotosController.js"></script>

Para:

<script src="js/controllers/foto-controller.js"></script>

atte,