【问题标题】:Porting angular app to ionic将 Angular 应用程序移植到 ionic
【发布时间】:2015-06-05 13:26:17
【问题描述】:

我有一个 Angular 应用程序,我正在尝试移植到 ionic 框架。我查看了由入门模板生成的示例应用程序,并注意到核心 Angular 应用程序位于 www 文件夹下。 所以我创建了一个 ionic starter 应用程序,并将我的 angular 应用程序移动到 www 文件夹下。

****我可以使用 ionic serve 为应用程序提供服务,并且运行良好

但是,当我使用 ionic emulate 时,模拟器只显示我的主页并抛出错误 Unable to open assets URL: file:///android_asset/views/landing.html

那么我是否必须使用 ionic 标签才能让我的应用程序正常工作?由于 Ionic serve 可以正确呈现我的应用程序,我认为它在模拟器中也可以正常工作。

这就是我的 index.html 的样子。它使用 angular 和 bootstrap,没有离子标签。

<!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>

登陆.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>

我在我的 Angular 应用中使用 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'
        })

【问题讨论】:

    标签: cordova ionic


    【解决方案1】:

    很高兴你解决了你的问题。

    只是为了分享我的经验,我注意到如果我将 ui-router 状态 url 与前导“/”放在一起,Ionic 仿真会给出与您所说的相同的错误。这在浏览器上工作得很好。虽然很奇怪,但我随后删除了所有前导斜线,并且效果很好。

    【讨论】:

      【解决方案2】:

      Ionic 应用程序应具有以下结构才能在模拟器上运行。

      <ion-pane>
            <ion-header-bar class="bar-stable">
              <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content>
            </ion-content>
      </ion-pane>
      

      所以要让您的应用程序正常工作。您应该包括这些特定于离子的指令。您的标头应该进入&lt;ion-header-bar&gt; &lt;ion-header-bar /&gt; 指令和&lt;ion-content&gt;&lt;/ion-content&gt; 中的内容。你的最终代码可能看起来像。

      <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>
      

      【讨论】:

        【解决方案3】:

        如果您使用标准 Webbrowser 功能(不是 Cordova),则使用 emulate 和 ionic serve 没有区别。

        如果它在 Webbrowser 上运行,它将在 emulate 上运行。

        为帮助您解决该问题,请: - 提供有关您的模板的更多信息,landing.html - 提供有关您的信息ui-router。离子与 ui-router 一起工作 而不是基本的 AngularJS 路由服务。你应该已经定义了
        “状态”

        如前所述,Ionic 使用 ionic 指令进行了非常好的改进。 我个人注意到,将 ui-view 替换为 ion-nav-view 后,在 Android 上对于 ng-repeat 列表有很大的性能提升。

        【讨论】:

        • 我编辑了我的原始帖子以在我的landing.html 中显示代码。我在我的 Angular 应用程序中使用 ui-router。
        • 将离子指令注入您的应用程序将允许您使用离子指令。您的问题是您的状态将您的视图定义为 www/clients/views.... 我假设您的项目中没有这种结构
        • 感谢您的意见。我重写了应用程序以使用 ionic 指令来呈现视图。我从其中一个入门模板开始,并在其中使用了我的应用程序。它现在按预期工作。
        【解决方案4】:

        您的 Angular 服务和 Angular 控制器将保持不变(除非您想注入 Ionic 特定服务)。您的模板将不得不更改并且应该使用 Ionic 指令,这就是您可以利用导航栏、选项卡和其他内置 ionic UI 组件的方式。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2016-11-04
          • 2017-05-21
          • 2010-11-29
          • 2011-08-04
          • 2014-05-28
          • 2011-02-27
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多