List Not Displayed

ionic-v1
1

I am having an awfully confusing time with Ionic Framework. I am following a tutorial online and trying to display the list. When I run the following code I get no list being displayed.

<ion-nav-bar class="bar-positive">

</ion-nav-bar>

<ion-nav-view></ion-nav-view>

<script id="list.html" type="text/ng-template">
<ion-view view-title="Movie Database">
<ion-content>
<ion-list>
<div class="list">
<a ng-repeat = "task in tasks" href="#/task/{{task.title}}" class="item">
<h2>{{task.title}}
</a>
</div>
</ion-list>
</ion-content>
</ion-view>
</script>

And here is my app.js file:

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// ‘starter’ is the name of this angular module example (also set in a attribute in index.html)
// the 2nd parameter is an array of 'requires’
var app = angular.module(‘todo’, [‘ionic’])

app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(’/’)

$stateProvider.state(‘list’, {

url: '/',
views: {
    home:{
      templateUrl:'templates/list.html',
      controller:'TasksController'
    }
}

})

$urlRouterProvider.otherwise("/");

})

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})

.controller(‘TasksController’,function($scope){

  $scope.tasks = [
      { title : "Collect Coins" },
      { title : "Eat Mushroom" },
      { title : "Find the princess" }
  ];

  $scope.showTaskDetails = function() {
      alert('show Task details');
  }

  $scope.showAddNewTaskPopup = function() {
    alert('open add new task popup')
  }

});

What am I doing wrong? Why I do not see a list?

2

open your browser and look at the errors in the console… that should get you headed in the right direction

3

That is the biggest issue with Ionic and other mobile web frameworks that there are no errors on the console. The console is completely clean. So, now it is up to the developer to go on a wild hunt to chase these issues.

4

do you have a fiddle or codepen? I am certain there must be some errors somewhere is the app is not working at all

5

Unfortunately, I don’t have fiddle or codepen. I checked on the Safari and Chrome console and no errors. I removed the views: section in the app.js and now it kind of works.

6

it will be difficult to get help in the forums unless you start to use the tools that make it easy for people to help you. I suggest you spend some time familiarizing yourself with those tools, they are free and quite easy to get started

7

your HTML is wrong:

Try to close the h2 tag:

<h2>{{task.title}}</h2>