Cordova 将angular应用程序移植到ionic
我有一个angular应用程序，我正在尝试移植到ionic框架。我查看了由starter模板生成的示例应用程序，发现core angular应用程序位于www文件夹下。 因此，我创建了一个ionic starter应用程序，并将我的angular应用程序移动到www文件夹下 ****我可以使用ionic serve为应用程序提供服务，而且效果很好 但是，当我使用ionic emulate时，emulator仅显示我的主页，并抛出错误，无法打开资产URL：file:///android_asset/views/landing.htmlCordova 将angular应用程序移植到ionic,cordova,ionic,Cordova,Ionic,我有一个angular应用程序，我正在尝试移植到ionic框架。我查看了由starter模板生成的示例应用程序，发现core angular应用程序位于www文件夹下。 因此，我创建了一个ionic starter应用程序，并将我的angular应用程序移动到www文件夹下 ****我可以使用ionic serve为应用程序提供服务，而且效果很好 但是，当我使用ionic emulate时，emulator仅显示我的主页，并抛出错误，无法打开资产URL：file:///android_asset
<div class="row">
<div class="col-lg-3 col-md-12 col-xs-12 pull-right">
<div class="hidden-xs">
<div ng-include src="'templates/partials/sync-status-panel.html'"></div>
</div>
<div ng-include src="'templates/partials/activity-panels.html'"></div>
</div>
<div class="col-lg-9 col-md-12 col-xs-12">
<div ng-include src="'templates/partials/lead-grid.html'"></div>
<!--<section>
<!-- Page content-->
<!--<div ui-view="" autoscroll="false" class="content-wrapper"></div>-->
<!--</section>-->
</div>
<!DOCTYPE html>
<html lang="en" data-ng-app="fhlLeads"><!-- manifest="manifest.appcache" -->
<head>
<title>FHL Leads</title>
<link rel="stylesheet" href="app/css/app.css" type="text/css" />
<link rel="stylesheet" href="app/css/base.min.css" type="text/css" />
<script type="text/javascript">
window.addEventListener('load', function (e) {
window.applicationCache.addEventListener('updateready', function (evt) {
if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
console.log('cache change detected; reloading page');
window.applicationCache.swapCache();
window.location.reload();
}
}, false);
}, false);
</script>
</head>
<body class="platform-android platform-cordova platform-webview">
<!-- Navbar -->
<div ng-include src="'views/partials/navbar.html'"></div>
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<fhl-page-loading></fhl-page-loading>
</div>
<div class="row"> </div>
<ui-view ></ui-view>
</div>
<!-- Footer -->
<div ng-include src="'views/partials/footer.html'"></div>
</body>
<script src="app/js/base.min.js" type="text/javascript"></script>
<script src="app/js/app.js" type="text/javascript"></script>
您的Angular服务和Angular控制器将保持不变（除非您希望注入特定于离子的服务）。您的模板必须更改，并且应该使用Ionic指令，这就是您如何利用导航栏、选项卡和其他内置Ionic UI组件的好处。如果您使用的是标准Webbrowser功能（而不是Cordova），则使用emulate&Ionic serve与此没有区别 如果它在Webbrowser上工作，它将在emulate上工作 要帮助您解决该问题，请： -提供有关模板landing.html的更多信息 -提供关于你的信息。Ionic与ui路由器一起工作 而不是基本的AngularJS路由服务。您应该已经定义了
“国家” 如前所述，Ionic使用Ionic指令进行了非常好的改进。
我个人注意到，随着ui视图被ion nav视图取代，它在Android for ng repeat List上的性能有了很大提高。Ionic应用程序应该具有以下结构才能在emulator上工作
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
离子空白起动器
<ion-pane>
<ion-header-bar class="bar-stable">
<div ng-include src="'views/partials/navbar.html'"></div>
</ion-header-bar>
<ion-content>
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<fhl-page-loading></fhl-page-loading>
</div>
<div class="row"> </div>
</div>
</ion-content>
<ion-footer-bar><div ng-include src="'views/partials/footer.html'"></div></ion-footer-bar>
我很高兴你解决了你的问题
为了分享我的经验，我注意到，如果我将ui路由器状态url放在前导“/”中，Ionic仿真会产生与您所说的相同的错误。这在浏览器上运行得非常好。奇怪的是，此后我删除了所有的前导斜杠，效果非常好。我编辑了我的原始帖子，将代码显示在我的landing.html中。我正在angular应用程序中使用ui路由器。将ionic指令注入应用程序将允许您使用ionic指令。您的问题是您所在的州将视图定义为www/clients/views。。。。我假设你的项目没有这样的结构，谢谢你的投入。我重新编写了应用程序，使用ionic指令渲染视图。我从一个初学者模板开始，并在其中运行我的应用程序。它现在按预期工作。
<ion-pane>
<ion-header-bar class="bar-stable">
<div ng-include src="'views/partials/navbar.html'"></div>
</ion-header-bar>
<ion-content>
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<fhl-page-loading></fhl-page-loading>
</div>
<div class="row"> </div>
</div>
</ion-content>
<ion-footer-bar><div ng-include src="'views/partials/footer.html'"></div></ion-footer-bar>