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,

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software