Question

我正在制作一个示例应用程序，以学习如何使用cordova，phonegap，angular.js和onsen ui。 CodeSchool的一个很好的教程视频关于angular.js和这个示例应用程序（https://github.com/andipavllo/Google-Maps-Onsen-UI-Sample）表明我们可以通过将var app = angular.module ('app',['onsen]);放在另一个文件中来实现我们的应用程序。

我已经尝试但它不起作用。 仅当我将var app = angular.module ('app',['onsen']);放入html文件时才有效。

我正在使用官方网页上的onsen ui文件。我把这些文件放在它应该是（lib / onsen）的地方和lib / onsen / js中的app.js。

这是我的代码：

的index.html

<!doctype html>
<html lang="id" ng-app = "apk">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">

  <title>Sample App</title>  

  <link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
  <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">  
  <link rel="stylesheet" href="styles/app.css"/> 

  <script src="lib/onsen/js/angular/angular.js"></script>    
  <script src="lib/onsen/js/onsenui.js"></script>
  <script src="cordova.js"></script>
  <script type="text/javascript" src="lib/onsen/js/app.js"></script> 

</head>

<body>

<ons-split-view 
    var="splitView"
    secondary-page="secondary.html" 
    main-page="main.html" 
    main-page-width="60%" >
  </ons-split-view>

  <ons-template id="secondary.html">
    <ons-page style="border-right: 1px solid #ddd;text-align:center; vertical-align:middle">
        <ons-toolbar style="background-color: #ffff99;"></ons-toolbar>
        <table style="width:100%;height:100%;">
            <tr>
                <td style="vertical-align:middle;text-align:center">Welcome, please choose your language</td>
            </tr>
        </table>
    </ons-page>
  </ons-template>

  <ons-template id="main.html" ng-controller="ApkController as apkctrl">
    <ons-page >
        <ons-toolbar style="background-color: #ffff99;">
            <div class="left">Choose Language</div>
        </ons-toolbar>
            <table style="width:100%;height:100%;text-align:center;vertical-align:middle;">
                <tr>
                    <td><ons-button ng-click="apkctrl.pilbhs = 1" >Bahasa</ons-button></td>
                </tr>
                <tr>
                    <td><ons-button ng-click="apkctrl.pilbhs = 2" >English</ons-button></td>
                </tr>
                <tr>
                    <td>isi apkctrl.pilbhs : {{apk.pilbhs}}</td>
                </tr>
            </table>
    </ons-page>
  </ons-template>

app.js

var app = angular.module('apk', ['onsen']);
ons.bootstrap().controller('ApkController', function ($scope) {

            this.pilbhs = indo;
    });

    var indo = 0;

而不是像这里显示应用程序：http://codepen.io/fadynoor/pen/XbrzeB，上面的代码只显示高效文本/没有css（对不起，我很难描述它，stackoverflow禁止我发布图像）< / p>

校正

我刚刚发现问题不是由var app代码引起的。它是由我在app.js中添加的数组中的数组变量引起的。

我的数组中的数组代码是这样的：

var assawrah = [
    {
       number : '78',
       name : 'An-Naba',            
    },
    {
        number : '79',
        name : 'An-Naaziaat',
    },
    {
        number : '80',
        name : 'Abasa',
    },
    {
        number : '81',
        name : 'At-Takwir',
    },
    {
        number : '82',
        name : 'Al-Infithar',
        konten : [
            {
                latinINA : [{

                    }],
                latinEN : [{

                    }],
                terjemahanINA : [{

                    }],
                terjemahanEN : [{

                    }];
            }];
    }];

Answer 1

我看到你正在使用我的示例应用程序，所以我想我可以帮助你解决这个问题。您已声明ng-app="apk"，因此您的js文件应为：

＆＃13;

var app = angular.module('apk', ['onsen']);
    
    app.controller('MyController', function($scope){
      
        //Controller code
});

＆＃13;

请记住将您的js文件包含在index.html文件

中

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

我建议您不要将自己的脚本放在lib文件夹中，而是创建自定义文件夹。

无法通过其他文件（app.js）

1 个答案: