Child states not rendering with parent state in Ionic V-1


#1

I’m new to Ionic v-1. I tried implementing navigation using parent-child relationship. The parent state is “tab” while the active child state is “home”. When I load the app, the home state contents do not load.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">

    <!-- un-comment this code to enable service worker
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
          .then(() => console.log('service worker installed'))
          .catch(err => console.log('Error', err));
      }
    </script>-->

    <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 ng-app="starter">

    <ion-pane>
      <div class="bar bar-positive item-input-inset headerBorder">          
          <label class="item-input-wrapper positive-bg" id="headerSearch">
            <i class="icon ion-ios-search placeholder-icon searchIcon"></i>
            <input type="search" placeholder="People, jobs, posts and more...">
          </label>
          <a href="#"><i class="icon ion-grid placeholder-icon searchIcon"></i></a>
      </div>

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

      <script id="templates/tabs.html" type="text/ng-template">
          <div class="tabs-stripped tabs-top tabs-background-positive tabs-color-light">
            <div class="tabs tab-top">
              <a href="#/tab/home" class="tab-item active">
                <i class="icon ion-home"></i>
              </a>
              <a href="#/tab/addFriend" class="tab-item">
                <i class="icon ion-person-stalker"></i>
              </a>
              <a href="#/tab/message" class="tab-item">
                <i class="icon ion-chatboxes"></i>
              </a>
              <a href="#/tab/notifications" class="tab-item">
                <i class="icon ion-android-notifications"></i>
              </a>
              <a href="#/tab/profile" class="tab-item">
                <i class="icon ion-person"></i>
              </a>
            </div>  
          </div>   
      </script> 

      <script id="templates/home.html" type="text/ng-template">
          <ion-content class="has-tabs-top">
            <div class="list card">
              <div class="item item-thumbnail-left">           
                <img src="img/ionic.png">
                <h2 class="listCss">Name</h2>
                <h3>Followers</h3>
                <p>Time</p>          
              </div>
              <div class="item item-image">
                <img src="img/NIKHIL.jpg">
              </div>  
              <a href="#" class="item assertive">Click here...</a>
            </div>        
          </ion-content>
       </script>

       <script id="templates/addFriend.html" type="text/ng-template">

       </script>

       <script id="templates/message.html" type="text/ng-template">

       </script>

       <script id="templates/notifications.html" type="text/ng-template">

       </script>

       <script id="templates/profile.html" type="text/ng-template">

       </script>
    </ion-pane>
  </body>
</html>
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.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: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.addFriend',{
      url:"/addFriend",
      views:{
        'addFriend-tab':{
            templateUrl:"templates/addFriend.html",
            controller:'addFriendTabController'
        }
      }
    })
    .state('tabs.message',{
      url:"/message",
      views:{
        'message-tab':{
            templateUrl:"templates/message.html",
            controller:'messageTabController'
        }
      }
    })
    .state('tabs.notifications',{
      url:"/notifications",
      views:{
        'notifications-tab':{
            templateUrl:"templates/notifications.html",
            controller:'notificationsTabController'
        }
      }
    })
    .state('tabs.profile',{
      url:"/profile",
      views:{
        'profile-tab':{
            templateUrl:"templates/profile.html",
            controller:'profileTabController'
        }
      }
    });
    $urlRouterProvider.otherwise("/tab/home");
})

.controller('HomeTabCtrl',function($scope){
    console.log("Home tab");
})
.controller('addFriendTabController',function($scope){
    console.log("addFriend tab");
})
.controller('messageTabController',function($scope){
    console.log("message tab");
})
.controller('notificationsTabController',function($scope){
    console.log("notifications tab");
})
.controller('profileTabController',function($scope){
    console.log("profile tab");
});

#2

yeah, because your html structur is totally wrong i think.

first of all there should be a single ion-nav-view in your body… no ion-page and no div-bar.
end the template scripts should be direct childs of the body.

If you have child states, you need child ion-nav-views.

<ion-nav-view name="home-tab"></ion-nav-view>

in the tabs template… that is how children work.

Check out the tab starter: https://github.com/driftyco/ionic-starter-tabs