-2

Я не могу найти документацию о том, как ion-nav-view загружает свой первый шаблон. Любая помощь будет оценена.Где ион-новый вид начинает искать первое состояние?

+0

его маршрут по умолчанию – harishr

+0

@entre Я разместил свой код ниже – HerculesDev

+0

в противном случае в нижнем футляре – harishr

ответ

0

По умолчанию это означает, что мой findEvents будет отображаться и загружать этот шаблон первым? @entre

app.js

angular.module('starter', ['ionic', 'starter.controllers',  'ionic.contrib.ui.tinderCards']) 

.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 &&  window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if (window.StatusBar) { 
     // org.apache.cordova.statusbar required 
     StatusBar.styleLightContent(); 
    } 
}); 
}) 

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

$stateProvider 

.state('FindEvents', { 
    url: 'index.html', 
    templateUrl: 'templates/events.html', 
    controller: 'EventsCtrl' 
} 
) 

.state('favorites', { 
    url: '/favorites', 
    templateUrl: 'templates/favorites.html', 
    controller: 'FavoritesCtrl' 
}) 

//alert("working"); 
// if none of the above states are matched, use this as the fallback 
$urlRouterProvider.otherwise('/findEvents') 

}); 

index.html:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
    <link rel="stylesheet" type="text/css" href="css/index.css"> 
    <title>SlidingTransitionwithAPI</title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <script src="lib/ionic/js/ionic.bundle.js"> </script> 
    <script src="cordova.js"></script> 

    <script src="lib/angular-ui-router/release/angular-ui-router.js"></script> 
    <script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script> 

    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> 

    <script src="lib/ionic-ion-swipe-cards/ionic.swipecards.js"></script> 

    <script src="lib/collide/collide.js"></script> 
    <script src="lib/ionic-ion-tinder-cards/ionic.tdcards.js"></script> 


</head> 
<body ng-app="starter" no-scroll> 
    <ion-nav-view> 

    </ion-nav-view> 
</body> 
</html> 

controllers.js:

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

.directive('noScroll', function() { 
return { 
    restrict: 'A', 
    link: function ($scope, $element, $attr) { 
     $element.on('touchmove', function (e) { 
      e.preventDefault(); 
     }); 
    } 
} 
}) 


.controller('EventsCtrl', function ($scope, $state) { 
var cardTypes = [ 
    { image: './images/event1.jpeg', title: 'New Apple Release' }, 
    { image: './images/event2.jpeg', title: 'Digital Conference' }, 
    { image: './images/event3.jpg', title: 'Skyline Sessions' }, 
    { image: './images/event4.jpg', title: 'Secret Rooftop Party' }, 
    { image: './images/event5.jpeg', title: 'Smoking Lights' }, 
    { image: './images/event6.jpg', title: 'Antibes Color Run' }, 
    { image: './images/event7.jpg', title: 'Tomorrowland' }, 
    { image: './images/event8.jpeg', title: 'Steve Aoki Lighting Up Town' }, 
    { image: './images/event9.jpeg', title: 'Nice Yacht Party' }, 
    { image: './images/event10.jpg', title: 'Night Pool Party' }, 

]; 

$scope.cards = []; 

$scope.addCard = function() { 
    for (var p = 0; p < 10; p++) { 

     var newCard = cardTypes[p]; 
     newCard.id = Math.random(); 
     $scope.cards.push(angular.extend({}, newCard)); 
    } 
} 

$scope.addCard(); 

$scope.cardDestroyed = function (index) { 
    $scope.cards.splice(index, 1); 
}; 

$scope.cardSwipedLeft = function (index) { 
    console.log('Left swipe'); 
} 

$scope.cardSwipedRight = function (index) { 
    console.log('Right swipe'); 
} 

$scope.cardDestroyed = function (index) { 
    $scope.cards.splice(index, 1); 
    console.log('Card removed'); 
} 

//Transitioning between states 
$scope.Favorites = function() { 

    $state.go('favorites'); 
} 
}); 

events.html:

<ion-view view-title="Events" ng-controller="EventsCtrl"> 

<ion-content ng-app="starter" > 
    <ion-pane> 
     <div class="bar bar-header bar-dark"> 
      <button class="button button-clear button-icon icon ion-navicon"> </button> 
      <div class="h1 title" font="6" color="white">Event Finder</div> 
      <button class="button button-clear" ng-click="Favorites()"> 
       <i class="icon ion-heart"></i> 
      </button> 
     </div> 

     <td-cards> 
      <td-card id="td-card" ng-repeat="card in cards" on-destroy="cardDestroyed($index)" 
        on-swipe-left="cardSwipedLeft($index)" on-swipe- right="cardSwipedRight($index)" 
        on-partial-swipe="cardPartialSwipe(amt)"> 
       <div class="title"> 
        {{card.title}} 
       </div> 
       <div class="image"> 
        <div class="no-text overlayBox"><div class="noBox boxed">Trash</div></div> 
        <img ng-src="{{card.image}}"> 
        <div class="yes-text overlayBox"><div class="yesBox boxed" id="centerMe">Save</div></div> 
       </div> 
      </td-card> 
     </td-cards> 
    </ion-pane> 

</ion-content> 
</ion-view> 
+0

Я думаю, что вы загрузили код, чтобы улучшить вопрос, поэтому вы должны вставить этот код, отредактировав свой вопрос, вместо того, чтобы добавлять его в качестве ответа. –

0

app.js Ваш конфигурационный блок должен быть:

$stateProvider 

.state('FindEvents', { 
    url: 'findEvents', 
    templateUrl: 'templates/events.html', 
    controller: 'EventsCtrl' 
}) 

.state('favorites', { 
    url: '/favorites', 
    templateUrl: 'templates/favorites.html', 
    controller: 'FavoritesCtrl' 
}) 

//alert("working"); 
// if none of the above states are matched, use this as the fallback 
$urlRouterProvider.otherwise('/findEvents') 

url из FindEvents состояние должно быть findEvents и не index.html. url не является ссылкой на любой файл html, а на строку, которую вы будете использовать для идентификации маршрута.

Нелегко определить проблемы с angular-ui-router из-за большого количества конфигурации. Вы можете использовать этот FAQ's suggestion для любых связанных с этим проблем.

+0

Спасибо Ritesh. Я попробовал это, и он все еще не работает. Шаблон по умолчанию не выполняется, оставляя меня с белым экраном @Ritesh Jagga – HerculesDev