Setting up sub views and routes in ionic framework

Question

I want to create and manage sub views in ionic but I couldn't figure out how to make it work, I want to make my login and dashboard pages as abstract, and all other pages be the sub views of dashboard :

for example : dashboard.fax or dashboard.inbox or dashboard.fax.send

I think my problem is my root ion_nav_view directive but I'm not sure, any suggestion how to make it work ?

index.html >>

<body ng-app="modiran">

<ion-nav-view name="menuContent"></ion-nav-view>
<!--<div data-ui-view="menuContent"></div>-->

</body>

partials/login.html >>

<ion-view view-title="login">
  <ion-pane>
    <div class="login">
    <ion-content padding="true"  scroll="false" ng-controller="SignInCtrl">
      <div style="margin-top: 90%">
        <div class="list list-inset login_inputs">
          <label class="item item-input item-icon-right item-input-wrapper">
            <i class="icon ion-person placeholder-icon"></i>
            <input type="text" ng-model="user.username" placeholder="username" class="text-right">
          </label>
        </div>
        <div class="list list-inset login_inputs">
          <label class="item item-input item-icon-right item-input-wrapper">
            <i class="icon ion-locked placeholder-icon"></i>
            <input type="password" ng-model="user.password" placeholder="password" class="text-right padding-right">
          </label>
        </div>

        <button class="item button button-block button-dark" ng-disabled="!user.username || !user.password"
                ng-click="signIn(user)">login
        </button>
      </div>
    </ion-content>
    </div>
  </ion-pane>
</ion-view>

partials/dashboard.html >>

<ion-view view-title="dashboard">
  <ion-pane>

    <ion-header-bar class="bar bar-header bar-dark" align-title="right">
      <button class="button"><img src="img/navcon-logo.png" style="width: 35px; height:35px;"/></button>
      <h1 class="title">modiran</h1>
    </ion-header-bar>

    <ion-content has-header="true" scroll="false" ng-controller="DashboardCrtl">
      <div style="margin-top: 90%" class="dashboard">
        <!--<i class="dash-icon"><img src="../img/24.png" style="width: 60%;height: 60%;"></i>-->
        <img ng-src="img/Menubtn.png" style="width: 5%;height: 5%;margin-top: -8%;float: left;">
        <img ng-src="img/MenubtnR.png" style="float: right;width: 5%;height: 5%;margin-top: -8%;">

        <div class='circle-container'>
          <a class='center' ng-click="GoTo('SmartOffice')"><img src="img/24.png"></a>
          <a class='deg0'>
            <img src='img/3.png'
                 onmouseover="this.src='img/3sel.png'"
                 onmouseout="this.src='img/3.png'">
                 <!--onmouseover="this.src='../img/3sel.png'"-->

          </a>
          <a class='deg45'>
            <img src='img/4.png'
                 onmouseover="this.src='img/4sel.png'"
                 onmouseout="this.src='img/4.png'">
          </a>
        </div>

      </div>


    </ion-content>

  </ion-pane>
</ion-view>

app.js >>

 .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('login', {
        url: '/login',
        abstract: true,
        templateUrl: 'partials/login.html',
        controller: 'SignInCtrl'
      })

      .state('dashboard', {
        url: '/dashboard',
        abstract : true,
        templateUrl: "partials/dashboard.html",
        controller: 'DashboardCrtl'
      })

      .state('dashboard.SmartOffice', {
        url: '/SmartOffice',
         views: {
          'menuContent': {
            templateUrl: "partials/SmartOffice.html",
            controller: 'SmartOfficeCtrl'
          }
         }
      })

      .state('dashboard.Fax', {
        url: '/Fax',
         views: {
          'menuContent': {
            templateUrl: "partials/fax/Fax.html",
            controller: 'ّFaxCtrl'
          }
        }
      })


    $urlRouterProvider.otherwise('/login');
  })

Answer 1

Try the following changes:

Remove name="menuContent" from the <ion-nav-view> . Why? login state doesn't specify where template should be loaded, by default it will load in the only available <ion-nav-view> , without a name. In case you want to add it, add it this way:
```
 views: { 'menuContent': { templateUrl: "partials/login.html", controller: 'SignInCtrl' } } 
```
Similarly for dashboard . To keep it simple, avoid giving name unless you have more than one nav views where templates can be loaded.
Your login state shouldn't be abstract state because you want to show login page.
You might need to check if user is logged in or not and conditionally show login or dashboard . You can do this in app.run block.

Setting up sub views and routes in ionic framework

Question

1 answers

solution1
1 2016-07-19 12:50:01

Setting up sub views and routes in ionic framework

Question

1 answers

solution1 1 2016-07-19 12:50:01

solution1
1 2016-07-19 12:50:01