使用离子框架 angularjs 和 cordova 将列表视图实现为本机应用程序

Question

您好，我正在尝试通过 cordova angularjs 和 ionic 框架为移动设备实现一个列表视图应用程序。

应用程序应显示可点击的列表视图，例如汽车。如果用户单击列表中的一项，则应打开包含特定汽车详细信息的详细信息视图。

我的 index.html 看起来像这样：

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

<!-- 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="starter">

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Order spare parts:</h1>
  </ion-header-bar>

  <ion-content>
      <div class="list">
          <a href="#detailsView:1">
              <div class="item item-button-right">
                Audi A4
              </div>
          </a>
          <a href="#detailsView:2">
              <div class="item item-button-right">
                BMW 320
              </div>
          </a>
          <a href="#detailsView:3">
              <div class="item item-button-right">
                Mercedes CLA
              </div>
          </a>
      </div>
  </ion-content>
</ion-pane>

</body>
</html>

我的app.js:

var app = angular.module('starter', ['ionic']);
app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
});

在详细信息视图中，它应该显示一个与此类似的复选框列表：

<ul class="list">

<li class="item item-checkbox">
 <label class="checkbox">
   <input type="checkbox">
 </label>
 Wheels
</li>
</ul>

数据例如以json格式给出：

var cars = [
  {"id":"1", "name":"Audi", "spareParts":[{"id":"1", "name": "wheel"}, {"id":"2", "name": "Steuergerät"}]},
  ...
];

我的问题是一些在浏览器模拟上运行的页面导航功能在我的 iOS 模拟器上不起作用。我在控制器中尝试了使用 <script id="detailsView.html" type="text/ng-template"> 标签和路由配置的推荐方式，但无法在 iOS 模拟器上运行。

我尝试了很多 codepen 示例来使路由正常工作，但总是失败。例如代码笔：http://codepen.io/mhartington/pen/CAxFG 只在我的浏览器模拟和 iOS 模拟器上显示我的白屏。我一对一地复制了代码，但似乎我做错了什么。我可以在 iOS 模拟器中使用的唯一代码是上面的 index.html。

如果应用程序最终应该是使用 ionic 构建的本机应用程序，那么如何以正确的方式执行此操作？

Answer 1

您在这里缺少 ui-路由器代码。

app.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
    url: "/home",
    templateUrl: "home.html"
  })
    .state('details', {
    url: "/details/:id",
    templateUrl: "details.html",
    controller :function($stateParams, $scope) {
      $scope.params = $stateParams;
    }
  });

  $urlRouterProvider.otherwise("/home");

})

这里发布了完整的示例

http://codepen.io/aaronksaunders/pen/xbjOor?editors=101

使用离子框架 angularjs 和 cordova 将列表视图实现为本机应用程序

implementing a list view as native app with ionic framework angularjs and cordova

angularjs

ionic-framework