我有一个有角度的应用程序,我正在尝试移植到离子框架。我查看了由初始模板生成的示例应用程序,并注意到核心角应用程序位于www文件夹下。 所以我创建了一个离子启动应用程序,并将我的角度应用程序移动到www文件夹下。
****我可以使用离子服务提供应用程序,并且工作正常
但是,当我使用离子模拟时,模拟器只显示我的主页并抛出错误无法打开资产URL:file:///android_asset/views/landing.html
所以我必须使用离子标签让我的应用程序正常工作吗?由于Ionic服务正确呈现我的应用程序,我认为它也可以在模拟器中正常工作。
这就是我的index.html的样子。它使用角度和自举,没有离子标签。
<!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>
landing.html上
<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>
我在我的角应用程序中使用ui-route
(function() {
'use strict';
angular
.module('fhlLeads', [
'ui.router',
'ui.bootstrap',
'ui.mask',
'ui.utils',
'ngAnimate',
'ngGrid',
'toastr',
'LocalStorageModule',
'fhlConstants',
'fhlConfig',
'fhlPersist',
'fhlEvent'
])
.config(configure)
.run(runBlock);
configure.$inject = ['$stateProvider', '$urlRouterProvider', 'toastrConfig', 'localStorageServiceProvider'];
function configure($stateProvider, $urlRouterProvider, toastrConfig, localStorageServiceProvider) {
$urlRouterProvider.otherwise("/landing");
$stateProvider
.state('landing', {
url: '/landing',
templateUrl: 'Client/views/snapshot/landing.html',
controller: 'LandingController',
controllerAs: 'vm'
})
.state('agent', {
url: '/agent',
templateUrl: 'Client/views/agent/agent.html',
controller: 'AgentController',
controllerAs: 'vm'
})
答案 0 :(得分:2)
我很高兴你已经解决了你的问题。
只是为了分享我的经验,我注意到如果我把ui-router状态网址带有前导“/”,Ionic仿真会给出与你说的相同的错误。这在浏览器上完全正常。虽然很奇怪,但我之后删除了所有领先的斜杠,它完美无缺。
答案 1 :(得分:1)
您的Angular Services和Angular Controllers将保持不变(除非您想注入Ionic特定服务)。您的模板必须更改,并且应该使用Ionic指令,这就是您可以从导航栏,选项卡和其他内置离子UI组件中获益的方法。
答案 2 :(得分:1)
使用模拟和模拟没有区别如果您使用标准Web浏览器功能(不是Cordova),则使用离子服务。
如果它适用于Webbrowser,它将在模拟中起作用。
为帮助您解决该问题,请: - 提供有关您的模板的更多信息,landing.html - 提供有关您的信息ui-router。离子与ui-router一起使用 而不是基本的AngularJS路由服务。你应该定义了 “STATE”
如前所述,Ionic使用离子指令进行了很好的改进。 我有个人注意到,用ui-view取代了ion-nav-view,Android上的ng-repeat列表性能有了很大提升。
答案 3 :(得分:1)
离子应用程序应具有以下结构才能在模拟器上运行。
<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-header-bar> <ion-header-bar />
指令和<ion-content></ion-content>
内的内容中。你最终的代码可能看起来像。
<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>