I used angularjs and phonegap tools together in my application. It works great and i never face any issue while converting app into ios or apk. but when i trying to used jquery mobile within my applications it doesn't work. i read question about this, posted on stack overflow and trying to understand answer given by experienced people. but i can't found any minimal solutions for that. so please help me, what is the best way to implement application using angularjs, jquery and mobile jquery. Give me some important links where i found best solutions for that. similar question
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Project Structure</title>
<link type="text/css" rel="stylesheet" href="styles/app.css">
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/ngStorage/ngStorage.min.js"></script>
<script type="text/javascript" src="node_modules/moment/moment.js"></script>
<script type="text/javascript" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="node_modules/underscore/underscore-min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
<script type="text/javascript" src="scripts/controllers/mainCtrl.js"></script>
<script type="text/javascript" src="scripts/controllers/trackVehicleCtrl.js"></script>
<script type="text/javascript" src="scripts/controllers/complaintCtrl.js"></script>
<script type="text/javascript" src="scripts/controllers/commentCtrl.js"></script>
<script type="text/javascript" src="scripts/controllers/plannerCtrl.js"></script>
<script type="text/javascript" src="scripts/factory/complaintService.js"></script>
<script type="text/javascript" src="scripts/factory/commentService.js"></script>
<script type="text/javascript" src="scripts/factory/loginService.js"></script>
<script type="text/javascript" src="scripts/factory/shareData.js"></script>
</head>
<body>
<div id="view">
<div ng-view></div>
</div>
<script type="text/javascript">
angular.element(document).ready(function () {
angular.bootstrap(document, ['sanskritiSchool']);
});
</script>
</body>
</html>
app.js
angular.module("sanskritiSchool", ["ngRoute", "ngStorage"])
.config(["$routeProvider", function ($routeProvider) {
$routeProvider
.when("/login", {
templateUrl: "views/login.html",
controller: "mainCtrl"
})
.when("/categoryMenu", {
templateUrl: "views/categoryMenu.html",
controller: "mainCtrl"
}
})
.when("/trackVehicle", {
templateUrl: "views/trackVehicle.html",
controller: "trackVehicleCtrl"
})
.otherwise({
redirectTo: "/categoryMenu"
});
}
])
categoryMenu.html
<div class="row">
<div class="cmplLogoHeader">
<div class="col-xs-3 col-lg-offset-4 col-lg-1" style="text-align:center">
<h2 class="cmplLogo"><a ng-href="#/categoryMenu" class="btnHome"><span class="fa fa-university"></span></a></h2>
</div>
<div class="col-xs-6 col-lg-2" style="text-align:center">
<h2 class="cmplLogo">SRGS</h2>
</div>
<div class="col-xs-3 col-lg-2" style="text-align:center">
<a href="#" class="logout" ng-click="logout()"><span class="fa fa-sign-out"></span></a>
</div>
</div>
</div>
<div class="mainCategory row" style="margin-top:80px;">
<div class="1 col-lg-offset-4 col-lg-4 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 col-xs-12 removePadding">
<button type="button" class="btn btnCategory" ng-click="getComplaints()">
<span ng-show="!showComplaints"><i class="fa fa-pencil-square-o spinning"></i></span>
<span ng-show="showComplaints"><i class="fa fa-pencil-square-o"></i></span>
Complaints
</button>
</div>
<div class="2 col-lg-offset-4 col-lg-4 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 col-xs-12 removePadding">
<button type="button" class="btn btnCategory" ng-click="getPlanner()">
<span ng-show="!planner"><i class="fa fa-calendar spinning"></i></span>
<span ng-show="planner"><i class="fa fa-calendar"></i></span>
Planner
</button>
</div>
<div class="3 col-lg-offset-4 col-lg-4 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 col-xs-12 removePadding">
<a class="btn btnCategory" ng-href="#/trackVehicle">
<span ng-show="!aa"><i class="fa fa-history spinning"></i></span>
<span ng-show="aa"><i class="fa fa-history"></i></span>
Track Vehicle
</a>
</div>
<div class="4 col-lg-offset-4 col-lg-4 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4 col-xs-12 removePadding">
<button type="button" class="btn btnCategory" ng-click="getTimetable()">
<span ng-show="!timetable"><i class="fa fa-arrows spinning"></i></span>
<span ng-show="timetable"><i class="fa fa-arrows"></i></span>
Timetable
</button>
</div>
When i update my index.html and trying to run app, it doesn't run.
Updated index.html
<link type="text/css" rel="stylesheet" href="styles/app.css">
<link type="text/css" rel="stylesheet" href="node_modules/jquery/dist/jquery.mobile.css">
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.mobile.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
