Question

我正在尝试使用Ionic创建移动应用，但是，我很难连接index.html来获取数据。我对此非常陌生，有人可以帮我解决一下吗？

基本上，在应用程序中我想显示一个餐馆列表。使用卡片图片，我想展示一个图像，一个标志，餐厅的名称和描述。

这是我的index.html代码

            <!DOCTYPE html>
            <html lang ="en" data-ng-app="restaurantList">
              <head>
                <meta charset="UTF-8">
                <title>Food</title>

                  <!--Ionic Libraries-->
                  <link rel="stylesheet" href="lib/ionic/css/ionic.css" type="text/css" />
                  <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>

                  <!--My App-->
                  <link rel="stylesheet" href="css/style.css" type="text/css" />
                  <script type="text/javascript" src="js/app.js"></script>
              </head>
              <body ng-controller="AppCtrl">

               <div class="bar bar-header bar-light">
                  <h1 class="title">Food</h1>
                </div>

              <ion-content>
                  <div ng-repeat= "item in items" class="list card">
                    <div class="item item-image">
                      <img ng-src="{{ item.cover }}"></img>
                    </div>
                    <div class="item item-avatar">
                      <img ng-src="{{ item.logo }}">
                      <h2>{{ item.name }}</h2>
                      <p>{{ item.description }}</p>
                    </div>
                  </div>

              </ion-content>  


              </body>
            </html>

这是我的app.js代码

            angular.Module('restaurantList', ['ionic'])

            .controller('AppCtrl', function($scope){
                $scope.items = [
                    { 
                        id: 1, 
                        cover: 'img/destination/hankburger/cover.jpg', 
                        logo: 'img/destination/hankburger/logo.png', 
                        name: 'Hank Burger',
                        description: 'Uhmmm... des Hankburgers'
                    },
                    { 
                        id: 2, 
                        cover: 'img/destination/elmida/cover.jpg', 
                        logo: 'img/destination/hankburger/logo.jpeg', 
                        name: 'El Mida',
                        description: 'Salon de thé traiteur oriental'
                    }
                    ];
            });

我还附上了我的文件结构的屏幕截图。你能帮我弄清楚出了什么问题吗？ enter image description here

Answer 1

定义角度module应为小写

angular.module('restaurantList', ['ionic'])
//      ^should be lowercase

Ionic_无法将数据从app.js连接到index.html

1 个答案: