# Help With Routing

**URL:** <https://forum.ionicframework.com/t/help-with-routing/22765>\
**Category:** ionic-v1\
**Created:** [May 11, 2015, 7:58pm UTC](https://forum.ionicframework.com/t/help-with-routing/22765 "2015-05-11T19:58:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![liverpool](https://avatars.discourse-cdn.com/v4/letter/l/e99b99/32.png) [@liverpool](https://forum.ionicframework.com/u/liverpool)\
**Post date:** [May 11, 2015, 7:58pm UTC](https://forum.ionicframework.com/t/help-with-routing/22765/1 "2015-05-11T19:58:28Z")

</div>

I’m really struggling with understanding how the routing works ☹

I’m trying to learn ionic framework, and I have been reading routing side of things and this is were I am getting a little stuck.

I had my app working, but now I want to add more views. So, I have started by putting my home view in a state called ‘home’ (sorry if i am not using the correct terminology).

Ok here is my html:

```
<html ng-app="ionic.example">
  <head>
    <meta charset="utf-8">
    <title>Venues</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>

  </head>
  <body>    

     <ion-pane>

      <ion-header-bar class="bar-positive">
        <div class="buttons">
         <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </div>
        <h1 class="title">Venues</h1>
      </ion-header-bar>  

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

      <ion-view nng-controller="MyCtrl" title="home">
        <ion-content class="has-header">

        <ion-list>
          <ion-item ng-repeat="item in items">
            <a href="#/venue/{{ item[0].id }}">
              <div class="list card">
                <div class="item item-avatar">
                <img src="{{ item[0].profile_pic }}">
                <h2 class="item-venue-title">{{ item[0].name }}</h2>
                <p class="item-location">UK</p>
              </div>
              <div class="item item-body">
                <img class="full-image" src="{{ item[0].heder_img }}">
              </div>
            </a>

            <div class="item tabs tabs-secondary tabs-icon-left">
              <a class="tab-item" href="#">
              <i class="icon ion-thumbsup"></i>
              Like
              </a>
              <a class="tab-item" href="#">
              <i class="icon ion-chatbox"></i>
              Comment
              </a>
              <a class="tab-item" href="#">
              <i class="icon ion-share"></i>
              Share
              </a>
            </div>
          </div>

          </ion-item>
        </ion-list>

      <ion-infinite-scroll on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

    </ion-content>
    </ion-view>

    <nav class="tabs tabs-icon-bottom tabs-positive">
         <a class="tab-item">
          Clean
          <i class="icon ion-waterdrop"></i>
        </a>
        <a class="tab-item">
          Security
          <i class="icon ion-locked"></i>
        </a>
        <a class="tab-item has-badge">
          Light
          <i class="badge">3</i>
          <i class="icon ion-leaf"></i>
        </a>
        <a class="tab-item">
          Clean
          <i class="icon ion-waterdrop"></i>
        </a>
    </nav>

      </ion-pane>

  </body>
</html> 

```

and a snippet of my js is

```
var example=angular.module('ionic.example', ['ionic'])

 .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'templates/home.html',
                controller: 'MyCtrl'
            })
           ;
        $urlRouterProvider.otherwise('/home');
    });

```

Any advice is welcome 😄

---

<div class="post-metadata">

**Author:** ![saimon](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/saimon/32/133587_2.png) [@saimon](https://forum.ionicframework.com/u/saimon)\
**Post date:** [May 12, 2015, 11:43am UTC](https://forum.ionicframework.com/t/help-with-routing/22765/2 "2015-05-12T11:43:39Z")

</div>

First of all, you have a typo where you add the controller to your html (nng-controller) which should be:

```
<ion-view ng-controller="MyCtrl" title="home">

```

Additional, where is the implementation of your controller? The file which contains ‘MyCtrl’. BTW: You might need to load this \*.js file also below cordova, app.js and so on! Try to open the console in your browser when you test your app inside a browser!

---

<div class="post-metadata">

**Author:** ![liverpool](https://avatars.discourse-cdn.com/v4/letter/l/e99b99/32.png) [@liverpool](https://forum.ionicframework.com/u/liverpool)\
**Post date:** [May 12, 2015, 1:26pm UTC](https://forum.ionicframework.com/t/help-with-routing/22765/3 "2015-05-12T13:26:22Z")

</div>

Thanks, dam typos!

I implemented the controller in the app.js file. I think ive got it working “kind of” now. Takes a bit to get your head around

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [May 12, 2015, 2:49pm UTC](https://forum.ionicframework.com/t/help-with-routing/22765/4 "2015-05-12T14:49:27Z")

</div>

Can I recommend this blog post to you: [http://mcgivery.com/100-ionic-framework-resources/](http://mcgivery.com/100-ionic-framework-resources/)

> **[100+ Ionic Framework Resources](http://forum.ionicframework.com/t/100-ionic-framework-resources/22630)**
>
> http://mcgivery.com/100-ionic-framework-resources/ "There are many posts and articles on the Ionic Framework but sometimes it is difficult to locate exactly what you need. This list is a an attempt to create a comprehensive list of tutorials that...

There are a lot of resources there that will help you get a better understanding of Ionic. 🙂 The first article on the structure should help explain things. Let me know if you need more resources.
