角度1.5和phonegap中的控制器/路由

时间:2016-05-29 16:05:43

标签: android angularjs cordova phonegap-build phonegap-desktop-app

我试图对移动应用程序进行编码,该应用程序从远处的json检索信息并在其上循环以显示表格。

当我使用build.phonegap.com时,整个东西都不起作用,但在以下情况下工作:

  • 我在chrome
  • 的phonegap桌面(窗口)上预览它
  • 我从我的android
  • 中的phonegap应用程序访问服务器
  • 我使用节点js构建了模拟器localy的应用程序,依此类推:

    phonegap run android --verbose
    

其他角度功能似乎有效。例如,为了显示菜单当前处于活动状态,我使用:

<a href="#home" ng-click="menu='home'" ng-class="{active: menu=='home'}" class="nav-link icon-list-first"></a>
<a href="#page" ng-click="menu='page'" ng-class="{active: menu=='page'}" class="nav-link icon-list-second"></a>

所以我猜测角度是

我试图通过在index.html的顶部添加它来启动角度

<html ng-app="caviApp">

我之前引用过的3个平台的功能很丰富(菜单+路由)(仅适用于build.phonegap.com中的菜单)

我也只在

中试过这样的东西
  

\平台\浏览器\ WWW \ index.html的   隔离安卓代码

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var domElement = document.getElementById('html');
        angular.bootstrap(domElement, ["caviApp"]);

        console.log('Received Event: ' + id);
    }
};

带有空的html开场标记

<html>

但是在这个解决方案中,没有任何工作,既没有菜单,也没有路由。

我使用此代码进行路由: var app = angular.module(&#39; caviApp&#39;,[]);

app.controller('TableListCtrl', function ($scope, $http) {
    $http.get('http://www.myndd.com/myfile.json').success(function (data) {
        $scope.mydatas = data;
    })
    $scope.orderProp='age';
});

如果需要我的html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <mete name="viewport"
          content="user-scalable=no, initiale-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi"/>
    <title>Hello world</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/angular.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="js/controllers.js"></script>

</head>
<body >
<nav class="nav">
    <a href="#home" ng-click="menu='home'" ng-class="{active: menu=='home'}" class="nav-link icon-list-first"></a>
    <a href="#page" ng-click="menu='page'" ng-class="{active: menu=='page'}" class="nav-link icon-list-second"></a>
</nav>
    <section class="view panel" ng-controller="TableListCtrl">
        <ul>
        <li ng-repeat="mydata in mydatas">
            <lignedata class="lignedatacss">
                <etique class="etiquettedata">
                    <img class="etiquette" src="{{mydata.img}}" />
                </etique>
                <descriptif class="descriptifdata">
                    <p class="title">{{mydata.name}}</p>
                    <p class="sub-title">{{mydata.ref}}</p>
                </descriptif>
            </lignedata>
        </li>
    </ul>
        <p>Total number of items: {{mydatas.length}}</p>
    </section>
</body>
</html>

所以我想我的问题是一个电话间隙而不是角度问题......

1 个答案:

答案 0 :(得分:0)

我通过使用自己的计算机进行编译解决了这个问题。我也不知道为什么,但是通过在phonegap cli上创建另一个项目,它也有效。