Настройка приложения с ионной вкладкой

Я относительно новичок в ионной области, поэтому здесь я хочу создать свое первое ионное приложение с нуля.Настройка приложения с ионной вкладкой

Я просто пытаюсь запустить и запустить базовые панели с вкладками. Для этого я создал папку приложения внутри www и запущен с моим собственным app.js. Это мой app.js

angular.module("PelvicRehabLog", ["ionic"]) 

.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); 
     cordova.plugins.Keyboard.disableScroll(true); 

    } 
    if (window.StatusBar) { 
     // org.apache.cordova.statusbar required 
     StatusBar.styleLightContent(); 
    } 
    }); 
}) 

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

    // Ionic uses AngularUI Router which uses the concept of states 
    // Learn more here: https://github.com/angular-ui/ui-router 
    // Set up the various states which the app can be in. 
    // Each state's controller can be found in controllers.js 
    $stateProvider 

    // setup an abstract state for the tabs directive 
    .state('home', { 
    url: "/home", 
    abstract: true, 
    templateUrl: "app/home/home.html" 
    }); 

    $urlRouterProvider.otherwise('/home'); 

});

Я также создал домашнюю папку в моей папке приложения со следующей home.html

<ion-nav-bar class="bar-balanced"> 
    <h1 class="title">Log</h1> 
</ion-nav-bar> 

<ion-tabs class="tabs-energized tabs-icon-top"> 

    <!-- Dashboard Tab --> 
    <ion-tab title="Status" icon="ion-home" href="#"> 
    <ion-view name="tab-dash"></ion-view> 
    </ion-tab> 

    <!-- Chats Tab --> 
    <ion-tab title="Status" icon="ion-home" href="#"> 
    <ion-view name="tab-dash"></ion-view> 
    </ion-tab> 

</ion-tabs>

И я изменил соответствующую ссылку в индексе. html

<script src="app/app.js"></script> 
    <script src="js/controllers.js"></script> 
    <script src="js/services.js"></script> 
    </head> 
    <body ng-app="PelvicRehabLog">

На этом этапе я ожидаю увидеть базовое приложение с вкладками с двумя вкладками. Но все, что я вижу, это пустой экран. Любая помощь оценивается.

источник

2015-08-10 Anonymous

Используют у Apache Cordova? Его можно легко настроить с помощью плагина visual studio. Вы просто скопируете pase шаблон в после chek env переменные –

Я на linux, и в любом случае, как имеет значение IDE. –

Вам нужно добавить некоторые дочерние состояния в абстрактном состоянии.

Аннотация Штаты

»... Абстрактное состояние может иметь дочерние состояния, но не может активизироваться себя.„Абстрактное“Сформулируем это просто состояние, которое не может быть перехода к нему. Он активируется неявно когда один из его потомков активизируются ...»

прочитать article или проверить пример app.js от ионной сборки:

.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 
// setup an abstract state for the tabs directive 
.state('tab', { 
url: '/tab', 
abstract: true, 
templateUrl: 'templates/tabs.html' 
}) 
// Each tab has its own nav history stack: 
.state('tab.dash', { 
url: '/dash', 
views: { 
    'tab-dash': { 
    templateUrl: 'templates/tab-dash.html', 
    controller: 'DashCtrl' 
    } 
} 
}) 
.state('tab.chats', { 
    url: '/chats', 
    views: { 
    'tab-chats': { 
     templateUrl: 'templates/tab-chats.html', 
     controller: 'ChatsCtrl' 
    } 
    } 
}) 
.state('tab.chat-detail', { 
    url: '/chats/:chatId', 
    views: { 
    'tab-chats': { 
     templateUrl: 'templates/chat-detail.html', 
     controller: 'ChatDetailCtrl' 
    } 
    } 
}) 
.state('tab.account', { 
url: '/account', 
views: { 
    'tab-account': { 
    templateUrl: 'templates/tab-account.html', 
    controller: 'AccountCtrl' 
    } 
} 
}); 
// if none of the above states are matched, use this as the fallback 
$urlRouterProvider.otherwise('/tab/dash'); 
});

источник

2015-08-11 13:26:30 macrog

Включите <ion-nav-view></ion-nav-view> в свой тег body внутри вашего index.html. Перекрестите консоль на наличие ошибок.

источник

2015-08-11 08:10:46 InfinitePrime

Настройка приложения с ионной вкладкой

ответ

Смежные вопросы