2015-04-01 67 views
3

我有一个角度应用,我试图移植到离子框架。我查看了由初学者模板生成的示例应用程序,并注意到核心角应用程序位于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">&nbsp;</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的路线在我的角度应用

(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' 
     }) 

回答

1

你的角度和服务角度控制器将保持不变(除非你想要注入离子特定服务)。你的模板将不得不改变,应该使用Ionic指令,这就是你可以利用导航栏,选项卡和其他内置离子UI组件的好处。

1

如果您使用的是标准Web浏览器功能(不是科尔多瓦),使用仿真&离子服务器没有什么区别。

如果它在Web浏览器上工作,它将工作在模拟上。

为了帮助您解决这个问题,请: - 提供有关您的模板,landing.html上 更多信息 - 提供关于你ui-router信息。 Ionic与ui-router 一起使用,而不是基本的AngularJS路由服务。您应该已经定义了
“STATE”

如前所述,Ionic使用离子指令有很好的改进。 我有personnaly注意到用ui-view替换为ion-nav-view,在ng-repeat列表上Android的性能提高很多。

+0

我编辑了我的原始文章,以显示我的landing.html中的代码。我在我的角度应用程序中使用ui-router。 – 2015-04-22 21:35:01

+0

将离子指令注入到您的应用程序将允许您使用离子指令。你的问题在于你的状态像在www/clients/views中一样定义你的视图....并且我假设你没有把这个结构放入你的项目 – aorfevre 2015-04-22 22:14:49

+0

感谢你的输入。我重写了应用程序以使用离子指令来渲染视图。我从一个初学者模板开始,并在我的应用程序中工作。它现在按预期工作。 – 2015-04-24 03:16:23

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">&nbsp;</div> 
     </div> 
     </ion-content> 
<ion-footer-bar><div ng-include src="'views/partials/footer.html'"></div></ion-footer-bar> 

2

我很高兴你已经解决了你的问题。

为了分享我的经验,我注意到Ionic仿真给出了与您所说的相同的错误,如果我把ui路由器状态url与一个前导“/”。这在浏览器上工作得很好。奇怪的是,此后我删除了所有主要的斜杠,并且它完美地工作。