Help With Routing

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">
    <meta charset="utf-8">

    <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/" 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>



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


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

          <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 class="item item-body">
                <img class="full-image" src="{{ item[0].heder_img }}">

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


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


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



and a snippet of my js is

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

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

Any advice is welcome :smile:

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!

1 Like

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

Can I recommend this blog post to you:

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.

1 Like