【发布时间】：2016-05-07 06:56:29
【问题描述】：
好的，那么从哪里开始。首先，我对这种混合开发以及 Web 开发是新手，所以不确定我在 xdk 中编写的应用程序是否可以在浏览器上轻松运行，但阅读了很多帖子表明确实如此。
这让我想到了我的问题 - 我的就是没有！
我下载了两个项目文件来帮助我开发我的项目
1. 是一个厨房种子，其中包含我可以在离子和角度中调用的所有不同工具
2. 是某种会议应用程序
至于你，我选择了第二个项目，它没有为其他工具提供太多有意义的新信息，这是
1. 项目 1 是一个单文件项目 - 它的所有模板都在 index.html 中，并且只有一个 js 文件
2. 与项目 2 完全相反，一切都是模块化的 - 酷！
但我的问题从这里开始：我使用项目 1 掌握了 ionic/angular 框架的窍门，但使用项目 2 的模块化概念实现了它们（只是将 html 和 js 划分为不同的文件）。
所以现在当我尝试构建我的应用程序时，它只显示一个白屏（它是死亡的白屏吗？我怀疑它！我会坚持下去）。
我难住了！我的项目是来自 xdk 的标准 HTML5 项目，但在构建时我添加了 cordova 插件，添加的人行横道仍然没有。我阅读了一些 WSOD 文章并形成了一个：https://forum.ionicframework.com/t/showing-blank-white-screen/15545
导致 WSOD 发生的原因有很多，但他们都有一个共同点：他们的应用程序可以在浏览器上运行！
所以现在我在浏览器上测试项目 1 和 2。猜猜什么项目 1 在浏览器上运行，但项目 2 没有。这对模块化是一个打击！
现在我使用 chrome 中的检查工具来检查发生了什么，我看到的是
1. url 以 index.html#/ 结尾，许多其他应用程序也以这种方式结束，但在路由器 url 扩展中假设是 /app（在我的情况下它会闪烁并恢复为 index.html#）
2. 我的索引文件加载但保持为空
这两点都表明路由器是罪魁祸首！但是它是在 xdk 模拟器中工作而不是在浏览器中工作吗？
所以我的问题是问题是由于路由器无法路由模块化项目还是我的路由配置有问题？
下面是项目结构
但是忘记这一切，我缩短了项目，以便将另一个 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.把';' .state() 之后
2. else()中的'/app'
3. 从两个地方的“/app”中删除“/”
还有什么......总之我尝试了很多东西但什么都没有。只是说！
哦，还有一件事我下载了最新的 lib 文件，导致那些包含 xdk 的文件即使在其模拟器中也会造成问题！
真的很感激任何帮助！
谢谢！
更新
好的，所以现在我尝试对模板相同的路由代码进行内联调用，一切都只需添加一个<script id="about.html" type="text/ng-template">
<div >About!!</div>
在 index.html 中，并制作了 state app about.html 和 vola 的 templateurl ！
所以对于喜欢模块化编码的人来说是个坏消息，因为我认为 xdk 不允许这样做！
如果有人找到解决方法，请帮助我！
我只是不想写一个庞大的单体代码！
谢谢！
更新 2
通过 'scotch.io' 检查此 Plunker 页面：http://plnkr.co/edit/dd8Nk9PDFotCQu4yrnDg?p=preview他们也使用多个页面，所以我在我的系统上尝试了这个代码，这也无济于事！加载模板的区域保持空白。所以我认为这一定是我的系统有问题！
所以我安装了 xdk，我也安装了 ionic cli，但从未使用它不知道它是否会干扰 xdk，但它在那里。
我还需要安装其他东西吗？
谢谢！
更新 3
这很好笑！我通过 plunker 引用的代码适用于 xdk 模拟器，但不适用于浏览器！然后只是为了它，将所有引用的 css 文件和 js 文件放入 lib 文件夹并构建它。它适用于我的安卓设备！ 奇怪！哦，这段代码也使用 angular-router 而不是 ui-router。
希望它有助于缩小可能的罪魁祸首。
谢谢！
Update-4
好的，所以我的应用程序正在运行。离子库之一似乎存在问题，因为要让我的应用程序正常工作，我必须调用 angular-ui-router 脚本并将 ui-router 依赖项注入 angular 模块。但它仍然无法在浏览器上运行。现在它让我想知道 ionic 的工作原理以及 ionic 到底是什么？（框架，库，其他东西？）
【问题讨论】：
-
你能总结一下你的问题吗？细节太多了。
-
hmmm，路由问题，在模拟器而非浏览器中工作，可能导致路由的 lib 文件错误，求助！！！？？
-
不知道怎么总结！他们有很多理由让你明白这一点，而且作为新手，它的概念对我来说并不是很清楚，无法更具体地说明我的问题。
标签： angularjs ionic-framework angular-ui-router intel-xdk