转换离子中的现有角应用程序

时间:2015-09-09 12:52:04

标签: angularjs ionic-framework angular-ui-router ionic ionic-view

我遇到了一个角度应用程序的问题,我希望以离子

进行迁移

我使用了ui-router for angular,这是我的app.js(在这里采用:https://github.com/tarlepp/angular-sailsjs-boilerplate-frontend/blob/master/src/app/app.js)。我没有为我的项目对此文件进行任何更改

现在我想为我的项目重用这个文件,所以我用这个替换了由ionic给出的app.js并添加了

MongoDatabase

在app.run内部

这是我的index.html:

  $ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
  StatusBar.styleDefault();
}});

我只是用前端替换了ng-app的名称,并且离子主题没有被正确收费。

我不知道问题是来自ui-retour依赖还是其他什么?我想我错过了什么

注意:我知道我将不得不更改项目的html和css文件,但对于index.html,我只有离子提供的内容,而且我没有使用&#39离子选项卡;离子空白发酵剂'好像我开始一个空白的离子项目

这里我的路由器发生了变化:

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="frontend">
<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content>
  </ion-content>
</ion-pane>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

你是不是错过了ui.router的标记来将状态视图注入?

<ion-view view-title="your-view">
</ion-view>

如果您使用

创建新应用
ionic start myApp

默认为tab模板,其中包含以下主体的index.html

  <body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>

此处ion-nav-view允许ui.router插入其视图