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.