Question about $stateProvider naming

ionic-v1
1

Hi everybody
I’m going through this tutorial and have got a question about state naming

I’ve got the following code:

<ion-nav-bar class="bar-positive"></ion-nav-bar>

  <ion-tab icon="ion-checkmark" ui-sref="todos">
      <ion-nav-view class="pane" name="todos"></ion-nav-view>
  </ion-tab>

  <ion-tab icon="ion-help" ui-sref="help">
      <ion-nav-view class="pane" name="help"></ion-nav-view>
  </ion-tab>

<script type="text/ng-template" id="help.html">
    <ion-view title="Help">
        <ion-content padding="true">
            <h2>Help page</h2>
            <p>Help route</p>
        </ion-content>
    </ion-view>
</script>

  <script type="text/ng-template" id="todos.html">
    <ion-view title="Todos">
        <ion-content padding="true">
            <ion-list>
                <ion-item ng-repeat="todo in todos" class="item item-icon-right">
                    <span ng-class="{done: todo.done}">{{todo.title}}</span>
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-view>
  </script>

And js file:
var app = angular.module(‘bb-mobile’,[‘ionic’]);

app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise(’/’);

$stateProvider.state('todos', {
    url: '/',
    views: {
        todos: {
            templateUrl: 'todos.html',
            controller: 'TodosCtrl'
        }
    }
});

$stateProvider.state('help', {
    url: '/help',
    views: {
        help: {
            templateUrl: 'help.html'
        }
    }
});

});

app.controller(‘TodosCtrl’, function($scope){
$scope.todos = [
{title: “Title 1”, done: true},
{title: “Title 2”, done: false},
{title: “Title 3”, done: false}
];
});

There are just 2 tabs with 2 templates. So the question is, when I change state names in the main file, I change ui-sref=“todos” to ui-sref=“app.todos” and ui-sref=“help” to ui-sref=“app.help”(as in the tutorial) and in my js file do the same, change $stateProvider.state(‘todos’ … to $stateProvider.state(‘app.todos’ … and $stateProvider.state(‘help’ … to $stateProvider.state(‘app,help’ … and then routing breaks. I can see only 2 tabs, but routing not working any more. What am I doing wrong?

Hope you got the question

Thanks in advance

UPD.: Found using abstract states

1 Like
2

Hi, I’m having the same problem as you did. it breaks when I changed it to app.todos and I don’t know why they have to name it as app.todos instead of todos. As I said we have the same problem when I use todos instead of app.todos it works perfectly fine. Is this question are already solved? Please Reply…