【发布时间】：2015-04-21 13:03:01
【问题描述】：
我尝试了将 stackoverflow 上的所有解决方案更改为使用绝对路径，但在 windows phone 8.1 中仍然没有发生路由。实际上问题出在 templateUrl 上，给出的 url 不是从 stateProvider 中挑选的，但如果我直接给出模板：'' 它渲染得很好。我希望它与 templateUrl 一起使用。
下面是我从 IBM 的多页示例应用程序中获得的代码：多页示例项目我做了一些修改，它适用于 jQuery，但不适用于 AngularJS。
我的代码放在这里：
var module = angular.module("simpleApp",['ui.router','appControllers','projectControllers']).config(["$stateProvider","$urlRouterProvider",function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/home");
$stateProvider.state("home",{
url: "/home",
templateUrl:changeTemplateUrls('home.html')
controller: 'homeController'
})
.state("project1",{
url: "/project1",
templateUrl:changeTemplateUrls('project1.html'),
controller: 'project1Controller'
});
function changeTemplateUrls(name){
var path = "";
if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
path = "www/default/";
}
var url = path+"app/partials/"+name;
return url;
}
}]);
var appControllers = angular.module("appControllers",[]);
appControllers.controller('homeController',['$scope','$state','$stateParams',function($scope,$state,$stateParams){
$scope.greeting = "Welcome Home";
}]);
var projectControllers = angular.module("projectControllers",[]);
projectControllers.controller('project1Controller',['$scope',function($scope){
$scope.greeting = "Welcome to Project 1";
}]);
projectControllers.controller('project2Controller',['$scope',function($scope){
$scope.greeting = "Welcome to Project 2";
}]);<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" ng-csp lang="en">
<head>
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta charset='utf-8'>
<title>Angular Test</title>
<!-- Uncomment for PhoneGap App -->
<!-- <script src="cordova.js"></script> -->
<!-- Link in CSS -->
<link rel="stylesheet" href="app/css/main.css" />
<!-- Link jQuery, then Angular, then the rest of my scripts -->
<script src="app/libs/jquery-2.0.3.min.js"></script>
<script>jQuery.isUnsafe = true;</script>
<!-- Angular Version 1.2.0 -->
<script src="http://jsconsole.com/remote.js?VARADAUNIQUE"></script>
<script src="app/libs/angular.js"></script>
<script src="app/libs/angular-route.js"></script>
<script src="app/libs/angular-ui-router.js" type="text/javascript"></script>
<script src="js/main.js"></script>
<script src="app/js/main.js"></script>
<script src="app/js/app.js"></script>
<script src="app/js/controllers.js"></script>
<!-- For Phonegap Apps, use deviceready -->
<script>
window.onload = function() {
angular.bootstrap(document,["simpleApp"]);
// document.addEventListener('deviceready', function () {
// angular.bootstrap(document,["simpleApp"]);
//},false);
};
</script>
</head>
<body>
<nav class="simpleNav">
<a href="#/home">Home</a>
<a href="#/project1">Project 1</a>
<a href="#/project2">Project 2</a>
</nav>
<div ui-view></div>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
<script type="text/ng-template" id="app/partials/home.html">
<div class="home">
<span class="message" >
{{greeting}}
</span>
</div>
</script>
<script type="text/ng-template" id="app/partials/project1.html">
<div class="project1">
<span class="message">
{{greeting}}
</span>
</div>
</script>
和模板在那里 应用程序/partials/home.html 应用程序/partials/project1.html index.html
我已经控制台记录了即将到来的 windows mobile 中的路径
www/default/app/partials/home.html
试过了
/www/default/app/partials/home.html
并尝试了所有路径的排列和组合
但是没有选择模板并且没有加载 home.html 本身。
【问题讨论】：
-
IBM MobileFirst 7.0 版已解决此问题。这是科尔多瓦问题。如果您升级到 MobileFirst 7.0 版，您将不会遇到相同代码库的这个问题。不需要绝对路径。
标签： angularjs windows-phone-8.1 ibm-mobilefirst