9

Estou a implementar AngularJS + RequireJs através do AngularAMD.

Quero adicionar a biblioteca Jquery mas retorna o seguinte erro quando uso o "$":

Error: $ is not defined

Tenho o main.js configurado da seguinte forma:

require.config({
    baseUrl: "js/",

    // alias libraries paths
    paths: {
        'angular': 'libs/angular.min',
        'angular-route': 'libs/angular-route.min',
        'angular-ui-router': 'libs/angular-ui-router.min',
        'angularAMD': 'libs/angularAMD',
        'jquery': '//code.jquery.com/jquery-1.11.2.min.js',
        'jquery-migrate': '//code.jquery.com/jquery-migrate-1.2.1.min.js'
    },

    // Add angular modules that does not support AMD out of the box, put it in a shim
    shim: {
        'angular-route': [ 'angular' ],
        'angularAMD': [ 'angular' ],
        'angular-ui-router': [ 'angular' ]
    },

    // kick start application
    deps: ['app']
});

O que está errado?

17
  • 1
    Carregando o jquery antes do angular muda alguma coisa? Commented 21/04/2015 às 18:33
  • Senão, tenta copiar a biblioteca jquery para uma pasta RAIZ_DO_PROJETO/js/lib/jquery-1.11.2.js e troca a conf para jquery: 'jquery-1.9.0' Commented 21/04/2015 às 18:43
  • @GabrielOshiro já fiz essas 2 modificações mas continua a dar o mesmo erro. Basta apenas declarar no require.config, certo? Commented 21/04/2015 às 18:59
  • Ah, é possível que o Require.js carregue os scripts rápido "demais", ou seja, antes do DOM ter sido carregado. Dá uma olhada aqui. Eles propõem o uso de domReady. Avisa se funcionar. Commented 21/04/2015 às 21:18
  • @GabrielOshiro mas o problema não é reconhecer elementos no DOM, nem sequer reconhece o jquery. Fiz um teste usando o setTimeout mas retornou o mesmo erro. Commented 21/04/2015 às 22:07

2 Respostas 2

0

Tente colocar o jquery no shim assim:

shim: {
    "jquery": {
      exports: "jquery"
    }
  }
1
  • ou exports: "$" Commented 24/06/2015 às 11:39
0

utilize angular.element ao invés de $

angular.element serve como um alias para a função jQuery caso ele esteja carregado.

Caso não esteja carregado ele vai utilizar o jQlite que vem acoplado no angular.

$('xxx')
angular.element('xxx')

Você pode ler um pouco mais a repeito na documentação no link abaixo: https://docs.angularjs.org/api/ng/function/angular.element

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .