2015-04-01 57 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與一個前導「/」。這在瀏覽器上工作得很好。奇怪的是,此後我刪除了所有主要的斜槓,並且它完美地工作。