CODEWITHSUNDEEP
javascriptcordovaionic-framework
tarek fellah
tarek fellah

Reputation: 367

$state.go don't work in ionic framework

I'm creating a cordova app with ionic framework, i created a blank app with CLI, in my index.html i have a slide box, in which i have a button in the last slide. I have registered a click event in that button, in click in the button i would like to navigate to templates/projects.html. I hope my problem is clear. Thanks

index.html file

  <body ng-app="starter" class="platform-android platform-cordova platform-webview">

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">BabyLapse</h1>
  </ion-header-bar>
  <ion-content>
      <ion-slide-box style="height:100%" on-slide-changed="slideHasChanged($index)">
          <ion-slide >
              <div style="height:100%" class="box blue"><h1>BLUE</h1>
                  <img src="img/tutorial_img1.jpg">
              </div>
          </ion-slide>
          <ion-slide>
              <div class="box yellow"><h1>YELLOW</h1>
              <img src="img/tutorial_img2.jpg">
              </div>
          </ion-slide>
          <ion-slide>
              <div class="box pink"><h1>PINK</h1>
                  <img src="img/tutorial_img3.jpg" class="image">
              </div>
          </ion-slide>
          <ion-slide>
              <div class="box blue"><h1>BLUE</h1>
                  <img src="img/tutorial_img4.jpg">
              </div>
          </ion-slide>
          <ion-slide ng-controller="FirstSlideCtrl">
              <div class="box yellow"><h1>YELLOW</h1>
                 <!-- <img src="img/tutorial_img5.jpg" >-->
                  <button style="z-index:1000;height:100px;width:100px" ng-click="go('app.projects');">Créer Projet</button>
              </div>
          </ion-slide>
      </ion-slide-box>
  </ion-content>
</ion-pane>

app.js file

angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])
      .config(function($stateProvider, $urlRouterProvider) {
          $stateProvider

              .state('app', {
              url: "/app",
              abstract: true,
              templateUrl: "index.html",
              controller: 'StarterCtrl'

          })

          .state('app.projects', {
              url: "/projects",
              views: {
                  'projects': {
                      templateUrl: "templates/projects.html",
                      controller: 'ProjectsCtrl'
                  }
              }
          });
          //$urlRouterProvider.otherwise('/projects');
      })

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

      })
  });

controllers.js

 angular.module('starter.controllers', ['ui.router'])

   .controller("StarterCtrl", function($scope) {
           $scope.data = {
               numViewableSlides: 0,
               slideIndex: 0,
               initialInstruction: true,
               secondInstruction: false

           };
           $scope.slideHasChanged = function(index) {
               $scope.data.slideIndex = index;
           };
           $scope.go = function(route) {
               alert('1');
               $state.go(route);

           };

       })
       .controller("ProjectsCtrl", function($scope) {

           $scope.playlists = [{
               title: 'Reggae',
               id: 1
           }, {
               title: 'Chill',
               id: 2
           }, {
               title: 'Dubstep',
               id: 3
           }, {
               title: 'Indie',
               id: 4
           }, {
               title: 'Rap',
               id: 5
           }, {
               title: 'Cowbell',
               id: 6
           }];
       })
       .controller("FirstSlideCtrl", function($scope, $state) {

           $scope.go = function(route) {
               alert(route);
               $state.go('app.projects');

           };

       });

Upvotes: 0

Views: 293

Answers (1)

LeftyX
LeftyX

Reputation: 35587

I cannot follow your code so I'll try to recreate. In Ionic/Cordova you should have an index.html which would be your entry for the application.

This is the place where you bind your HTML with the angular app and where your reference your scripts.

It should have a body with the main nav-view <ion-nav-view>:

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

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

My ng-app is called app but you can easily replace it with starter.

Then you would have separate "pages" for different views. I can imagine in your situation you would have one view for the slider and the second one for the project's creation.

Each view must be defined in a <ion-view> where you're going to a have a content <ion-content>.

I imagine you're going to need to states:

.state('main', {
    url: '/main',
    templateUrl: 'main.html',
    controller: 'mainController',
})

.state('projects', {
    url: '/projects',
    templateUrl: 'projects.html',
    controller: 'projectsController',
});

if you want to go to projects from the slider page you simply have to: 

$state.go('projects')

This is the end result in a plunker.

As you can see I got read of the abstract view cause it seems to me that you don't really need it as you're not using any base template: side-menu or tabs.

You can always add it but your abstract should never refer the index.html file.

Upvotes: 2

Related Questions