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

Hello I'm trying to implement a listview application for mobile devices via cordova angularjs and ionic framework.

您好我正在尝试通过cordova angularjs和离子框架为移动设备实现listview应用程序。

The application should show a clickable list view for example for cars. If the user clicks one of the items of the list, a details view with details of the specific car should be opened.

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

My index.html looks like this:

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

My 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();
    }
  });
});

In the detailsview it should show up a checkboxlist similar to this:

在详细信息视图中,它应该显示类似于此的复选框列表:

<ul class="list">

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

The data is for example given in json format:

例如,以json格式给出数据:

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

My problem is that some page navigation things that are working on the browser simulation are not working in my iOS simulator. I tried the recommend way with <script id="detailsView.html" type="text/ng-template"> tags and routing configurations in the controller but couldn't get it to work on the iOS simulator.

我的问题是,一些正在浏览器模拟的页面导航功能在我的iOS模拟器中无效。我尝试了在控制器中使用

I tried a lot of codepen examples to bring the routing to work but it always fails hard. For example the codepen: http://codepen.io/mhartington/pen/CAxFG only shows my a white screen on my browser simulation and iOS simulator. I copied the code one on one but it seems that I am doing something wrong. The only code that I could bring to work in the iOS simulator is the index.html above.

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

So how to do this the right way if the app should be a native application build with ionic in the end?

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

1 个解决方案

#1

you are missing the ui-router code here.

你在这里错过了ui-router代码。

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");

})

A complete sample is posted here

完整的样本发布在这里

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

#1