無法通過其他文件實現onsen（app.js）

我正在製作示例應用程序以瞭解如何使用cordova，phonegap，angular.js和onsen ui。一個來自CodeSchool的關於angular.js的好教程視頻和這個示例應用程序（https://github.com/andipavllo/Google-Maps-Onsen-UI-Sample）表明我們可以通過將var app = angular.module ('app',['onsen]);放入另一個文件來實現我們的應用程序的onsen。無法通過其他文件實現onsen（app.js）

我試過了，但它不起作用。 它只有當我把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，上面的代碼只顯示hypertexted文/像它（抱歉，這是我很難形容它和計算器禁止我張貼圖片）

修正

我沒有CSS只是認爲問題不是由var應用代碼造成的。它是由在app.j中添加的數組中的變量引起的。

我的陣列式陣列的代碼是這樣的：

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 : [{ 

        }]; 
      }]; 
    }];

來源

2015-05-04 Bang Fady

它應該是'var app = angular.module（'app'，['onsen']）;'丟失'''末尾 –

'app.js'不應該在lib/onsen/js中。該文件是你的應用程序的一部分，而不是Onsen UI的一部分，所以最好放在lib文件夾之外。還有，你需要在你的HTML中包含'app.js'（就像下面的Andi所說的），否則那些代碼將不會被使用。 –

@ pankajparkar：謝謝你的糾正。我編輯過它。 –

我看到你正在使用我的示例應用程序，所以我想我可以幫你這個問題。你已經宣佈ng-app="apk"，所以你的js文件應該是這樣的：

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

請記住，包括您的js文件中index.html文件

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

我建議你穿上」把你自己的腳本放在lib文件夾中，但創建一個自定義文件夾。

來源

2015-05-04 14:39:30

我已經提出了你的建議，但我仍然有同樣的問題。看看我對上面的FranDios的評論。 –

無法通過其他文件實現onsen（app.js）

回答

相關問題