title: Porting angular app to ionic
body: <p>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. </p>
  
  <p>****I am able to serve up the app using ionic serve, and it works fine</p>
  
  <p>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</p>
  
  <p>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. </p>
  
  <p>This is what my index.html looks like. It is using angular and bootstrap and no ionic tags.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" data-ng-app="fhlLeads"&gt;&lt;!-- manifest="manifest.appcache" --&gt;
  &lt;head&gt;
      &lt;title&gt;FHL Leads&lt;/title&gt;
      &lt;link rel="stylesheet" href="app/css/app.css" type="text/css" /&gt;
      &lt;link rel="stylesheet" href="app/css/base.min.css" type="text/css" /&gt;
      &lt;script type="text/javascript"&gt;
          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);
      &lt;/script&gt;
  &lt;/head&gt;
      &lt;body class="platform-android platform-cordova platform-webview"&gt;
          &lt;!-- Navbar --&gt;
          &lt;div ng-include src="'views/partials/navbar.html'"&gt;&lt;/div&gt;
          &lt;!-- Page Content --&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;fhl-page-loading&gt;&lt;/fhl-page-loading&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;ui-view &gt;&lt;/ui-view&gt;
          &lt;/div&gt;
          &lt;!-- Footer --&gt;
          &lt;div ng-include src="'views/partials/footer.html'"&gt;&lt;/div&gt;
      &lt;/body&gt;
      &lt;script src="app/js/base.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="app/js/app.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Landing.html</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="col-lg-3 col-md-12 col-xs-12 pull-right"&gt;
      &lt;div class="hidden-xs"&gt;
          &lt;div ng-include src="'templates/partials/sync-status-panel.html'"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div ng-include src="'templates/partials/activity-panels.html'"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-lg-9 col-md-12 col-xs-12"&gt;
      &lt;div ng-include src="'templates/partials/lead-grid.html'"&gt;&lt;/div&gt;
      &lt;!--&lt;section&gt;
          &lt;!-- Page content--&gt;
      &lt;!--&lt;div ui-view="" autoscroll="false" class="content-wrapper"&gt;&lt;/div&gt;--&gt;
      &lt;!--&lt;/section&gt;--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I am using ui-route in my angular app</p>
  
  <pre><code>(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'
          })
  </code></pre>