angular 1.5 和 phonegap 中的控制器/路由答案

【问题标题】：controler/routing in angular 1.5 and phonegapangular 1.5 和 phonegap 中的控制器/路由
【发布时间】：2016-05-29 16:05:43
【问题描述】：

我正在尝试编写一个移动应用程序，该应用程序从远处的 json 检索信息并在其上循环以显示表格。

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

我在 phonegap 桌面（windows）上用 chrome 预览它
我从我的 android 的 phonegap 应用程序访问服务器
我使用node js等为模拟器本地构建应用程序：
```
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 顶部添加它来开始 angular

<html ng-app="caviApp">

在我之前引用的 3 个平台中（并且仅适用于 build.phonegap.com 中的菜单）有很多功能（菜单 + 路由）

我也只在

中尝试过类似的东西

\平台\浏览器\www\index.html 隔离android代码

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('caviApp', []);

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>

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

【问题讨论】：

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

【解决方案1】：

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

【讨论】：