我试图了解 angularjs/phonegap 的执行流程。我有 2 个视图：一个是列表视图，另一个是详细视图。当应用程序第一次启动时，首先显示列表视图，然后用户选择哪个列表项并显示记录在localStorage中的详细视图。下次启动应用程序时，它应该直接显示详细视图，而不是先显示列表视图。我使用以下代码并且正在工作，除非下次启动应用程序时，首先显示列表视图，然后快速显示详细视图。
索引.html：
<!-- Libs -->
<script type="text/javascript" src="phonegap.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<!-- App -->
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/routers.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script type="text/javascript">
app.initialize();
</script>
index.js：
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
//handle backbutton to exit app when on homepage
document.addEventListener('backbutton', function(e){
if(window.location.hash == '#/users' || window.location.hash == '#' || window.location.hash == ''){
e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
onDeviceReady: function() {
//app.startPage(); //listview then detailview
angular.element(document).ready(function() {
//app.startPage(); //listview only
angular.module('userdemo', []);
//app.startPage(); //listview only
angular.bootstrap(document, ['userdemo']);
//app.startPage(); //listview only
});
app.startPage(); //listview then detailview. if remove "route otherwise clause", show blank listview then detail template view, backbutton working
},
// decide which page to start with
startPage: function() {
var userId = window.localStorage.getItem("userId");
if(!userId) window.location.hash = '/users';
else window.location.hash = '/users/' + userId;
}
};
路由器.js：
angular.module('userdemo', ['userdemoFilters', 'userdemoServices']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/users',{
templateUrl: 'partials/user-grid.html',
controller: UserGridCtrl
}).
when('/users/:userId', {
templateUrl: 'partials/user-detail.html',
controller: UserDetailCtrl
}).
otherwise({redirectTo: //if removed, it shows black screen. backbutton working
'/users' //normal
//'/users/3' //show detail template only. backbutton not working
/*
function(routeParams, path, search) { //show detail template only. backbutton not working
var userId = window.localStorage.getItem("userId");
if(!userId) return '/users';
else return '/users/' + userId;
}*/
});
}])
.run(function($location) { //listview then detailview. if remove "otherwise" clause, blank screen, backbutton not working
//var userId = window.localStorage.getItem("userId");
//if(!userId) $location.hash('/users');
//else $location.hash('/users/' + userId);
});
用户细节控制（）：
function UserDetailCtrl($rootScope, $scope, $routeParams, User) {
//handle the case when the app is started from the last saved userId
if(!$rootScope.users)
$scope.users = User.query(function() {
for (var i=0; i<$scope.users.length; i++) {
var user = $scope.users[i];
if(!user.id) user.id = i;
}
$rootScope.users = $scope.users;
});
else
$scope.users = $rootScope.users;
$scope.user = $rootScope.users[$routeParams.userId];
}
用户详细信息.html：
<div class="container-fluid">
<div class="row-fluid">
<div>
<b>Hello {{user.name}}</b><br>
</div>
</div>
</div>
我尝试了其他可能的选择：
删除“否则路由条款”。它显示空白列表视图，然后显示未应用范围的详细模板视图（即字面意思是 Hello {{user.name}}）。
将 app.startPage() 放在不同的地方。在 document.ready 或 angular.bootstrap 调用周围、内部、之前、之后。如果在 document.ready 周围，它会显示 listview 然后是 detailview。如果在 document.ready 中，它只显示列表视图。
如注释代码所示，编写自定义“路由否则重定向到”函数。结果仅显示没有应用范围的详细信息模板。后退按钮也不起作用。
将初始化代码放入 module.run() 中，如注释代码所示。它显示列表视图，然后显示详细视图。如果删除“否则”子句，空白屏幕，后退按钮不起作用。
不改变其他，只需将“route else redirectTo”从“/users”替换为“/users/3”，它只显示详细模板视图。后退按钮不起作用。
他们都没有显示我想要的东西。Angular/Phonegap 专家可以解释为什么这些恰好更好地理解背后的机制吗？仅在应用程序的下一次启动时显示详细视图的正确解决方案是什么？