<!DOCTYPE html>
<html ng-app="app">
<head>
<!-- JQuery -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- JQuery-Mobile -->
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<!-- AngularJS Angular-route -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script data-require="angular-route@*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular-route.js"></script>
<!-- This Application -->
<script src="config.js" type="text/javascript"></script>
<script src="ajaxSimulator.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" />
<title>JQuery Mobile with AngularJS & Angular-Route</title>
</head>
<body>
<div class="pageContainer">
<h3><a href="http://www.outbottle.com" target="_blank">Outbottle.com</a></h3>
<h4>Integrating JQuery-Mobile with AngularJS and Angular-Route</h4>
<div ng-view=""></div>
</div>
</body>
</html>
/* breakpoint at 1000px, don't span full page width, 80% is plenty' */
@media all and (min-width:62.5em){
.pageContainer {
width:80%;
margin-left:10%;
margin-right:10%;
padding:0;
}
}
.block {
display:block;
}
.mb10px {
margin-bottom:10px;
}
.mt10px {
margin-top:10px;
}
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
var ngApp = angular.module('app', ['ngRoute']);
ngApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/create', {
templateUrl: 'create.html',
controller: 'createController'
}).
when('/view/:id', {
templateUrl: 'view.html',
controller: 'viewController'
}).
when('/edit/:id', {
templateUrl: 'edit.html',
controller: 'editController'
}).
when('/list', {
templateUrl: 'list.html',
controller: 'listController'
}).
otherwise({
redirectTo: '/list'
});
}]);
ngApp.directive('jqm', function($timeout) {
return {
link: function(scope, elm, attr) {
$timeout(function(){
elm.trigger('create');
});
}
};
});
var ajaxUtils = (function(){
function simulate(callbackFn) {
$.mobile.loading( "show", {
text: "Simulating an AJAX call",
textVisible: true,
textonly: false
});
setTimeout(function(){
$.mobile.loading( "hide" );
callbackFn();
},1000);
}
return {
simulate: simulate
};
})();
var personArray = [
{
id: 0,
name: 'John',
location: 'USA'
},
{
id: 1,
name: 'Mary',
location: 'Germany'
}
];
function getPerson(id) {
for( var i=0;i<personArray.length;i++) {
if(personArray[i].id == id)
return personArray[i];
}
return {
id: "",
name: "nf",
location: "loc"
};
}
ngApp.controller('listController',function($scope){
ajaxUtils.simulate(function(){
$scope.$apply(function(){
$scope.personArray = personArray;
});
$('ul.ngRepeat').listview('refresh');
});
});
ngApp.controller('viewController',function($scope, $routeParams, $location){
ajaxUtils.simulate(function(){
$scope.$apply(function(){
$scope.person = getPerson($routeParams.id);
});
});
$scope.delete = function(person) {
if(confirm("You sure?")) {
var index = $.inArray(person, personArray);
personArray.splice(index,1);
$location.path('/list');
}
};
});
ngApp.controller('editController',function($scope, $routeParams, $location){
$scope.person = getPerson($routeParams.id);
$scope.save = function() {
//model already updated
$location.path('/view/'+$scope.person.id);
};
});
ngApp.controller('createController',function($scope, $location){
//$scope.personArray = personArray;
$scope.person = {
id: personArray.length,
name: '',
location: ''
};
$scope.save = function() {
personArray.push($scope.person);
$location.path('/list');
};
});
<div jqm>
<div data-role="header" data-position="fixed" data-theme="b" >
<h1>Create</h1>
</div>
<div ng-include="'form.html'"></div>
</div>
<div jqm>
<div data-role="header" data-position="fixed" data-theme="b" >
<h1>Edit</h1>
</div>
<div ng-include="'form.html'"></div>
</div>
<div jqm>
<ul data-role="listview" data-inset="true">
<li class="ui-field-contain">
<label>
<span>Name</span>
<input type="text" ng-model="person.name" />
</label>
</li>
<li class="ui-field-contain">
<label>
<span>Location</span>
<input type="text" ng-model="person.location" />
</label>
</li>
<li class="ui-field-contain">
<button ng-click="save()">OK</button>
</li>
</ul>
<a class="block mt10px" href="#/list">List</a>
</div>
<div jqm>
<div data-role="header" data-position="fixed" data-theme="b" >
<h1>List</h1>
</div>
<ul class="ngRepeat" id="layoutList" data-role="listview" data-filter="true" data-filter-placeholder="Search people..." data-inset="true" data-autodividers="true">
<li ng-repeat="person in personArray">
<a href="#/view/{{person.id}}">{{person.name}}</a>
</li>
</ul>
<a class="block mt10px" href="#/create">Add New</a>
</div>
<div jqm>
<div data-role="header" data-position="fixed" data-theme="b" >
<h1>View</h1>
</div>
<label class="block mb10px">
<strong>Name</strong>
{{person.name}}
</label>
<label class="block">
<strong>Location</strong>
{{person.location}}
</label>
<div>
<a href="#/edit/{{person.id}}" class="ui-corner-all ui-btn ui-btn-inline ui-icon-edit ui-btn-icon-left">Edit</a>
<button ng-click="delete(person)" class="ui-corner-all ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left">Delete</button>
</div>
<a class="block" href="#/list">List</a>
</div>