CODEWITHSUNDEEP
cordovaionic-framework
Rekha Jayaram
Rekha Jayaram

Reputation: 131

Porting angular app to ionic

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

Upvotes: 4

Views: 1727

Answers (4)

massanishi
massanishi

Reputation: 2064

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.

Upvotes: 2

Nabin Singh
Nabin Singh

Reputation: 377

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>

Upvotes: 1

aorfevre
aorfevre

Reputation: 5064

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.

Upvotes: 1

ATHER
ATHER

Reputation: 3384

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.

Upvotes: 1

Related Questions