Estou fazendo um aplicativo em ionic, que usa Angular.js como base. Tenho uma splash nativo do ionic com 3s e logo depois entra no controller splash que tem um vídeo de 5s com uma animação. Queria saber como fazer um redirecionamento para um outro controller, login assim que o video acabar. Alguém pode me ajudar nisso?
3 Respostas
Pra fazer o que queres, sempre que a aplicação iniciar você redirecionar a rota para uma tela qualquer, para isso, faça um state go no run:
angular.module('myApp', [])
.config(something => {})
.run(function ($state) {
$state.go('rotaDaTelaComVideo');
});
De acordo com a documentação do Angular: Documentação
config
é chamado primeiramente na inicialização do módulo.run
é chamado uma vez na inicialização do módulo, logo após o config.Compilação de diretivas e outros...
Controllers são criados.
Link das Diretivas, se houver.
Dessa maneira, é seguro chamar uma rota no run, de meneira que na próxima iteração do Angular ele irá carregar seu módulo.
Bonus:
Ainda, se você quer que o vídeo rode apenas uma vez, você pode salvar uma flag no localStorage:
angular.module('myApp', [])
.config(something => {})
.run(function ($state, $window) {
if ($window.localStorage['alreadyShown'] !== true) {
$state.go('rotaDaTelaComVideo');
$window.localStorage['alreadyShown'] = true;
}
});
Assim ele irá rodar apenas a primeira vez que o usuário iniciar o aplicativo, ou depois de limpar todos os dados do cache.
-
Bem vindo a comunidade stackoverlow em português. Muito boa sua resposta :) Commented 24/10/2016 às 13:38
Injete o $state
ao seu Controller e depois que o vídeo terminar use o $state.go
.
function goLogin(){
$state.go("app.login-new");
}
-
como colocar isso em código? digo, depois que vídeo acabar Commented 24/10/2016 às 1:19
-
Coloca o trecho de código que você manipula o vídeo pra vê se consigo te ajudar– LuKs SysCommented 24/10/2016 às 10:16
-
Aqui tem uma maneira. Veja na linha 80, o redirecionamento. Commented 24/10/2016 às 14:24
<ion-view title="splash" id="splash" hide-nav-bar="true">
<ion-content padding="true" class="has-header vcenter" scroll="false">
<video preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer">
<source src="video/splash.mp4" type="video/mp4"/>
</video>
</ion-content>
</ion-view>
Controller
.controller('splash', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])