Prueba de jQueyMobile AngularJS y jquery-mobile-angular-adapter

by ocdemo

HTML

<div id="page1" data-role="page" ng-controller="Page1Ctrl">
	<div data-role="header">
        <h1>Page1 Header</h1>
    </div>
    <div data-role="content">
    	<ul data-role="listview">
    		<li><a href="page2/1">Option 1</a></li>
        	<li><a href="page2/2">Option 2</a></li>
        	<li><a href="page2/3">Option 3</a></li>
        </ul>
    </div>
    <div data-role="footer">
        <h1>Page1 Footer</h1>
    </div>
</div>

<div id="page2" data-role="page" ng-controller="Page2Ctrl">
    <div data-role="header">
        <h1>Page2 Header</h1>
    </div>
    <div data-role="content">
    	<p>You select option: {{option}}
    </div>
    <div data-role="footer">
        <h1>Page2 Footer</h1>
    </div>
</div>

CSS

</style> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.7/angular.js"></script> 
<script src="https://rawgithub.com/opitzconsulting/jquery-mobile-angular-adapter/master/compiled/jquery-mobile-angular-adapter.js" type="text/javascript"></script> 
</style>

JavaScript

var mod = angular.module("ngm", []);

mod.config(function($routeProvider) {
    $routeProvider
	.when('/', {
		templateUrl: '#page1'
	})
	.when('/page2/:option', {
		templateUrl: '#page2',
  		onActivate: 'setOption(option)',
  		jqmOptions: {transition:'slide'}
	})
	.otherwise({
		redirectTo: '/'
	});
});

mod.controller('Page1Ctrl', function($scope) {
    
});

mod.controller('Page2Ctrl', function($scope) {
    $scope.setOption = function(option) {
        $scope.option = option;
    }
});