How to use Onsen UI + Monaca + jQuery

I'm new with Onsen UI. I'm using Monaca and I'm trying to work with jQuery.

Below you can check my HTML page and JS script.

index.html

<!DOCTYPE HTML>
<html lang="pt-br" app="nowa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="components/loader.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="right" type="overlay" max-slide-distance="200px">
</ons-sliding-menu>
</body>
</html>

page1.html

<ons-page>
    <ons-toolbar>
        <div class="right">
            <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
        </div>
        <div class="center">TEST</div>
        </ons-toolbar>    
        <div ng-controller="menu">
            <div id="test">HELLO!</div>
            <ons-row align="center" style="border: 1px solid red;">
                <ons-col>
                    <div>
                        <div class="circle perfil-icone"></div>
                        <div>ICON 1</div>
                    </div>
                </ons-col>
                <ons-col>
                    <div>
                        <div class="circle exame-icone"></div>
                        <div>ICON 2</div>
                    </div>
                </ons-col>

                <ons-col>
                    <div>
                        <div class="circle alerta-icone"></div>
                        <div>ICON 3</div>
                    </div>
                </ons-col>
            </ons-row>
            <p></p>
            <ons-row align="center" style="border: 1px solid red;">
                <ons-col>
                    <div>
                        <div class="circle favorito-icone"></div>
                        <div>ICON 4</div>
                    </div>
                </ons-col>
                <ons-col>
                    <div>
                        <div class="circle lab-icone"></div>
                        <div>ICON 5</div>
                    </div>
                </ons-col>
                <ons-col>
                    <div>
                        <div class="circle rota-icone"></div>
                        <div>ICON 6</div>
                    </div>
                </ons-col>
            </ons-row>
        </div>
</ons-page>

app.js

ons.bootstrap();
//ons.disableAutoStatusBarFill();  // (Monaca enables StatusBar plugin by default)

var app = angular.module('nowa', [ 'ngTouch', 'onsen.directives']);

app.controller('menu',function($scope){
    $(function(){
        alert("OI");
        $("#test").html(" USERNAME!");
    });
});

The issue is that alert and html commands in javascript code don't work. What is the issue here? How to use Onsen with Jquery?

Solution

Either you have to manually include the jQuery.js in the HTML tag or you'd have to add the Monaca's jQuery Mobile component under "Config" tab (on Monaca IDE) JS/CSS components.