CODEWITHSUNDEEP
javascriptangularjsionic-frameworkweb
Niclas Nordling
Niclas Nordling

Reputation: 23

Ionic/AngularJS can't get states or controller to work

I have a problem regarding tabs in ionic. I'm creating a basic hotel app in Ionic v1 as a school project but I can't get my tabs or controller to work. The states aren't found, it immediately directs me to the link provided in $urlRouterProvider.otherwise. I've followed my teachers tabs example closely and the example found when starting a new tabs project in Ionic. I did get it to work briefly about two days ago but when I returned to the project today it was just blank (besides what i type in the index file nav-view).

This is my app.js file

angular.module('sthlmBB', ['ionic', 'sthlmBB.controllers'])

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
.state("tabs", {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html",
})

.state("tabs.home", {
  url: "/home", 
  views: {
    "home-tab": {
     templateUrl: "templates/home.html",
     controller: "HotelCtrl"
  }
}
})

.state("tabs.bookings", {
  url: "/bookings",
  views: {
    "bookings-tab": {
     templateUrl: "templates/bookings.html",
     controller: "BookingsCtrl"
  }
}
})

.state("tabs.events", {
  url: "/events",
  views: {
    "events-tab": {
    templateUrl: "templates/events.html",
    controller: "EventsCtrl"
  }
}
});

$urlRouterProvider.otherwise("/tabs/home");

})

controllers.js

angular.module('sthlmBB.controllers', [])

.controller('HotelCtrl', function($scope, $http, $state){
  var url = 'link to php file';
  $http.get(url).success(function(response){
  $scope.rooms = response.data;

  console.log('HotelCtrl Test')
  console.log($state);
})

$scope.data = { };

$scope.submit = function(){
  var url = 'link to another php file';
  $http.post(url, $scope.data)
    .then(function(response){
      $scope.response = response;
      console.log($scope.response);
    });
}
})

In the index.html file I have link to both app.js and controllers.js in the head an ion-nav-view in the body.

tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="My Bookings" icon="ion-home" 
  href="#/tab/bookings">
    <ion-nav-view name="bookings-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Events" icon="ion-home" 
  href="#/tab/events">
    <ion-nav-view name="events-tab"></ion-nav-view>
  </ion-tab>
</ion-tabs>

I'm fairly new to this so chances are there's just a rookie mistake in there somewhere. I would really appreciate any help I can get!

Upvotes: 1

Views: 65

Answers (1)

Niclas Nordling
Niclas Nordling

Reputation: 23

It was a typo in app.js under the first state where the url was '/tab' when it should be '/tabs'. facepalm

Upvotes: 0

Related Questions