Geek Answers Handbook

Porting an angular app to ionic

I have an angular application and am trying to connect to an ionic structure. I looked at an example application created by starter templates and noticed that the main angular application is in the www folder. So I created an ion starter app and moved the angular app to the www folder.

**** I can serve the application using ion feed and it works great

However, when I use an ionic emulator, the emulator only shows my homepage and throws errors. Unable to open resource url: file: ///android_asset/views/landing.html

So should I use ion tags to make my application work correctly? Since Ionic serves to correctly display my application, I assumed that it also works fine in the emulator.

This is what my index.html looks like. It uses angular and bootstrap and has no ion 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 u-route in my angular application

(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'
        })
+4
source share
4 answers

I'm glad you solved your problem.

Just to share my experience, I notice that emulating Ionic gives the same errors as you do if I put a url-url router with a leading "/". This works great in a browser. Oddly enough, after that I deleted the entire leading slash, and it works great.

+2

Angular Services Angular ( Ionic). Ionic-, , .

+1

, Webbrowser ( ).

Webbrowser, .

, :  - , landing.html  - ui-router. ui-router   AngularJS.   "STATE"

, Ionic . , ui-view -nav-view, Android ng-repeat-.

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

So that your application worked. You must include these ion specific directives. The title should be inside the directive <ion-header-bar> <ion-header-bar />and the contents inside <ion-content></ion-content>. The final code may look.

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

+1
source

More articles:


All Articles