Porting angular app to ionic

Question

I have an angular app and I am trying to port to the ionic framework. I looked at a sample app generated by the starter templates and noticed that the core angular app is under the www folder. So I created a ionic starter app, and moved my angular app under the www folder.

****I am able to serve up the app using ionic serve, and it works fine

However when I use ionic emulate, the emulator shows only my home page and is throwing errors Unable to open asset URL: file:///android_asset/views/landing.html

So do I have to use the ionic tags to get my app to work correctly? Since Ionic serve renders my app correctly I assumed it would work fine in the emulator as well.

This is what my index.html looks like. It is using angular and bootstrap and no ionic tags.

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

I am using ui-route in my angular app

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

massanishi · Accepted Answer · 2015-04-30 20:22:33Z

2

I'm glad you have solved your problem.

Just to share my experience, I notice that Ionic emulation gives the same errors as you said if I put ui-router state url with a leading "/". That works perfectly fine on the browser. Strange as it is, I removed all the leading slash thereafter, and it works perfectly.

answered Apr 30, 2015 at 20:22

massanishi

2,0641 gold badge18 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ATHER · Accepted Answer · 2015-04-08 17:59:25Z

1

Your Angular Services and Angular Controllers will remain same ( unless you want to inject Ionic specific services ). Your templates will have to change and should be using Ionic directives, that's how you can take benefits of navigation bar, tabs and other built in ionic UI components.

answered Apr 8, 2015 at 17:59

ATHER

3,3847 gold badges46 silver badges67 bronze badges

Comments

aorfevre · Accepted Answer · 2015-04-15 12:11:57Z

1

There is no difference from using emulate & ionic serve if you are using standard Webbrowser functions (not Cordova).

If it works on the Webbrowser, it will work on emulate.

To help you resolve that issue, please: - Provide more information regarding your template, landing.html - Provide info regarding you ui-router. Ionic works with ui-router and not basic AngularJS routing service. You shall have defined
"STATE"

As mentionned before, Ionic has really nice improvements using ionic directives. I have personnaly noticed that with the ui-view replaced with ion-nav-view that has great performance increase on Android for ng-repeat lists.

answered Apr 15, 2015 at 12:11

aorfevre

5,0744 gold badges23 silver badges54 bronze badges

3 Comments

Rekha Jayaram Over a year ago

I edited my original post to show the code in my landing.html. I am using ui-router in my angular app.

aorfevre Over a year ago

Inject ionic directives into your app will allow you to use ionic directive. Your problem is that your state define your views as in www/clients/views.... And I assume that you Don t have that structure into your project

Rekha Jayaram Over a year ago

thanks for your inputs. I rewrote the app to use the ionic directives for rendering the view. I started with one of the starter templates and worked my app int it. It works now as intended.

Nabin Singh · Accepted Answer · 2015-04-16 23:57:46Z

Ionic application should have below structure to work on 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>

So to make your application work. You should include these ionic specific directives. Your header should go inside <ion-header-bar> <ion-header-bar /> directive and content inside <ion-content></ion-content>. You final code might look like.

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

Collectives™ on Stack Overflow

Porting angular app to ionic

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related