@abakhan wrote:
I am trying to create a mobile app using Ionic but, I am having a hard time connecting index.html to get the data. I am pretty new at this, can somebody please help me figure it out ?
Basically, in the app I want to show a list of restaurants. Using Cards Images, I would like to show an image, a logo, the name of the restaurant and a description.
Here is my code for 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>Here is my code for 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' } ]; });I am also attaching a screen-shot of my file structure. Can you please help me figure-out what is wrong?
Thanks a lot for your help.
Posts: 1
Participants: 1