Using Jquery Library with Angularamd

Asked

Viewed 217 times

9

I am implementing Angularjs + Requirejs through Angularamd.

I want to add the Jquery library but returns the following error when using the "$":

Error: $ is not defined

I have the main.js configured as follows:

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']
});

What is wrong?

javascript angularjs requirejs
  • 1

    Loading jquery before angular changes something?

  • Otherwise, try to copy the jquery library to a folder RAIZ_DO_PROJETO/js/lib/jquery-1.11.2.js and exchange the conf for jquery: 'jquery-1.9.0'

  • @Gabrieloshiro already made these 2 modifications but still gives the same error. Just declare in require.config, right?

  • Ah, it is possible for Require.js to load "too fast" scripts, that is, before the DOM has been loaded. Take a look here. They propose the use of domReady. Warns if it works.

  • @Gabrieloshiro but the problem is not recognizing elements in the DOM, nor even recognizes the jquery. I did a test using setTimeout but returned the same error.

  • Philip what @Gabrieloshiro means that the moment you call the $(...), jquery has not yet been loaded, this is just an assumption

  • @Guilhermenascimento then, I understood. What I did was insert the "$(...)" inside a setTimeout and returned the same error, so it is not a loading problem, right?

  • As I said it was just an assumption and not an affirmation, just testing, you tried to change '//code.jquery.com/jquery-1.11.2.min.js', for 'http://code.jquery.com/jquery-1.11.2.min.js',?

  • @Guilhermenascimento yes I understand that it was just an assumption and I appreciate your time. I considered the hypothesis, so much so that I modified the code to test :)

  • @Guilhermenascimento discovered the problem, I have a ". js" at the end more, note that the others do not have, no need to insert the ". js" in the path.

  • @Gabrieloshiro discovered the problem, I have a ". js" at the end more, note that the others do not have, no need to insert the ". js" in the path.

  • @Guilhermenascimento I have more things, I created a "common.js" (intermediate between the main.js where I have require.config and the app.js where I have the settings of Angularjs) and inside I put a define with the dependencies: define(['angularAMD','jquery','jquery-migrate','angular','angular-ui-router'], Function... Recalling that I am implementing Requirejs with Angularamd: https://github.com/marcoslin/angularAMD

  • But jQuery has now loaded?

  • @Guilhermenascimento yes, loaded jquery without problems.

  • You can answer your own question :) Did you know? Click the answer button. If you have more questions during project creation you can create new questions.

  • @Guilhermenascimento yes, I will answer the question :)

  • Take a look at the jQuery.noConflict() https://api.jquery.com/jquery.noconflictdocumentation/

Show 12 more comments

2 answers

0

Try to put the jquery in the shim thus: 

shim: {
    "jquery": {
      exports: "jquery"
    }
  }

0

use angular.element instead of $

angular.element serves as an alias for the jQuery function if it is loaded.

If it is not loaded it will use the jQlite that comes coupled at the angle.

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

You can read a little more about the documentation in the link below: https://docs.angularjs.org/api/ng/function/angular.element

Browser other questions tagged javascript angularjs requirejs

You are not signed in. Login or sign up in order to post.