Bom dia, pessoal!
Recentemente comecei a usar o framework Ionic, pois achei o layout que ele fornece bem mais profissional. No entanto, precisava saber se os colegas sabem dizer como eu faço para colocar um botão ou âncora para fechar o app. Pois como o Ionic usa o AngularJs por padrão, creio que terá que ser um código compatível com o Angular ou dele mesmo.
No PhoneGap eu consegui isso facilmente, pois há uma função específica para tal, mas para o Ionic não encontrei na documentação nem nas pesquisas que fiz.
Até mesmo alguns outros comandos em JavaScript o Ionic não aceita creio que pelo fato de conflitar com o AngularJS.
Desde já agradeço a atenção e ajuda de todos.
Até+
Tente assim:
ionic.Platform.exitApp();
FONTE: ionic.Platform
Obrigado pela resposta @Lucas_Camara.
Mas como eu montaria esse código em uma âncora por favor?
Vou dar uma pesquisada.
Até+
Você pode colocar na ação de um botão.
Vou compilar e fazer um teste. Estou pensando em fazer o teste criando uma nova página html e chamar a página; dentro da página eu colocaria assim:
<ion-view style="" id="page1" title="Sair">
<ion-content class="has-header" padding="false">
ionic.Platform.exitApp();
</ion-content>
</ion-view>
Será que funcionará assim?
Desse jeito não deve funcionar pois você está misturando JS com html de forma errada. O ideal seria colocar na ação de um botão.
Sim, da forma acima não funcionou. Criei um botão sair e coloquei como está abaixo mas também não funcionou.
<ion-item style="" menu-close="" ui-sref="ionic.Platform.exitApp()">Sair</ion-item>
Como eu poderia montar está ação, por favor?
Você deve criar uma função na controller e colocar o código dentro desse método. E na tela apontar o ng-click para essa função criada.
Controller
$scope.fechar = function() {
ionic.Platform.exitApp();
}
Tela:
<ion-item style="" menu-close="" ng-click="fechar()">Sair</ion-item>
Infelizmente não funcionou.
No meu projeto estou usando o Angular UI. peguei o código no creator online e coloquei o código como mencionou e não funcionou.
Então, criei um novo projeto com os códigos do github - ionic start myapp sidemenu - e coloquei o código que indicou e também não funcionou.
Segue os códigos do controllers.js e menu.html do projeto recém criado e depois inserir a função que indicou:
controllers.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//$scope.$on('$ionicView.enter', function(e) {
//});
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('PlaylistsCtrl', 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('PlaylistCtrl', function($scope, $stateParams) {
});
$scope.fechar = function() {
ionic.Platform.exitApp();
}
menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
<ion-item menu-close ng-click="fechar()">
Sair
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Faça assim:
controllers.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
$scope.fechar = function() {
ionic.Platform.exitApp();
}
// resto do controller
})
menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">Login</ion-item>
<ion-item menu-close href="#/app/search">Search</ion-item>
<ion-item menu-close href="#/app/browse">Browse</ion-item>
<ion-item menu-close href="#/app/playlists">Playlists</ion-item>
<ion-item menu-close ng-click="fechar()">Sair</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Obrigado pela resposta, assim que der faço o teste.
Muito bom. Usei recentemente em um App feito com Ionic 3 e funcionou perfeitamente.
Obrigado pela dica.