Question

我一直在尝试使用Worklight和AngularJS构建混合Web应用程序，但我无法在设备上进行导航工作。我有一个简单的主屏幕，只有一个按钮。单击此按钮后，我将转到第2页（serviceList页面）。当我按下按钮时没有任何反应。实际上我现在在页面上有两个按钮，一个使用<a href>标签，另一个使用ng-click="viewServiceTickets()"，在viewServiceTickets（）函数中我使用$location.path('serviceList');（也尝试过'/ serviceList '和'＃/ serviceList'正如一些人所建议的那样）但无济于事。

如果我运行它：

在预览模式下 - 它可以正常工作
在移动浏览器模拟器中 - 它可以正常工作
在iOS模拟器中 - 它可以正常工作
在iOS设备上 - IT FAILS（即当我按下按钮或<a href时，没有任何反应，我在日志中看不到任何错误。

我的角度配置看起来像这样

var serviceApp = angular.module('serviceApp', ['ngRoute', 'ngTouch']);
var serviceControllers = {};
serviceApp.controller(serviceControllers);

serviceApp.config(function ($compileProvider){
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});

//This configures the routes and associates each route with a view and a controller
serviceApp.config(function ($routeProvider) {
    $routeProvider
        .when('/',
            {
                controller: 'HomePageController',
                templateUrl: 'views/HomePage/homePage.html'
            })
        .when('/serviceList',
            {
                controller: 'ServiceTicketListController',
                templateUrl: 'views/ServiceTicketList/serviceTicketList.html'
            })
        .otherwise({ redirectTo: '/' });
});

我的main.js文件有

function wlCommonInit(){
    document.addEventListener("deviceready", onDeviceReady, true);
}


function onDeviceReady() {
    angular.bootstrap(document);

}

主页非常简单

<div id="splashPage">
    <div>
        <h2>Service Ticket Viewer</h2>
        <button type="button"  data-ng-click="viewServiceTickets()">View Service Tickets</button>
        <div class="mainBtnContainer"> 
            <a href="#/serviceList" >
                <img src="images/technical-support.png">
            </a>
        </div>

    </div>
</div>

最后我的控制器是

serviceControllers.HomePageController = function ($scope, $location, $window, TicketService) {


    $scope.currentServiceTicket = {};    

    init();

    function init() {
        console.log("Initialisation of HomePageController complete");
    }

    $scope.viewServiceTickets = function() {
        //$locationProvider.html5Mode(true);
        $location.path("/serviceList");
    };

    $scope.goBack = function() {
        console.log("Going Back");
        $window.history.back();
    };


};

我已经看过并尝试了一些似乎对我不起作用的建议：

我忘了添加我的主index.html页面。所有页面片段都使用data-ng-view指令注入div。

<!DOCTYPE HTML>
<html data-ng-app="serviceApp">
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">


<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/main.css">

<script>window.$ = window.jQuery = WLJQ;</script>

<script src="js/angularjs/angular.js"></script>
<script src="js/angularjs/angular-touch.js"></script>
<script src="js/angularjs/angular-route.js"></script>
<script src="js/angularjs/angular-animate.js"></script>

</head>
<body style="display: none;">

    <div>
        <div data-ng-view=""></div>
    </div>

    <script src="js/initOptions.js"></script>
    <script src="js/main.js"></script>
    <script src="js/messages.js"></script>

    <script src="js/router.js"></script>

    <!-- Controllers -->
    <script src="views/HomePage/homePageController.js"></script>
    <script src="views/ServiceTicketList/serviceTicketListController.js"></script>
    <script src="views/ServiceTicketDetails/serviceTicketDetailsController.js"></script>

    <!-- Services -->   
    <script src="js/models/serviceTickets.js"></script>


</body>
</html>

我正在使用Worklight Studio 6.1和angularjs 1.2.13

有什么想法吗？我确信（希望）我已经完成/没有做过傻事。

Answer 1

咄!!实际上傻了。知道它必须是简单的东西。

由于日志中没有显示任何错误，因此我需要一段时间才能跟踪。我附加了Safari web instpector，什么都没看到。然后我用切换到调试器并在“所有异常”上设置断点，然后我看到错误“找不到文件”

问题是Web和iOS模拟器对文件名不区分大小写，而设备区分大小写。所以只是文件名中的拼写错误。

对我来说这是个好消息，因为Angular是管理双向数据绑定的好方法，也是SPA中的路由，可以很好地与Worklight配合使用，而不需要JQuery / Dojo等。

Answer 2

此IMO与AngularJS没有多大关系...而您当前用于在页面之间导航的方式实际上应该在您的Worklight应用程序中任何地方失败。

我建议您首先阅读为此目的提供的培训材料，并了解Worklight作为单页应用程序的概念。

您不得使用<a href="pages/page2.html">之类的内容在应用程序中的页面之间导航。通过这样做，您可以从应用程序的主HTML文件（index.html）导航远离，从而丢失Worklight上下文。正是这个“上下文”，基本上所有HTML文件中引用的CSS和JS文件都将应用程序粘合在一起。当这种损失发生时，应用程序将停止运行。

阅读：Building a multi-page application（sample）

现在还有很多关于这个问题的问题，看看这些问题并在必要时搜索其他问题：

另请参阅以下示例项目他们没有使用AngularJS，而是通过使用jQuery的load或jQuery Mobile的changePage / pageShow来解释如何在基于Worklight的应用程序中的页面之间导航。

除此之外，只要您在页面之间正确导航，您就可以添加任何您想要的框架来构建您的应用程序，无论是AngularJS还是其他。

另请注意，完全不需要deviceready的eventListener。您已达到wlCommonInit()并且您的代码正在执行的事实意味着Cordova（Worklight框架的一个组成部分）已成功加载并且已在内部调用deviceready。您应该删除此eventListener。

如何在Worklight中使用angularjs路由？

2 个答案: