使用ionic框架angularjs和cordova实现列表视图作为原生应用程序

你好，我正试图通过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>

我的应用程序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模拟器上运行。

我尝试了很多代码笔的例子来实现路由，但它总是很失败。例如代码笔：http://codepen.io/mhartington/pen/CAxFG只在我的浏览器模拟和iOS模拟器上显示我的白色屏幕。我一个接一个地复制了代码，但似乎我做错了什么。我能在iOS模拟器中使用的唯一代码是上面的index.html。

那么，如果应用程序最终应该是使用ionic构建的本地应用程序，那么如何正确地做到这一点呢？

此处缺少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

相关内容

最新更新

热门标签：