linking pages in ionic
<p>I am a beginner in <code>Ionic</code>, I am getting an error when clicking on the links. Below is my <code>index.html</code> page and I want the list items to linked to other pages.</p>

<blockquote>
  <p>Index.html</p>
</blockquote>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="ionicApp"&gt;

&lt;head&gt;
    &lt;title&gt;my test App&lt;/title&gt;
    &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&gt;
    &lt;style&gt;
        @-ms-viewport { width: 100vw ; zoom: 100% ; }  @viewport { width: 100vw ; zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; }           @viewport { user-zoom: fixed ; }
    &lt;/style&gt;
    &lt;link rel="stylesheet" href="css/ionic.css"&gt;
    &lt;link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"&gt;
&lt;/head&gt;

&lt;body ng-controller="MyCtrl"&gt;

    &lt;ion-header-bar class="bar bar-header"&gt;
        &lt;button class="button icon ion-navicon button-assertive"&gt;&lt;/button&gt;
        &lt;h1 class="title"&gt;Header&lt;/h1&gt;
        &lt;button class="button icon ion-home button-assertive"&gt;&lt;/button&gt;
    &lt;/ion-header-bar&gt;
    &lt;ion-header-bar class="bar bar-subheader bar-dark"&gt;
      &lt;h2 class="title"&gt;Sub Header&lt;/h2&gt;
    &lt;/ion-header-bar&gt;

    &lt;ion-content class="has-subheader"&gt;
        &lt;ul class="list"&gt;
            &lt;a href="/pages/item1.html"&gt;&lt;li class="item"&gt;Item 1&lt;/li&gt;&lt;/a&gt;
            &lt;a href="/pages/item2.html"&gt;&lt;li class="item"&gt;Item 2&lt;/li&gt;&lt;/a&gt;
        &lt;/ul&gt;
    &lt;/ion-content&gt;



    &lt;div class="bar bar-footer bar-energized"&gt;
        &lt;h1 class="title"&gt;Footer&lt;/h1&gt;
    &lt;/div&gt;


    &lt;script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var app = angular.module('ionicApp', ['ionic'])
        app.controller('MyCtrl', function($scope) {});
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>In my root folder where <code>index.html</code> is present I have a directory named <code>pages</code> and under this directory I have two html pages <code>item1.html</code> and <code>item2.html</code> which I want to be linked with list items <code>Item 1</code> and <code>Item 2</code> respectively. 
But whenever I click on the first list item (Item 1) I get an message i.e <strong>Cannot GET /pages/item1.html</strong>, anyone please suggest me how can link pages.
thank you</p>