AngularJS verhindern, dass $ urlRouterProvider.otherwise die "Standard" -Seite öffnet

Question

Ich lade einige Bilder von db gemäß dem Listeneintrag click. Alles funktioniert gut, aber vor dem Laden der Vorlage/des Status des Bildrasters öffnet ionic framework + angularjs den Standardstatus von $urlRouterProvider.otherwise().

Wie kann ich verhindern, dass dies geschieht und den Bildgitterstatus direkt öffnet?

Listenelement html:

<ion-list id="fotos-list4" ng-show="albums_list"> 
    <ion-item class="item-icon-left item-icon-right calm" id="fotos-list-item4" ng-model="album_name" ng-repeat="item in albums" item="item" href="#/item/{{item.FOLDER}}" ng-click="open_album(item)"> 
    <i class="icon ion-images"></i> 
     {{item.FOLDER}} 
    <i class="icon ion-ios-arrow-forward"></i> 
    </ion-item> 
</ion-list> 

Bildraster html

<div class="row" ng-repeat="image in images" ng-if="$index % 2 === 0"> 
     <div class="col col-50" ng-if="$index < images.length"> 
      <img class="grid-thumb" ng-src="http://website.com/{{images[$index].FILE}}" width="100%" ng-click="showImages($index)" /> 
     </div> 
     <div class="col col-50" ng-if="$index + 1 < images.length"> 
      <img class="grid-thumb" ng-src="http://website.com/{{images[$index + 1].FILE}}" width="100%" ng-click="showImages($index+1)" /> 
     </div> 
</div> 

routes.js

angular.module('app.routes', []) 

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

// DEFAULT PAGE 
.state('cadastreSe', { 
    url: '/page5', 
    templateUrl: 'templates/cadastreSe.html', 
    controller: 'cadastreSeCtrl' 
}) 

// LIST ITEMS 
.state('suporte', { 
    cache: false, 
    url: '/page7', 
    templateUrl: 'templates/suporte.html', 
    controller: 'suporteCtrl' 
}) 

// IMAGE GRID 
.state('fotos2', { 
    cache: false, 
    url: '/page8', 
    templateUrl: 'templates/fotos2.html', 
    controller: 'fotos2Ctrl', 
    params: { 
    dataToFotos: false 
    } 
}) 

$urlRouterProvider.otherwise('/page5') 

Controller. js

.controller('suporteCtrl', ['$scope', '$http', '$state', function ($scope, $http, $state) { 

$scope.open_album = function(item){ 

    var dataToPass = {}; 

    $http.post("http://website.com/select-album-by-name.php", {'album_name': item.FOLDER}).then(function(response){ 

     console.log({'album_name': item.FOLDER}); 
     console.log(response); 
     console.log(JSON.stringify(response)); 

     dataToPass.item = item; 
     dataToPass.album = response.data; 

     $state.go('fotos2', {dataToFotos: dataToPass}); 

    }); 

} 


.controller('fotos2Ctrl', ['$scope', '$state', function ($scope, $state) { 

$scope.myGoBack = function(){ 
    $state.go('suporte'); 
} 

if(!$state.params.dataToFotos) { 
    console.log($state.params.dataToFotos); 
    alert("Error :("); 
}else{ 
    console.log($state.params.dataToFotos); 
    $scope.images = $state.params.dataToFotos.album;   
} 

Answer 1

Als ich mit komplexem arbeitete, oder auch einfachen Routing in Winkel/ionischen, wie ich ein Router-Modul ähnlich wie einzurichten, was Sie in routes.js haben. Der Schlüssel ist die Verwendung der run()-Funktion, die nur ausgeführt wird, wenn Ihr Router-Modul initialisiert wird.

angular.module('myapp.router', []) 

.run([ '$state', '$rootScope', function($state, $rootScope) { 

    // you could set the state directly here 
    $state.go('mystate'); 

    $rootScope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams, options) { 

     // or dynamically set the state based on logic here 
     if(userIsLoggedIn) { 
      evt.preventDefault(); // prevent routing 
      $state.go('user.account'); // go to page 
     } 
    }); 

}]);