Help With Routing


#1

I’m really struggling with understanding how the routing works :frowning:

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 :smile:


#2

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!


#3

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


#4

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

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