JQuery - $ is not defined with Yeoman

Question

I am starting a new web application with Yeoman, and i would like to know why i can not access to $ elements. For example, i have this:

<ul id="collapse">
<li>asdas</li>
<ul id="collapse2">
    <li>sgdfg</li>
    <li>fdg</li>
    <li>dfg</li>
</ul>   
<li>asdasd</li>
<ul>
    <li>sgdfg</li>
    <li>fdg</li>
    <li>dfg</li>
</ul>

And i want to acces by id to the first ul:

var $collap = angular.element($('#collapse'));
var $collap = $('#collapse');

I think, i have well load the jquery lib, because yeoman do it for me, and i tryed this one:

if (window.jQuery) {  
    window.alert('si');
} else {
window.alert('no');

To know if jquery is load and it is load. i do not know what more i can try, i have read a lot about this kind of error but no one matches with mine. Here is my index:

[...]
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
 <script>
   !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
   (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
   r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
   }(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

   ga('create', 'UA-XXXXX-X');
   ga('send', 'pageview');
</script>

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script 
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<!-- endbower -->
<!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/about.js"></script>
    <!-- endbuild -->

This is what i get every time i try something new: '$' is not defined. If anyone could help me i would be very grateful.

I have also tryed with:

src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

And it still does not work.

Answer 1

Few things that you have to take care in your code.

First your are loading jQuery twice. Please load jQuery only once.

Second if your jQuery is loading asynchronously, this sometime create problem. It means your code is getting called first before jquery load. This is not correct. Please make sure your jQuery load before other calling methods.

Third, if you are using angular then use dependency injection feature to resolve '$' dependency in angular service or controller.