无法通过其他文件实现温泉 (app.js)

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 文件时它才有效。

我正在使用其官方页面上的温泉 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，上面的代码只显示其中的超文本 text/like 没有 css（抱歉，我很难描述它并且Whosebug 禁止我 post 图片)

更正

我刚刚发现问题不是由 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 文件应该是这样的：

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

记得在 index.html 文件中包含你的 js 文件

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

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

无法通过其他文件实现温泉 (app.js)

Can't implement onsen through other file (app.js)

android

angularjs

cordova

onsen-ui