在xdk中开发的离子应用程序在其模拟器中工作但在浏览器中没有开发？

时间：2016-05-07 06:56:30

标签： angularjs ionic-framework angular-ui-router intel-xdk

好的，从哪里开始。首先是这个混合开发以及Web开发的新手，所以不确定xdk中的应用程序代码是否可以在浏览器上轻松工作，但阅读很多帖子表明它确实如此。
这让我想到了我的问题 - 我只是没有！
我下载了两个项目文件来帮助我开发项目 1.是一个kitchsink种子，包含我可以称之为离子和角度的所有不同的工具 2.是某种会议应用程序
至于我采取了第二个项目，它没有为其他工具提供大量新信息，事实是 1.项目1是一个单一的文件项目 - 它的所有模板都在index.html本身，只有单个js文件
2.在项目2完全相反的地方，一切都是模块化的 - 酷！

但是我的问题开始了：我使用项目1了解了离子/角度框架，但是使用项目2的模块化概念（只需将html和js分成不同的文件）来实现它们。 /> 所以现在当我尝试构建我的应用程序时，它只显示一个白色的屏幕（这是死亡的白色屏幕！我对此表示怀疑！我将继续保持这种状态。） 很难过！我的项目是来自xdk的标准HTML5项目，仍然在构建我添加cordova插件时，仍然没有添加人行横道。我阅读了一些WSOD文章并形成一个：https://forum.ionicframework.com/t/showing-blank-white-screen/15545
他们有很多理由可以解决WSOD的问题，但他们都有一个共同点就是他们的应用程序在浏览器上工作了！
所以现在我测试了Project 1＆amp; 2在浏览器上。并猜猜Project 1在浏览器上运行的是什么，而Project 2并没有。这是对模块化的打击！

现在我使用chrome中的检查工具来检查发生了什么，我看到的是什么.1。url以index.html＃/结尾，许多其他应用程序也可以这样工作，但在路由器URL扩展名中它假设是/ app（在我的眨眼并恢复到index.html＃） 2.我的索引文件加载但保持空白
这两点都表明路由器应该受到指责！但是，它是否适用于xdk模拟器而不是浏览器？
所以我的问题是问题是由于路由器无法路由模块化项目或路由配置是否有问题而引起的？
以下是项目结构

enter image description here   

但是忘了这一切，我缩短了项目，以便我只是将另一个html文件加载到索引文件中

app.js 

      angular.module('ionicApp', ['ionic', 'ionicApp.main', 'ionicApp.login']) 
      .config(function ($stateProvider, $urlRouterProvider) { $stateProvider

        .state('app', {
            url: "/app",
            //controller: "AppCtrl",
            templateUrl: "templates/splash.html"

        });




    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('app');
})


的的index.html 

        <!DOCTYPE html>
         <html ng-app="ionicApp">
         <head>
            <meta charset="utf-8">
             <meta name="viewport"  content="initial-scale=1,  maximum-scale=1, user-scalable=no, width=device-width">
             <title></title>

             <link href="lib/ionic.min.css" rel="stylesheet">

              <script src="lib/ionic.bundle.min.js"></script>
              <script src="lib/angular-ui-router.min.js"></script>


               <script src="lib/angular-toastr.tpls.min.js"></script>
             <link rel="stylesheet" href="lib/angular-toastr.min.css" />

        <!-- your app's js -->
        <script src="js/app.js"></script>
          <script src="js/main.js"></script>
          <script src="auth/login.js"></script>

       <style>

       .box {height:300px;padding: 10px}

     </style> 
     </head>

      <body >
         <div>Helllo!</div>
        <ion-nav-view>
         </ion-nav-view>
         </body>
      </html>

splash.html 

      <ion-view >bye!!!</ion-view>


这就是它在xdk模拟器中显示但不在浏览器上显示（忘记构建它！）。哦，并密切注意我试过的路由文件 1.推送＆＃39 ;;＆＃39;在.state（）之后 2.＆＃39; / app＆＃39;否则（）
3.删除＆＃39; /＆＃39;来自＆＃39; / app＆＃39;在两个地方
还有什么.....总之我尝试了很多东西但没什么。只是说！
哦，我下载了最新的lib文件，导致xdk打包的东西甚至在其模拟器中造成麻烦！

真正有用的任何帮助！ 谢谢！


更新

好的，现在我尝试对模板进行内联调用相同的路由代码，所有内容只需添加一个

<script id="about.html" type="text/ng-template">
 <div >About!!</div>


在index.html内，制作了状态app about.html和vola的模板，它起作用了！ 对于喜欢模块化编码的人来说，这是个坏消息，因为我认为xdk不会允许这样做！ 如果有人找到解决方法请帮帮我！ 我只是不想写一个巨大的单片代码！
谢谢！


更新-2

通过＆＃39; scotch.io＆＃39;检查这个Plunker页面。 ：http://plnkr.co/edit/dd8Nk9PDFotCQu4yrnDg?p=preview
    他们也使用多个页面，所以我在我的系统上尝试了这个代码，这也无济于事！加载模板的区域保持为空。所以我认为这对我的系统来说一定是个问题！

所以我安装了xdk并且我也安装了离子cli但是从未使用它不知道它是否会干扰xdk，但它在那里。
我还需要安装其他东西吗？ 谢谢！


更新-3

这很好笑！我通过plunker引用的代码在xdk模拟器上工作，但不能在浏览器上工作！然后只是为了它把所有引用的css文件和js文件放入lib文件夹并构建它。它适用于我的Android设备！ 很奇怪！
哦，这个代码也使用角度路由器而不是ui-router 希望它有助于缩小可能的罪魁祸首 谢谢！


更新-4

好的，我让我的应用程序运行。在其中一个离子库中似乎存在问题，因为我必须调用angular-ui-router脚本并将ui-router依赖项注入角度模块。但它仍然无法在浏览器上运行 现在它让我想知道离子如何起作用以及离子是什么？（框架，库，其他什么？）

1 个答案:

答案 0 :(得分：0)

您是否正在使用终端/ cmd在浏览器中运行它？如果没有进入终端并进入你的应用程序并运行＆＃34; ionic serve --lab＆＃34;这将在您的默认浏览器中启动ios和android。

相关问题
最新问题